Dev Study
← コース一覧

Next.js

React をベースにしたフルスタックフレームワーク Next.js を、App Router を前提に学びます。ルーティング・レンダリング・データ取得・API とメタデータの4つのセクションに分け、1レッスン1テーマで読み切れる形で解説します。

公式ドキュメント: Next.js Documentation ↗

ルーティング

  1. 1
    App Router — フォルダがそのままURLになる
    Next.js の App Router では、app ディレクトリの中のフォルダ構成がそのまま URL になります。app フォルダ直下が「/」、app/about フォルダが「/about」、app/blog/news フォルダが「/blog/news」に対応します。ルーティングの設定ファイルは一切書きません。
  2. 2
    page.tsx — フォルダをページにする
    フォルダを作っただけでは、まだページとして表示されません。フォルダの中に page.tsx という名前のファイルを置き、コンポーネントを default export すると、それがそのフォルダの URL のページの中身になります。
  3. 3
    layout.tsx — 共通UIの共有
    layout.tsx は、同じフォルダ以下のすべてのページを包む共通の枠です。children という props で各ページの中身を受け取り、ヘッダーやナビゲーションなど共通の UI と一緒に表示します。app/layout.tsx は全ページ共通のルートレイアウトで、html タグと body タグをここに書きます。
  4. 4
    Link — ページ間の移動
    ページ間の移動には、a タグの代わりに next/link の Link コンポーネントを使います。書き方は a タグとほぼ同じで、href に移動先のパスを渡すだけです。
  5. 5
    動的ルート — [id] でURLの一部を受け取る
    ブログ記事のように「/blog/1」「/blog/2」と無数にあるページは、フォルダ名を角括弧にした app/blog/[id]/page.tsx という1つのファイルでまとめて作れます。角括弧の部分は何にでもマッチし、ページは params から id の実際の値("1" や "2")を受け取れます。
    実行可
  6. 6
    ルートグループ — ( ) でURLに出ないフォルダを作る
    フォルダ名を丸括弧で囲むと、そのフォルダは URL に現れない「整理用のフォルダ」になります。app/(marketing)/about/page.tsx の URL は /marketing/about ではなく /about のままです。
  7. 7
    loading.tsx — ページ準備中の表示
    loading.tsx をフォルダに置くと、同じフォルダの page.tsx の準備が終わるまでの間、代わりにこのファイルの中身が自動で表示されます。スピナーや「読み込み中...」のような軽い UI を default export するだけです。
  8. 8
    not-found.tsx — 404ページを作る
    存在しない URL にアクセスされたときに表示するページは、app/not-found.tsx に書きます。default export したコンポーネントが、どのルートにもマッチしなかったときに自動で表示されます。

レンダリング

  1. 9
    Server Components — サーバーでHTMLを作る
    App Router のコンポーネントは、何も書かなければサーバー側で実行され、HTML に変換されてからブラウザに届く Server Component になります。これまでのレッスンで書いた page.tsx や layout.tsx は、すべて Server Component です。
  2. 10
    Client Components — "use client" でブラウザ上で動かす
    クリックへの反応や useState など、ブラウザ上で動く機能が必要なときは、ファイルの先頭に "use client" と書いて Client Component にします。この1行で、そのファイルのコンポーネントはブラウザでも実行されるようになります。
  3. 11
    組み合わせ方 — ServerからClientへpropsを渡す
    Server Component と Client Component は組み合わせて使います。基本の形は「ページ(Server)がデータを用意し、操作が必要な部品(Client)に props で渡す」です。Client Component は受け取った props を普通の React コンポーネントと同じように使えます。

データ取得

  1. 12
    データ取得 — サーバーでの fetch
    Server Component は async 関数にでき、その中で直接 await fetch(...) と書いてデータを取得できます。取得したデータをそのまま JSX に渡せるので、useEffect やローディング状態の管理を自分で書く必要がありません。
  2. 13
    キャッシュと revalidate — 取得結果を使い回す
    毎回同じデータを取りに行くのは無駄なので、Next.js は fetch の結果をキャッシュ(保存)して使い回せます。fetch の第2引数に { next: { revalidate: 60 } } のように書くと、「60秒間は保存した結果を返し、期限が切れたら取り直す」という動きになります。
    実行可
  3. 14
    Server Actions — フォームからサーバー処理を呼ぶ
    Server Action は、先頭に "use server" と書いた async 関数で、フォームの action 属性に直接渡せます。送信されると関数がサーバー側で実行され、入力内容は FormData として受け取れます。
  4. 15
    useActionState — フォームの結果と送信中を表示する
    Server Action は呼べるようになりましたが、ユーザーには「送信できたのか」「処理中なのか」が見えません。React の useActionState フックを使うと、Server Action の戻り値(結果メッセージなど)と送信中かどうかのフラグを画面に表示できます。

API とメタデータ

  1. 16
    Route Handlers — APIエンドポイントを作る
    route.ts というファイルに GET や POST という名前の関数をエクスポートすると、そのフォルダのパスが API エンドポイントになります。app/api/posts/route.ts なら「/api/posts」に GET や POST リクエストを送れるようになり、レスポンスは NextResponse.json(...) で返します。
  2. 17
    metadata — ページのタイトルとSEO
    ブラウザのタブや検索結果に出るページのタイトル・説明文は、page.tsx や layout.tsx から metadata という名前のオブジェクトをエクスポートして設定します。Next.js がこれを読み取り、HTML の head 内の title タグや meta タグを自動で生成してくれます。
  3. 18
    next/image — 画像の最適化
    画像の表示には、img タグの代わりに next/image の Image コンポーネントを使います。src・alt に加えて width と height を指定すると、画像の自動圧縮、画面サイズに合わせた変換、画面に入ってからの遅延読み込みをすべて自動でやってくれます。