World Hacker（ぎょうざブログ） 【Tips - Next.js】実例でわかるシリーズ
【目次】
出会ったエラーたち
▶ ＊ name can no longer contain capital letters
（追記：2024/07/04）
現象：npx create-next-appで、プロジェクト作成ができない
原因：大文字を含んだプロジェクト名の作成、または大文字を含んだフォルダ直下でプロジェクト作成
解決策：「Next-Project」のようなプロジェクト名をつけようとしていた場合▶「next-project」へ変更する
▶ Linkコンポーネントの罠（ぎょうざのぽかケース）
以下、ハマりポイント（更新：2024/04/30）
現象：Next.jsのLinkコンポーネント利用時に、npm run devで動作確認するとリンクテキストがアイコン表示になってしまっていた。
原因：おそらくVisual Studio Codeの自動補完時に、ぎょうざがimport元の確認を怠っていたことが原因でした。
解決策：npm run devで意図しない動作があったときは、npm install したnode_moduleパッケージに
Next.jsと同じ名前のコンポーネントまたは関数がないか注意が必要そうです。。。
以下、v12→v13→v14→v15の変遷
※（2024/11/10追記）v15について
【v12→v13】
▶ なんといってもApp Routerが目玉の一つではないでしょうか？
12→13に移行するといい方
- SSG、SSR、ISR、CSRを一括管理してレンダリングを最適化したい型
【v13→v14】
▶ 新機能「Server Actions」が安定版に
▶ 新機能「Partial Prerendering」
Partial Prerendering：
ページ内で動的コンテンツと静的コンテンツを区別し、それぞれを効率的にレンダリングする機能。これにより、全てのコンテンツを毎回レンダリングするのではなく、必要な部分だけをレンダリングし、ページのロード時間を短縮することができます
13→14に移行するといい方
- 外部APIとやりとりが多い方
- キャッシュ管理を効率化したい方
- ？？？
【appDir】
Next.js 13.4 移行のバージョンでは appDir は stable になったので、appDir: trueの記述は不要になりました。
const nextConfig = {
experimental: {
serverActions: true, // ←この記載が不要
},
};
【環境変数のプレフィックス’NEXT_PUBLIC_～～～’】
秘密情報はNEXT_PUBLIC_プレフィックスなしで保管し、公開しても安全な情報のみをNEXT_PUBLIC_プレフィックスありの変数に格納することが推奨されます。
【v14→v15】
- 破壊的な変更
- ？？？
〆のひと言
Next.jsは、Webアプリケーション開発を進めるうえで、非常に強力な開発フレームワークです。
みなさんも複雑で大規模なWeb開発をされる際には、採用を検討してみてください。
ここまで読んでいただき、ありがとうございました。
以上、ぎょうざでした。