Next.js App Router超入門

Next.jsは「Reactで本物のWebサイトを作る」ための土台

Reactだけでは、ページの切り替え(ルーティング)やサーバー側の処理など、実際のWebサイトに必要な部品が足りません。それらをまとめて用意してくれるのがNext.js(ネクストジェイエス)です。現在の標準はApp Router（Next.js）(App Router)という方式で、フォルダの構造がそのままURLになるのが特徴です。

ルールはシンプルです。app というフォルダの下に page.tsx という名前のファイルを置くと、それが1つのページになります。フォルダ名がURLの一部になります。たとえば app/page.tsx はトップページ、app/about/page.tsx は /about のページです。

// app/page.tsx
// このファイルが置いてあるだけで / でアクセスできる
export default function HomePage() {
  return (
    <main>
      <h1>ようこそ</h1>
      <p>これはトップページです</p>
    </main>
  );
}

1. app/page.tsx → / (トップ)
2. app/about/page.tsx → /about
3. app/blog/page.tsx → /blog
4. ページの中身は、これまで学んだReactコンポーネントそのもの

サーバーコンポーネントとクライアントコンポーネント

App Routerでは、コンポーネントは初期状態ではサーバーコンポーネントです。これは「サーバー側で実行され、できあがったHTMLだけがブラウザに届く」種類です。データベースやAPIキーなど、外に見せたくないものを安全に扱え、表示も速いのが利点です。ただし、useStateやonClickのような「ブラウザで動く機能」は使えません。

useStateやクリックイベントを使いたいときは、ファイルの先頭に "use client" と書いてクライアントコンポーネントにします。こちらはブラウザ側で動くので、状態やイベントを扱えます。前のレッスンのCounterのような対話的な部品はこちらです。

// このファイルの先頭に書く。ダブルクォートも含めてこの1行
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

// app/page.tsx  ← use client がない
import { useState } from "react";

export default function Page() {
  const [n, setN] = useState(0); // エラー
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

// app/page.tsx (サーバー) は表示だけ担当
import Counter from "./Counter"; // Counter 側に "use client"

export default function Page() {
  return (
    <main>
      <h1>ホーム</h1>
      <Counter />
    </main>
  );
}

覚えることは2つ。フォルダに置いた page.tsx がページになること、そして状態やイベントを使う部品だけ先頭に "use client" をつけること。ここまでで、型で守られたReact/Next.jsの入り口に立てました。