Hero img
Next.jsをサブディレクトリで運用する

Nginx+WordpressのサブディレクトリにNextjsのページを表示させる

Next.jsをサブディレクトリで運用する場合はbasePathを入れるだけで簡単であったが、Nginxの設定につまづいた。


目次

  • Nextjsをサブディレクトリに設定する。
  • 環境
  • サブディレクトリにデプロイするのにハマった。
  • 原因
  • ngxinの設定
  • Nextjsの設定
  • publicフォルダーのファイルやapi
  • バックグランド起動コマンド、終了コマンド
  • nextjsのエラーが発生する。
  • まとめ

Nextjsをサブディレクトリに設定する。

環境

  • nextjs 13.5.6
  • node.js 18.17.1
  • nginx 1.18.0 (Ubuntu)

サブディレクトリにデプロイするのにハマった。

WordPressが起動して、そのサブディレクトリにNextjsをデプロイしようとしていたところ、リダイレクトが繰り返され、リダイレクトエラーで表示ができなかった。nginxのアクセスログ、エラーログを確認してみたが、アクセスログでは確かに何度もアクセスしているようで、エラーログを見ると何も表示されない。つまりエラーは無し...
ウェブページでURLを見てみると、URLの最後のスラッシュ(/)が消えたり付いたりしていた。この現象はGATSBYでも見た覚えがある。

原因

ngxinの設定が違った。最後のスラッシュの関係で出たりでなかったり、

ダメだったコード

片方どちらかのみスラッシュが入っている

location /hoge/ {
  proxy_pass http://localhost:8080;
}

OR

location /hoge {
  proxy_pass http://localhost:8080/;
}


起動したコード

両方スラッシュがある。または両方無し。

location /hoge {
  proxy_pass http://localhost:8080;
}


location /hoge/ {
  proxy_pass http://localhost:8080/;
}

ngxinの設定

プロキシ設定は前の記事でプロキシ設定をすればよく、 繰り返しになるがNext.jsの場合は以下の様に設定する。

location /hoge {
  proxy_pass http://localhost:8080;
}

Nextjsの設定

next.config.jsに一行記入するだけ、

/** @type {import('next').NextConfig} */
const nextConfig = {
basePath: "/hoge",
}
module.exports = nextConfig

publicフォルダーのファイルやapi

パブリックフォルダーの画像等は、このhogeが追加されていなかったので、これは力技で、ただコードにhogeを入れることにした。 apiも同様にhogeを入れることで解決させた。

<src="demoimg.jpg">等を
<src="hoge/demoimg.jpg">const res = await fetch('api/post',{...省略})
const res = await fetch('hoge/api/post',{...省略})

バックグランド起動コマンド、終了コマンド

注意

終了と起動についてはssコマンドでポートや、pidを確認してから、起動、終了を行ってください。

# 起動
nohup npm start &

# 終了 ---注意---
pkill "next-router-wor" 

nextjsのエラーが発生する。

エラー内容
next/dist\client\components\static-generation-async-storage.external.js'

Nextjs13.5.xでエラーが発生してしまう模様。

正常に起動する

windows10,Ubuntu 22.04.3 LT

エラーが発生する

AlmaLinux release 8.8

対処法

nextのバージョンを下げる。

npm uninstall next
npm install next@13.4.19

エラーが報告されているので後に修正されるであろう...

まとめ

  • Nextjsをサブディレクトリで運用する場合basePathを設定する。
  • Nginxはスラッシュに気を付ける

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください