【2026年版】Next.jsの始め方 — Reactフレームワークの第一歩を完全ガイド

ReactはUI部品を作るためのライブラリだけど、Next.jsはその上にルーティング、サーバーサイドレンダリング、APIサーバー機能なんかを全部まとめて載せたフレームワークだよ。素のReactだと自分でルーターやビルド設定を組まなきゃいけないけど、Next.jsなら最初から全部揃ってるんだ。

ターミナルで「npx create-next-app@latest my-app」を実行するだけだよ。TypeScriptを使うか、ESLintを入れるかなどを対話形式で聞かれるから、答えていけばプロジェクトの雛形ができあがる。2026年現在はApp Routerがデフォルトで、appフォルダの中にページを配置していく構成になっているよ。

appフォルダの中にフォルダを作ると、それがそのままURLのパスになるんだ。たとえばapp/about/page.tsxを作れば「/about」でアクセスできる。page.tsxがそのルートの画面本体で、layout.tsxが共通のヘッダーやサイドバーを包むラッパーになるよ。この2つのファイルがApp Routerの基本だね。

Next.jsのApp Routerでは、デフォルトで全部Server Componentになっていて、サーバー側でHTMLに変換されてからブラウザに届くんだ。ボタンのクリックやフォーム入力みたいにブラウザ側で動かしたい部分だけ、ファイルの先頭に「"use client"」と書いてClient Componentにする。こうすることでJavaScriptの転送量が減って、ページの表示が速くなるよ。

Server Componentの中で直接awaitを使ってfetchを呼べるのがNext.jsの便利なところだよ。fetchのキャッシュオプションを「force-cache」にすればビルド時に生成するSSG相当、「no-store」にすればリクエストごとに取得するSSR相当になる。用途に応じて1ページの中でもコンポーネント単位で使い分けられるんだ。

app/api/フォルダの中にroute.tsを作ると、バックエンドのAPIエンドポイントが作れるよ。たとえばapp/api/hello/route.tsにGET関数をexportすれば、「/api/hello」にアクセスしたときにJSONを返せる。フロントエンドとバックエンドを1つのプロジェクトで管理できるのが大きなメリットだね。

一番簡単なのはVercelにデプロイする方法だよ。GitHubリポジトリを連携するだけで、pushするたびに自動ビルド・デプロイしてくれる。Next.jsの開発元が運営しているサービスだから相性も抜群だね。自前のサーバーで動かしたい場合は「next build」してから「next start」でNode.jsサーバーとして起動できるし、「output standalone」オプションを設定すればDockerコンテナにも載せやすいよ。

ISR（Incremental Static Regeneration）は、一度静的生成したページをバックグラウンドで定期的に再生成する仕組みだよ。fetchのrevalidateオプションに秒数を指定するだけで使える。ミドルウェアはリクエストがページに届く前に処理を挟む機能で、認証チェックやリダイレクト、地域ごとの出し分けなんかに使うんだ。Edge Runtimeで動くからレスポンスがとても速いよ。

Server Actionsはフォーム送信などのデータ変更をサーバー側で直接処理できる機能だよ。関数の先頭に「"use server"」と書くだけで、クライアントからその関数を呼ぶとサーバーで実行される。従来はAPI Routeを別途作ってfetchで叩く必要があったけど、Server Actionsなら1つのファイルにUIとサーバー処理をまとめて書けるんだ。

まずはcreate-next-appでプロジェクトを作って、App Routerでページを2〜3個作ってみること。次にServer ComponentとClient Componentの使い分けを体験して、fetchでデータ取得を試す。そこからAPI RouteやServer Actionsに進んで、最後にVercelにデプロイしてみるといいよ。公式ドキュメントのLearnコースが無料でステップバイステップに学べるから、最初の教材としてはベストだね。