Konfigurasi .htaccess yang tepat untuk Next.js SSG

NextJS mengekspor situs statis dengan struktur berikut:

|-- index.html
|-- article.html
|-- tag.html
|-- article
|   |-- somearticle.html
|   \-- anotherarticle.html
\-- tag
    |-- tag1.html
    \-- tag2.html

Saya menggunakan file .htaccess untuk menyembunyikan ekstensi .html:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

Semuanya bekerja dengan sempurna, KECUALI:

• Jika saya mengikuti tautan ke domain/articlesana, halaman artikel.html akan ditampilkan, tetapi bilah alamat saya menunjukkan domain/article<- Bagus.
• Jika saya me-refresh, saya dikirim ke alamat: domain/article/(note trailing slash) yang mencantumkan isi direktori artikel <- Bad (sama dengan Tag)
• Demikian pula, mengetik secara manual domain/articleakan membawa saya ke domain/article/alih-alih ditampilkan article.htmltanpa .htmlekstensi.

Begitu...

• Bagaimana cara mengatasinya?
• Apakah ini masalah .htaccess?
• Masalah konfigurasi nextjs?
• (Bukankah lebih baik bagi NextJS untuk membuat article\index.htmldaripada file di direktori root?)

exportTrailingSlash

Saya mencoba bermain-main dengan exportTrailingSlashyang tampaknya terkait, tetapi ini menciptakan masalah lain seperti selalu memiliki garis miring di akhir semua tautan saya:

Misalnya: jika saya pergi ke domain/article/somearticledan menekan refresh, sesuatu (.httaccess?) Menambahkan a /di akhir untuk memberi saya domain/article/somearticle/tidak mengerikan, hanya saja tidak terlalu bersih dan tidak konsisten ...

Sunting: Sebenarnya, ini sedikit lebih mengerikan, karena kadang-kadang kita mendapatkan garis miring, kadang-kadang kita tidak pada tautan nextjs ... pasti sesuatu tentang bagaimana saya menggunakan<Link />tetapi saya tidak dapat mengetahuinya.

Terlepas dari itu, TIDAK ADA .htaccessaturan yang telah saya coba dengan berhasil menghapus garis miring setiap saat ...

Keterangan lebih lanjut:

Di aplikasi saya berikutnya, saya memiliki folder:

/articles/
   [slug].js
   index.js

Di berbagai halaman, saya menggunakan komponen NextJS Link:

import Link from 'next/link';

<Link href="/https/isolution.pro/articles" as="/articles">
            <a>Articles</a>
</Link>

Jika Anda meminta /articledan /articleada sebagai direktori fisik maka mod_dir Apache, akan (secara default) menambahkan garis miring untuk "memperbaiki" URL. Ini dicapai dengan pengalihan permanen 301 - sehingga akan di-cache oleh browser.

Meskipun memiliki direktori fisik dengan nama dasar yang sama dengan file dan menggunakan URL tanpa ekstensi menciptakan ambiguitas. misalnya. Apakah /articleseharusnya mengakses direktori /article/atau file tersebut /article.html. Anda tampaknya tidak ingin mengizinkan akses langsung ke direktori, jadi itu tampaknya menyelesaikan ambiguitas itu.

Untuk mencegah Apache mod_dir menambahkan garis miring ke direktori, kita perlu menonaktifkan DirectorySlash. Sebagai contoh:

DirectorySlash Off

Tetapi seperti yang disebutkan, jika Anda sebelumnya telah mengunjungi /articlemaka pengalihan ke /article/akan di-cache oleh browser - jadi Anda harus menghapus cache browser sebelum ini efektif.

Karena Anda menghapus ekstensi file, Anda juga perlu memastikan bahwa MultiView dinonaktifkan, jika tidak, mod_negotiation akan mengeluarkan permintaan internal untuk file yang mendasarinya, dan berpotensi konflik dengan mod_rewrite. MultiView dinonaktifkan secara default, meskipun beberapa host bersama memang mengaktifkannya karena alasan tertentu. Dari output yang Anda dapatkan sepertinya MultiView tidak diaktifkan, tetapi lebih baik untuk memastikan ...

# Ensure that MutliViews is disabled
Options -MultiViews

Namun, jika Anda ingin mengakses direktori itu sendiri, Anda perlu menambahkan garis miring secara manual dengan penulisan ulang internal. Meskipun ini sepertinya tidak menjadi persyaratan di sini. Namun, Anda harus memastikan bahwa daftar direktori dinonaktifkan:

# Disable directory listings
Options -Indexes

Mencoba mengakses direktori apa pun (yang pada akhirnya tidak memetakan ke file - lihat di bawah) dan tidak berisi DirectoryIndexdokumen akan mengembalikan respons 403 Forbidden, alih-alih daftar direktori.

Perhatikan bahwa satu-satunya perbedaan yang dapat terjadi antara mengikuti tautan ke domain/article, menyegarkan laman, dan mengetik secara manual domain/articleadalah cache ... baik oleh browser atau cache proxy perantara. (Kecuali jika Anda memiliki JavaScript yang mencegat peristiwa klik pada jangkar ?!)

Anda masih perlu menulis ulang permintaan dari /fooke /foo.htmlATAU /fooke /foo/index.html(lihat di bawah), bergantung pada cara Anda mengkonfigurasi situs Anda. Meskipun akan lebih baik jika Anda memilih satu atau yang lain, daripada keduanya (seperti yang Anda katakan bisa jadi kasusnya).

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.html -f
RewriteRule ^(.*)$ $1.html

