Next.jsとは？アプリビルダーのためのやさしい入門ガイド

Next.jsは、Reactを使ってWebサイトやWebアプリを作るためのフレームワークです。Reactは、ボタン、フォーム、リストといったインターフェースの部品を提供します。Next.jsは、その周りのWebサイトの残りの部分を追加します。ページとURL、ページがすぐに読める状態で届くようにするサーバー側でのレンダリング、データの読み込み、そして同じプロジェクトの中でのバックエンドのコードの実行です。オープンソースで、開発元はVercelという会社です。Reactのサイトを作るために、もっとも広く使われている方法のひとつです。

AIでアプリを作るときにNext.jsが大切な理由

AIビルダーにアプリを説明すると、技術的な土台を選ぶ必要があります。その選択は、後であなたが気にすることに影響します。

• 検索での見つけやすさ。 Googleで順位をつけてほしい公開サイトは、実際のHTMLを送ることが有利です。Next.jsはそれをうまくやります。
• バックエンドの置き場所。 Next.jsでは、フロントエンドのページと、サーバー側のコード（「このフォームを保存する」や「決済APIを呼び出す」など）を1つのプロジェクトに置けます。
• ホスティング。 サーバー機能を持つNext.jsアプリは、動かすためのサーバーが必要です。一方、通常のViteアプリは、静的ファイルとして配信できます。

Mythexは、新しいプロジェクトを既定では Vite + React + TypeScript + Tailwind で始めます。Next.jsは、あなたが依頼したときに使います。最初のプロンプトで「Next.jsを使って」と書けば十分です（技術の選び方）。そのため、いつそれを頼む価値があるのかを知っておくと役立ちます。

身近なたとえ

Reactが高品質なレゴブロックの箱だとすると、Next.jsは、説明書、土台の板、ドアや配管のパーツがあらかじめ入っているレゴのセットのようなものです。

バラのブロックから同じ家を作ることもできます。ただしその場合は、部屋のつながり方、玄関の位置、水の通し方を自分で決める必要があります。Next.jsは、そうした決定を標準的な方法であらかじめ行ってくれます。そのため、どのNext.jsプロジェクトも似たレイアウトになり、新しい開発者（やAI）も素早く全体を把握できます。

Next.jsがReactに加えるもの

Next.jsには、ページを整理する方法が2つあります。App Router（app/フォルダー）は新しい方式で、Server Componentsに対応しています。Pages Router（pages/フォルダー）は元からある方式で、今もサポートされています。新しいプロジェクトでは一般に、App Routerを使います。AIビルダーのコードやチュートリアルが見慣れないものに見える場合、これが理由であることが多いです。

具体例：地域のカフェの公開ディレクトリ

都市のカフェを一覧にするサイトを想像してください。カフェごとにページがあり、検索結果に表示されてほしいとします。

あるカフェの1ページのNext.jsのコードは、おおむね次のようになります。

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

誰か（またはGoogle）が/cafes/blue-doorにアクセスしたときに起こることは、次のとおりです。

1. Next.jsが、そのURLを対応するファイルに結びつけます。[slug]というフォルダーは「任意のカフェ」を意味します。
2. コンポーネントがサーバー上で動き、データベースからカフェの情報を読み取り、HTMLを作ります。
3. ブラウザは、カフェの名前と住所がすでに入った完全なページを受け取ります。データを取得するJavaScriptを待つ必要はありません。

これを、クライアント側だけで動くReactアプリと比べてみてください。その場合、ブラウザはまずほぼ空のページを受け取り、次にJavaScriptをダウンロードし、次にカフェの情報を取得し、それから表示します。検索エンジンは、それでもたいてい処理できますが、完成したページのほうが確実です。AIで作ったWebサイトのSEOを参照してください。

これを、ログインの後ろにあるスタッフ専用のダッシュボードと比べてみてください。検索エンジンはそもそもそれを見られないので、サーバー側のレンダリングの利点は小さく、よりシンプルなViteのアプリのほうが適していることが多いです。

主な用語

よくある誤解

• 「Next.jsはReactに取って代わる」。 そうではありません。Next.jsはReactを使っています。コンポーネントは今もReactのコンポーネントです。
• 「Next.jsは常に良い選択」。 より高機能ですが、理解すべきことも多くなります。サーバー側のレンダリング、キャッシュ、サーバー側のコードとクライアント側のコードの違いは、混乱しやすいバグの原因になります。ログインの後ろで主に使うアプリなら、通常のReactアプリのほうがシンプルなことが多いです。
• 「Next.jsはVercelでしか動かない」。 オープンソースであり、Node.jsのサーバーならどこでも、Dockerコンテナーでも動かせます。サーバー機能を使わないなら、完全な静的エクスポートも可能です。
• 「Next.jsを使えばSEOが良くなることが保証される」。 読みやすいページを作りやすくなるだけです。順位は、タイトル、コンテンツ、速度、リンクに依存します。
• 「Next.jsのサーバー側のコードは自動的に非公開になる」。 クライアント向けに指定されたコードはブラウザに届きます。秘密情報は、サーバー側だけのコードと環境変数に置いてください。

AIビルダーに頼むこと

• 「App Routerを使ったNext.jsで作って」。本当に使いたい場合は、最初のプロンプトに書いてください。
• 「どのページがサーバーでレンダリングされ、どのページが静的で、どのページがブラウザで動くのか。それぞれの理由も教えて。」
• 「公開されているマーケティングページと一覧ページを、適切なタイトルと説明を付けて、サーバーでレンダリングするか静的にして。」
• 「APIキーはサーバー側のコードと環境変数に保存して。それぞれがどこで読み込まれているかを示して。」
• 「このアプリにはNext.jsが必要ですか、それとも作りたいものにはVite + Reactのほうがシンプルですか？」

MythexでのNext.js

Mythexは既定で Vite + React + TypeScript + Tailwind を使い、プロンプトでNext.jsを頼むと切り替えます。最初に指定すると、後から変更するよりクレジットを節約できます。ライブプレビューでアプリを確認でき、公開を押すと、ホスティングを自分で設定することなく、公開URLにデプロイされます。Mythexのドキュメントは、クライアント側でレンダリングされるシングルページアプリは、サーバー側でレンダリングされるHTMLや静的HTMLより、SEOが弱いと指摘しています。そのため、検索が重要なマーケティングサイトを作るなら、最初にそう伝えておく価値があります（アプリのSEO）。

よくある質問