みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Next.jsで作ったサイトをGitHub Pagesで公開する際の設定4点(.nojekyllの追加、ルートの変更、exportのディレクトリ変更、trailingSlashの設定) 👀

f:id:kimizuka:20210103011013j:plain

❶ _nextディレクトリが404にならないように、publicディレクトリに.nojekyllを追加する

Nuxt.jsを使った場合と同じです。

blog.kimizuka.org

GitHubPagesのデフォルトの設定では、こちらの通り、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で始まる、またはティルダ (~) で終わる名前のファイルやディレクトリが無視されます。Jekyllの仕様です。

docs.github.com

なので、next exportで静的書き出ししたウェブサイトをGitHub Pagesにアップすると、_next以下のファイルが404になってしまいます。

対策は簡単で、ウェブのルートとなるディレクトリに .nojekyll という名前の空ファイルを追加すればOKです。
つまり、publicディレクトリに.nojekyllを入れておけば、自動的にoutディレクトリにコピーされるので、それが良いと思います。

❷ URLのルートを変更する

GitHub PagesのデフォルトのURLは、

https://ユーザー名.github.io/リポジトリ名

となります。
なので、URLのルートをリポジトリ名に合わせるとよいでしょう。

blog.kimizuka.org

独自ドメインをつかったりして、パスがない場合はその限りではありません。

❸ exportのディレクトリを変更する

GitHub Pagesでサイトを公開する際のルートはルートかdocs以下かを選べるので、exportで生成されるディレクトリをoutからdocsに変更すると良いでしょう。

ディレクトリ名は引数で渡せるので、package.jsonのscriptsを、

>javascript|
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"export": "next build && next export -o docs"
},
|

という感じで設定すると便利です。

❹ trailingSlashを設定する

これは完全に任意ですが、個人的には、/pages/about/index.tsx(もしくは /pages/about/index.js) を about.html ではなく、 /about/index.html とexportしたいので、最後にスラッシュがつくように設定してます。Vercelにデプロイする場合は不要です。

blog.kimizuka.org