n2dev

Next.js 14 初心者が気をつけるべきこと

2024-08-06

はじめに

この記事では、Web開発初心者がNext.js 14を学習する際に気をつけたほうが良いことを紹介したいと思います。 個人的にNext.jsはRails以上に苦戦しました。

1. バージョンの違い

Next.jsは頻繁にアップデートされており、特に、Next.js 13から導入されたApp Routerは、従来のPages Routerの書き方とは大きく異なります。学習する際には、参照する記事がどのバージョンを対象としているか、App RouterかPages Routerのどちらを使用しているかに細心の注意を払いましょう。

また、生成AIにコードを聞く場合も注意が必要です。ChatGPT 4oにNext.js 14のApp Routerを使った書き方を質問しても、Pages Routerを使った書き方を出力する場合があります。このため、提供されたコードを鵜呑みにせず、自分で確認することが重要になります。

2. Server ComponentとClient Componentの違い

Next.js 14ではこの2つのコンポーネントの違いを理解することが重要です。デフォルトではサーバーコンポーネントを使用しますが、ページファイルの上部に'use client'と書けばクライアントコンポーネントとして処理されます。

Server Component

  • ファイルの読み込みやデータベースからデータ取得が可能である。
  • ユーザーの操作に応じてUIが変化するReact hooksは使用できない。
  • console.logコマンドはサーバー側のターミナルに表示される。

Client Component

  • ブラウザのAPIが使用可能。
  • ユーザーの操作に応じてUIが変化するReact hooksが使用可能である。
  • console.logコマンドはブラウザ側のターミナルに表示される。ただし初回リクエスト時にはサーバー側でも表示される。
  • 子コンポーネントもClient Componentとして処理される。

※初回リクエストとは、ユーザーがページに初めてアクセスする時や、ページリロード時のこと。

基本的には処理が高速で安全なサーバーコンポーネントを使用し、必要に応じて、ユーザー操作やブラウザAPIの使用が求められる場合には、クライアントコンポーネントを使用しましょう。

3. レンダリングの違い

Next.js 14はデフォルトではStatic Renderingをします。

Static Rendering

使用例: ブログページ、eコーマス商品ページ、ドキュメント

  • ビルド時に1回レンダリングされ、CDNにキャッシュされる。
  • 本番環境ではビルド時のみにレンダリングされるが、開発環境ではリクエストごとにレンダリングされる。

Dynamic Rendering

使用例: ニュースフィード、ソーシャルメディアフィード

  • リクエスト毎にレンダリングされる。
  • cookies(), headers(), searchParamsなどのDynamic Functionsが使用されると、自動的にDynamic Renderingが適用される。

初心者におすすめの学習教材

Next.jsはRailsと違い英語のドキュメントが豊富なので、英語に対するアレルギーがないのであれば英語で学んだほうが良いと思います。

公式チュートリアル

Codevolution Next.js 14 Tutorial YouTube