Next.js とは？初心者向けガイド

SaaSにNext.jsが向く理由（routing、SSR/SSG、API routes）を1つのリポジトリで理解できる初心者向けガイド。

Next.js とは（やさしく説明）

Next.js は React と Node.js 上に構築されたフレームワークで、モダンなWebアプリを効率よく作れます（overview）。フロントエンドのページ、バックエンドのエンドポイント、SSR/SSG などを1つのリポジトリで扱えるため、SaaSに向いています（why developers use Next.js）。

Next.js が最初から提供するもの

ファイルベースルーティング

ファイル構成がそのままURLになります（file-based routing）。
例: pages/about.js は /about。

Server-Side Rendering (SSR)

リクエストごとにサーバーでHTMLを生成できます（SSR basics）。
初回表示が速く、SEOにも有利。React がクライアントでハイドレーションします。

Static Site Generation (SSG)

ビルド時に静的HTMLを生成できます（SSG）。
変更頻度が低いマーケ/ドキュメントに最適。

API Routes

バックエンドのエンドポイントを同じリポジトリに置けます（API routes）。
小規模なら別サーバー不要。

自動コード分割と最適化

ページごとに必要なJS/CSSだけを配信（optimizations）。
minify、tree‑shaking、画像最適化も標準搭載。

ほぼ設定不要のDX

TypeScript、CSS、Sassを標準サポート。
セットアップではなくプロダクトに集中できます（DX overview）。

ルーティングとレイアウト

Next.js はフォルダ/ファイルをURLに自動変換します。pages/user/settings/notifications.js は /user/settings/notifications になります。動的ルートも同様で、pages/posts/[id].js は /posts/123 のように動きます。

さらに、レイアウトの再利用が簡単です。App Router では app/dashboard/layout.js のようにフォルダ単位でレイアウトを定義でき、/dashboard/* のページが共有します（nested layouts）。マーケサイトとログイン後ダッシュボードを分けたいSaaSにぴったりです。

Server Components と Client Components（簡単に）

Next.js（特に13+）はコンポーネントの実行場所を分けます。

Server Components

サーバーでHTMLを生成して送ります。
クライアント側にJSが送られません（server vs client components）。
速さとセキュアなデータ表示に強い。

Client Components

ブラウザで動き、インタラクションを担当。
ファイル先頭に "use client" が必要（client components）。
クリック、フォーム、チャート、アニメーションなどに必須。

実際は両方を組み合わせます。構造やデータはServer、動きはClientという分担で、速度とUXを両立できます。

API Routes: 同じリポジトリにバックエンド

Next.js ではUIの隣にAPIを置けます。pages/api/（Pages Router）や app/api/（App Router）配下のファイルはHTTPエンドポイントになります。例:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ greeting: "Hello from Next API" });
}

/api/hello にアクセスするとサーバーで実行され、JSONを返します。Vercel ではこれがサーバーレス関数になります。pages/api のコードはブラウザに送られません（API routes are server-only）ので、秘密情報やDB接続も安全です。

簡単な確認: pnpm dev を実行し、api/health を作って http://localhost:3000/api/health を開いてみましょう。{ "status": "ok" } が出れば、フロントとバックが同じアプリで動いています。

この手軽さが、単一のNext.jsリポジトリから始める理由です。UIとAPIの同期、CORS不要、型共有。必要になれば後から専用バックエンドを追加してもOKです。

Tradeoffs: Next.jsが不要な場合

Next.jsは強力ですが、必須ではありません。

超シンプルなサイト: 静的LPだけならHTMLやViteが軽い場合もあります。小規模だとオーバーに感じることも（is it overkill?）。
すでにバックエンドがある: SSR/SEOが不要なら軽量なReact構成でも十分。ただしNext.jsの規約が好きなら使ってもOK。
特殊なバックエンド: 重い処理やマイクロサービス、複数フロントから同一APIを叩く場合は、別バックエンド＋Next.js UIが良いことも（separate backend?）。

それでも多くのSaaSはNext.jsだけで始め、成長できます。例えば sushi-templates.com はNext.jsで全体を構築しています。必要になった時だけ外部サービスを追加できるのが強みです（why it’s a game-changer）。

まとめと次の一歩

Next.jsは初心者にも扱いやすく、同時に強力です。ルーティング、レンダリング、APIを1つのコードベースで扱えるので、プロダクト作りに集中できます。

試してみるなら:

npx create-next-app@latest かテンプレートで作成。
pnpm dev を実行。
api/health を追加して http://localhost:3000/api/health を開く。

その後は、ファイルベースルーティングでページを増やし、Server Componentsで高速レンダリング、Client Componentsでインタラクションを追加していきましょう。

参考リンク

Contentful Blog – Next.js vs React: https://www.contentful.com/blog/next-js-vs-react/
Dev.to – Next.js overview and tradeoffs: https://dev.to/hamzakhan/why-nextjs-is-an-all-time-game-changer-for-web-development-a-technical-perspective-1bgf
Reddit r/nextjs discussion (features): https://www.reddit.com/r/nextjs/comments/v01uy1/why_should_i_use_next_other_than_ssr/
Stack Overflow – Next vs separate backend: https://stackoverflow.com/questions/78349307/ssr-and-api-layer-in-nextjs
LogRocket – Next.js layouts: https://blog.logrocket.com/guide-next-js-layouts-nested-layouts/
Dev.to – Server vs client components: https://dev.to/oskarinmix/server-components-vs-client-components-in-nextjs-differences-pros-and-cons-389f

Next.js とは？初心者向けガイド

On this page