Next.js で正しくローカルで 80 番ポートで動かす方法（または、 TypeError: Cannot read properties of null (reading 'useEffect')）
Q&A
Closed
解決したいこと
最近、 Next.js を使ってウェブアプリを作っています。開発環境では 3002 番ポートを使用して、全て正常に動いていました。
ですが、それを 80 番ポートで sudo next start -p 80 というコマンドを使って起動すると謎のエラーを吐くようになりました。
多分ローカルでの 80 番ポートでの公開の仕方が違うのだと思い、「next.js 80 port」などとググってみましたが、何一つ 80 番ポートでサーバーを建てるという記事がありませんでした。なので、ここで質問させてみました。
環境
- Ubuntu 20.04
- nodejs 16.15.1
- npm 8.11.0
- next 12.1.6
- react 18.1.0
テスト環境 URL:
http://apps.probmkr.com:3002/
GitHub レポジトリ:
https://github.com/Probmkr/test_next_project
発生している問題・エラー
TypeError: Cannot read properties of null (reading 'useEffect')
at Object.exports.useEffect (/var/www/test_next_project/node_modules/react/cjs/react.production.min.js:24:292)
at NextNProgress (/var/www/test_next_project/node_modules/nextjs-progressbar/dist/index.js:1:1005)
at renderWithHooks (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5471:16)
at renderIndeterminateComponent (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5544:15)
at renderElement (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5759:7)
at renderNodeDestructive (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5898:11)
at renderNode (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6030:12)
at renderChildrenArray (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5986:7)
at renderNodeDestructive (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5918:7)
at renderElement (/usr/local/lib/node_modules/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5784:9)
エラーを再現
上のエラーは、下のシェルスクリプトを master ブランチで ./buildrun.sh として走らせた時に建てた本番環境サーバーで起きます。（buildrun.sh のファイル自体は、レポジトリのルートにあります。）
もっと詳しく言えばその本番環境で /admin にアクセスするとおきます。
#buildrun.sh
#!/bin/bash
yarn install
sudo yarn build
if [ $? != "0" ]; then
exit 1
fi
screen -ls builded > /dev/null
if [ $? == "0" ]; then
screen -S builded -X quit
fi
read -p "enter to continue: "
screen -UAmdS builded sudo next start -p ${1:-80}
screen -ls
read -p "do you want to attach? (y:any): " attach
if [ "$attach" == "y" ]; then
screen -r builded
fi
# このスクリプトでは簡単に言えば sudo next build でビルドして、
# sudo next start -p 80 でサーバーを screen を使ってバックグラウンドでスタートさせます。
このエラーは yarn dev（next dev -p 3002）した時には起きることはありません。
自分で試したこと
必死でググりましたが、全く分かりませんでした。
そもそも、 /admin の中では全く useEffect を使ってないのでエラーについて何もかもわかりませんでした。
0
