Next.jsで高速Webサイトを構築！初心者向け完全ガイド（2025年版）

2025年現在、Web開発のトレンドはますます高速化とSEO最適化に向かっています。そんな中、Reactベースのフレームワークとして圧倒的な人気を誇るのがNext.jsです。Next.jsはサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に実現し、GoogleのCore Web Vitalsをクリアした高速サイトを構築できます。この記事では、Next.jsを使ってシンプルなWebサイトをゼロから作る方法を、ステップバイステップで解説します。Reactの基礎知識がある前提で進めますが、初心者でもついていけるよう工夫しています。

Vercelが開発するNext.jsは、世界中の大手企業が採用する信頼のフレームワークです。それでは、早速始めましょう！

1. 環境準備とプロジェクトのセットアップ

まず、Node.js（バージョン18以上）がインストールされていることを確認してください。公式ドキュメントによると、Next.js 15（2025年最新版）ではApp Routerがデフォルトです。

ステップ1: create-next-appでプロジェクトを作成

ターミナルを開き、以下のコマンドを実行します。これでTypeScript、ESLint、Tailwind CSSがプリセットされたプロジェクトが生成されます。

npx create-next-app@latest my-website
cd my-website

my-websiteはプロジェクト名（任意）。
プロンプトで「App Router」を選択（Pages Routerはレガシー）。

ステップ2: 開発サーバーを起動

npm run dev

ブラウザでhttp://localhost:3000にアクセスすると、Next.jsのウェルカムページが表示されます。おめでとうございます！基本セットアップ完了です。

2. 基本ページの作成とルーティング

Next.jsのApp Routerでは、appディレクトリにファイルを置くだけでルーティングが自動生成されます。ファイル名がURLパスになります。

ステップ1: ホームぺージのカスタマイズ

app/page.tsxを編集して、シンプルなホームぺージを作成。

// app/page.tsx
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">ようこそ、Next.jsサイトへ！</h1>
      <p className="mt-3 text-2xl">2025年の高速Web開発を体験しよう</p>
    </main>
  );
}

Tailwind CSSがデフォルトで使えるので、クラス名でスタイリング。保存するとホットリロードで即反映！

ステップ2: 新しいページの追加（例: Aboutページ）

app/about/page.tsxを作成。

// app/about/page.tsx
export default function About() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">About Us</h1>
      <p className="mt-3 text-2xl">Next.jsで作られたサイトです。</p>
    </main>
  );
}

これで/aboutにアクセス可能。動的ルートも簡単：app/blog/[id]/page.tsxで/blog/1のようなURLを実現。

ステップ3: ナビゲーションの追加

app/layout.tsxにリンクを追加。Next.jsのLinkコンポーネントでSPAのようなスムーズな遷移。

// app/layout.tsx（抜粋）
import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        <nav className="p-4 bg-gray-800 text-white">
          <Link href="/" className="mr-4">Home</Link>
          <Link href="/about">About</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

これでサイトの基盤が整いました。

3. データフェッチと動的コンテンツの追加

静的サイトだけでなく、APIからデータを取得してレンダリングしましょう。Next.js 15ではfetch APIが強化され、サーバーコンポーネントでシームレスに使えます。

ステップ1: サーバーサイドデータフェッチ

app/blog/page.tsxで、ダミーAPIからデータを取得（実際はJSONPlaceholderなど）。

// app/blog/page.tsx
async function getPosts() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts', {
    next: { revalidate: 60 }, // ISR: 60秒ごとに再検証
  });
  return res.json();
}

export default async function Blog() {
  const posts = await getPosts();

  return (
    <main className="p-8">
      <h1 className="text-3xl font-bold mb-4">ブログ一覧</h1>
      <ul>
        {posts.slice(0, 5).map((post: any) => (
          <li key={post.id} className="mb-2">
            <Link href={`/blog/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

next: { revalidate: 60 }でIncremental Static Regeneration（ISR）を実現。ビルド時静的生成＋動的更新。

ステップ2: クライアントサイドフェッチ（オプション）

インタラクティブな部分はuseフックやSWR/React Queryを使いますが、基本はサーバー優先で高速化。

4. スタイリングと画像最適化

Tailwind CSSの活用

デフォルトでインストール済み。globals.cssでカスタムを追加。

画像の最適化

Next.jsの<Image>コンポーネントで自動リサイズ・WebP変換。

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero Image"
  width={500}
  height={300}
  priority // LCP最適化
/>

これでCore Web Vitalsのスコアが向上します。

5. APIルートの作成（バックエンド統合）

サーバーアクションやAPIエンドポイントを簡単に。app/api/hello/route.tsを作成。

// app/api/hello/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello from Next.js API!' });
}

/api/helloにGETリクエストでJSONが返されます。認証やDB接続もここで。

6. デプロイ：Vercelで即公開

Next.jsの公式ホスティングVercelを使えば、Gitプッシュで自動デプロイ。

ステップ1: Vercel CLIインストール

npm i -g vercel

ステップ2: デプロイ

vercel

GitHub連携でCI/CDも設定可能。無料プランで十分スタートできます。

まとめ：Next.jsで未来のWebを

このガイドで、Next.jsを使って基本的なWebサイトを構築できました。App Routerのサーバーコンポーネントを活用すれば、パフォーマンスが抜群。次は認証（NextAuth.js）や状態管理（Zustand）を追加してみてください。

公式Learnコースでさらに深掘りしましょう。質問があればコメントを！Next.jsでクリエイティブに開発を。

参考：Next.js公式ドキュメント（2025年11月時点）

コア・ランゲージ・ハブ

Next.jsでWebサイトを構築する方法