Next.jsのlearnの紹介

リンク

この記事はlearnページの全体像を伝えることを目的にしています

読者の想定レベル感

• Next.jsかReactをどこかで触った人
  • 一度も触っていないと、あまり実入りがないかも
• コメントアウトを空気読んで外せる人
  • 「Chapter XXXでこのコメントアウトを外して～」というのが多く、Reactに慣れていない人は事故ってハンズオン完走できないかも

Optimizing Fonts and Images (Chapter 3)

• フォントのカスタマイズによるCLS(Cumulative Layout Shift)スコアの悪化を防ぐ利点。next/fontで最適化してくれる。
• <Image />タグによる画像の最適化。

Creating Layouts and Pages (Chapter 4)

• App Router
  • Next.jsの特別な意味を持つファイル　page.tsxとlayout.tsx

Navigating Between Pages (Chapter 5)

• <Link />タグによるクライアント側の移動(soft navigation)。aリンクによる画面の更新を含む移動はhard navigation。

Fetching Data (Chapter 7)、Static and Dynamic Rendering (Chapter 8)

• SEOやキャッシュにより快適な静的レンダリング。
• データのリアルタイム性やユーザー個別コンテンツ向けの動的レンダリング。

Streaming (Chapter 9)

• ローディング時、スケルトンによるSuspenseで画面を表示。
• Data Fetchはデータが必要な各コンポーネントで記述するように勧められています。

Partial Prerendering (Chapter 10)

• 一部分を静的なコードで記述するという考え方

Adding Search and Pagination (Chapter 11)

• useSearchParamsによるクエリパラメータの操作
• usePathnameによるパスの取得
• useRouterのreplaceによる遷移
• すべてクライアント側の操作なので、"use client";ディレクティブを使う

Mutating Data (Chapter 12)

• データ作成を行うServer Actionについて
  • データ作成後にcacheのreavalidate
• "use server";ディレクティブ

Adding Authentication (Chapter 15)

• next-authのコード例

Adding Metadata (Chapter 16)

• 動的なmetadataの設定方法

learnを完走した感想

• getServerSidePropsを書かずになって、propsにデフォルトで存在するらしく、ここは混乱ポイント。
• Suspenseに関して、async FCですぐ子コンポーネントを書けてとても直観的(→これはSSRで、useEffectやuse()互換とは異なる)。
• layout.tsx、page.tsx、route.tsxなど特別な意味を持つファイルがあり、覚える必要がある。https://nextjs.org/docs/app/api-reference/file-conventions
• (overview)ディレクトリなどの()を使った論理グループは下手に運用すると複雑になりそう。
• v14はキャッシュによる難化でサーキット最速だけど非熟練者には厳しいといった意見があったが、learnをやる限りではv15は難しくなさそうに感じた。