Tidak jelas bagaimana ini tampaknya "bekerja" untuk Anda saat ini - kecuali jika Anda melihat respons dalam cache? Saat Anda meminta /article, kondisi pertama gagal karena ini ada sebagai direktori fisik dan aturan tidak diproses. Bahkan dengan MultiView diaktifkan, mod_dir akan menjadi prioritas dan menambahkan garis miring.

Kondisi kedua yang memeriksa keberadaan .htmlfile belum tentu memeriksa file yang sama yang sedang ditulis ulang. misalnya. Jika Anda meminta /foo/bar, di mana /foo.htmlada, tetapi tidak ada direktori fisik, /foomaka RewriteConddirektif memeriksa keberadaan /foo.html- yang berhasil, tetapi permintaan secara internal ditulis ulang ke /foo/bar.html(dari RewriteRule pola yang ditangkap ) - ini menghasilkan loop penulisan ulang internal dan 500 respons kesalahan dikembalikan ke klien. Lihat jawaban saya untuk pertanyaan ServerFault berikut yang menjelaskan lebih detail di balik apa yang sebenarnya terjadi di sini.

Kami juga dapat melakukan pengoptimalan lebih lanjut jika kami berasumsi bahwa URL apa pun yang berisi apa yang tampak seperti ekstensi file (mis. Sumber daya statis Anda .css, .jsdan file gambar) harus diabaikan, jika tidak kami melakukan pemeriksaan sistem file pada setiap permintaan, yang relatif mahal .

Jadi, untuk memetakan (secara internal menulis ulang) permintaan formulir /articleke /article.htmldan /article/somearticlekepada /article/somearticle.htmlAnda perlu memodifikasi aturan di atas untuk membaca sesuatu seperti:

# Rewrite /foo to /foo.html if it exists
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}.html -f
RewriteRule !\.\w{2,4}$ %{REQUEST_URI}.html [L]

Tidak perlu membuat garis miring terbalik dari titik literal di RewriteCond TestString - titik tidak memiliki arti khusus di sini; itu bukan regex.

Kemudian, untuk menangani permintaan formulir /fooyang harus dipetakan ke /foo/index.htmlAnda dapat melakukan sesuatu seperti berikut:

# Rewrite /foo to /foo/index.html if it exists
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}/index.html -f
RewriteRule !\.\w{2,4}$ %{REQUEST_URI}/index.html [L]

Biasanya, Anda mengizinkan mod_dir untuk melayani DirectoryIndex(misalnya index.html), tetapi menghilangkan garis miring dari direktori, ini bisa menjadi masalah.

Ringkasan

Menyatukan poin-poin di atas, kami memiliki:

# Disable directory indexes and MultiViews
Options -Indexes -MultiViews

# Prevent mod_dir appending a slash to directory requests
DirectorySlash Off

# Rewrite /foo to /foo.html if it exists
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}.html -f
RewriteRule !\.\w{2,4}$ %{REQUEST_URI}.html [L] # Otherwise, rewrite /foo to /foo/index.html if it exists RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI}/index.html -f RewriteRule !\.\w{2,4}$ %{REQUEST_URI}/index.html [L]

Ini dapat lebih dioptimalkan, tergantung pada struktur situs Anda dan apakah Anda menambahkan arahan lagi ke .htaccessfile. Sebagai contoh:

1. Anda dapat memeriksa ekstensi file pada URL yang diminta di bagian atas file untuk mencegah pemrosesan lebih lanjut. The RewriteRuleregex pada setiap aturan berikutnya kemudian bisa "disederhanakan".
2. Permintaan yang menyertakan garis miring dapat diblokir atau dialihkan (untuk menghapus garis miring).
3. Jika permintaannya adalah untuk sebuah .htmlfile maka alihkan ke URL tanpa ekstensi. Ini dibuat sedikit lebih rumit jika Anda berurusan dengan keduanya /foo.htmldan /foo/index.html. Tetapi ini hanya benar-benar diperlukan jika Anda mengubah struktur URL yang ada.

Misalnya, menerapkan # 1 dan # 2 di atas, akan memungkinkan arahan untuk ditulis seperti ini:

# Disable directory indexes and MultiViews
Options -Indexes -MultiViews

# Prevent mod_dir appending a slash to directory requests
DirectorySlash Off

# Prevent any further processing if the URL already ends with a file extension
RewriteRule \.\w{2.4}$ - [L] # Redirect any requests to remove a trailing slash RewriteRule (.*)/$ /$1 [R=301,L] # Rewrite /foo to /foo.html if it exists RewriteCond %{DOCUMENT_ROOT}/$1.html -f
RewriteRule (.*) $1.html [L] # Otherwise, rewrite /foo to /foo/index.html if it exists RewriteCond %{DOCUMENT_ROOT}/$1/index.html -f
RewriteRule (.*) $1/index.html [L]

Selalu uji dengan pengalihan 302 (sementara) sebelum mengubah ke pengalihan 301 (permanen) untuk menghindari masalah penyimpanan dalam cache.

• (Bukankah lebih baik bagi NextJS untuk membuat article\index.htmldaripada file di direktori root?)

Iya! Dan Next dapat melakukannya untuk Anda:

Anda dapat mengkonfigurasi Next.js untuk mengekspor halaman sebagai file index.html dan memerlukan garis miring, /aboutmenjadi /about/index.htmldan dapat dirutekan melalui /about/. Ini adalah perilaku default sebelum Next.js 9.

Untuk beralih kembali dan menambahkan garis miring, buka next.config.jsdan aktifkan exportTrailingSlashkonfigurasi:

module.exports = { exportTrailingSlash: true, }