Next.js でのハマりどころ 自分用メモの羅列 firebase用の.envファイルのパラメータ命名 NEXT_PUBLIC_FIREBASE_API_KEY="" NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="" NEXT_PUBLIC_FIREBASE_PROJECT_ID="" NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="" NEXT_PUBLIC_FIREBASE_MESSAGE_SENDER_ID="" NEXT_PUBLIC_FIREBASE_APP_ID="" NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="" 先頭のprefixに必ず NEXT_PUBLIC_ をつける事。これをつけないと、Next.js内で参照する事ができない。 process.env.~でアクセスするコードを書くと分かるが、コマンド実行しているコンソール内にはきちんと設定した環境変数が出力されるが、ブラウザのコンソール内にはundefinedが出てくる。 こういう謎のprefixをつけなきゃ見えないみたいな処理が入ってるのは、フレームワークあるあるの罠である。 ロード時間に死ぬほど時間が掛かる プロジェクトに recharts を追加してからyarn devしたら、読み込みに死ぬほど時間が掛かるようになった。 具体的には、1.8Mのjsファイルを読み込むのに1分ちょい掛かるというありえない開発体験をする事に。 「nextjs development loading very slow」みたいなキーワードで検索すると、検索トップに Super slow page load times in development environment みたいなgithub discussionページが引っかかった。 これをばーっと眺めていると、どうやらGoogle ChromeのPWA用キャッシュをクリアすると早くなるらしい。 半信半疑で、Application→Application→Storage→Clear site dataをクリックしたら、見事にロード時間が改善