[Nextra]SSGで公開したサイトのページにアクセスすると404 Not foundのエラーが出る

Nextraで静的サイトジェネレーター(SSG)を利用してサイトを公開したときに、ページにアクセスすると404 Not foundのエラーが出る場合の対処方法を紹介します。

原因

Nextraでnpm run buildを実行するとoutディレクトリに静的ファイルが生成されます。このとき、outディレクトリには静的に生成されたHTMLファイルが生成されます。

しかし、Nextraで生成されたWebサイトはシングルページアプリケーションのようにルーターでページを切り替えているため、各ページのリンクは.htmlなしのURLになっています。

トップページからアクセスして各ページに遷移すればそのルーターが働いてページが表示されますが、直接各ページのURLにアクセスすると、ルーターが機能せず、.htmlなしでリクエストしてもファイルしか存在しないため404 Not foundのエラーが出てしまいます。

解決策

Nextraで生成されたWebサイトはシングルページアプリケーションのようにルーターでページを切り替えているため、各ページのリンクは.htmlなしのURLになっています。

そのため、.htmlなしのURLにアクセスしたときは、.htmlを付与してリダイレクトするように設定する必要があります。

一番簡単なのは次の.htaccessをルートディレクトリに配置する方法です。

.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.html [NC,L]

この.htaccessをWebサーバのルートディレクトリに配置すると、.htmlなしのURLにアクセスしたときは、.htmlを付与してリダイレクトするようになります。

コメント