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',{...省略})

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

# 起動
nohup npm start &

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

nextjsのエラーが発生する。

next/dist\client\components\static-generation-async-storage.external.js'

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

対処法

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

npm uninstall next
npm install [email protected]

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

まとめ

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