Next.js を学ぶときによくあるつまずきポイントと対策をまとめました。

⚠️ つまずきポイント&対策
1
「export default を書かないとページにならない」
Next.js のページコンポーネントには必ず export default が必要です。export function(named export)では動きません。
2
「getStaticProps と getServerSideProps どちらを使えばいい?」
迷ったらまず getStaticProps(SSG)を試しましょう。ユーザーごとに異なるデータやリアルタイム性が必要な場合だけ getServerSideProps を使います。
3
「NEXT_PUBLIC_ を付け忘れて環境変数が undefined になる」
クライアントサイドで使う環境変数には必ず NEXT_PUBLIC_ プレフィックスを付けましょう。サーバーサイド(getServerSideProps等)ではプレフィックス不要です。
4
「<a> タグでリンクしたらページが重い」
内部リンクには必ず next/linkLink を使いましょう。<a> タグはページ全体をリロードするため重くなります。
5
「ブラウザ単体では Next.js の全機能が確認できない」
このコースでは React CDN を使って概念を確認しますが、本格的に Next.js を動かすには npx create-next-app@latest でプロジェクトを作る必要があります。