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月時点）
