Next.jsとは？Reactとの違いを徹底解説
Next.jsは、Vercelが開発したReactベースのフルスタックフレームワークです。2026年現在、フロントエンド開発の標準として多くの企業に採用されています。本記事では、Next.js 15の新機能から実践的な開発手法まで解説します。
Next.js 15の主要新機能
- React Server Components（RSC）の完全サポート
- Partial Prerendering（PPR）による高速化
- App Routerの安定化と最適化
- Turbopackによるビルド速度の大幅向上
- Server Actionsでフォーム処理がシンプルに
プロジェクトのセットアップ
# Next.js 15プロジェクトの作成
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
# プロジェクト構成
my-app/
├── app/
│ ├── layout.tsx # ルートレイアウト
│ ├── page.tsx # トップページ
│ └── blog/
│ ├── page.tsx # ブログ一覧
│ └── [slug]/
│ └── page.tsx # 記事詳細
├── components/ # 共通コンポーネント
├── lib/ # ユーティリティ
└── public/ # 静的ファイルApp Routerの基本的な使い方
// app/blog/[slug]/page.tsx
// Server Componentとして動作（デフォルト）
import { notFound } from 'next/navigation';
import type { Metadata } from 'next';
// 動的メタデータ生成（SEOに最適）
export async function generateMetadata(
{ params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
const { slug } = await params;
const post = await getPost(slug);
if (!post) return { title: 'Not Found' };
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.ogImage],
},
};
}
// 静的パラメータ生成（SSG）
export async function generateStaticParams() {
const posts = await getAllPosts();
return posts.map(post => ({ slug: post.slug }));
}
// ページコンポーネント
export default async function BlogPost(
{ params }: { params: Promise<{ slug: string }> }
) {
const { slug } = await params;
const post = await getPost(slug);
if (!post) notFound();
return (
<article className="max-w-3xl mx-auto px-4 py-8">
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
);
}Server Actionsでフォーム処理を簡略化
// app/contact/page.tsx
'use server';
async function submitContact(formData: FormData) {
'use server';
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const message = formData.get('message') as string;
// バリデーション
if (!name || !email || !message) {
throw new Error('すべてのフィールドを入力してください');
}
// メール送信処理（Resend等のサービスを利用）
await sendEmail({ name, email, message });
return { success: true };
}
export default function ContactForm() {
return (
<form action={submitContact} className="space-y-4">
<input name="name" placeholder="お名前" required />
<input name="email" type="email" placeholder="メールアドレス" required />
<textarea name="message" placeholder="メッセージ" required />
<button type="submit">送信</button>
</form>
);
}Next.jsでのSEO最適化テクニック
Next.jsはSEOに非常に優れたフレームワークです。以下のテクニックを使って検索エンジンへの最適化を行いましょう。
- メタデータAPI：generateMetadata関数で動的にOGP・メタタグを生成
- sitemap.ts：自動サイトマップ生成でクロール効率アップ
- robots.ts：クローラーの制御
- Structured Data（構造化データ）：JSONLDでリッチスニペット表示
- 画像最適化：next/imageでCore Web Vitals改善
Vercelへのデプロイ方法
# Vercel CLIのインストール
npm install -g vercel
# デプロイ（GitHubリポジトリと連携推奨）
vercel
# 本番環境へのデプロイ
vercel --prodVercelは、Next.jsの開発元であるため、最高の互換性とパフォーマンスを提供します。自動スケーリング・グローバルCDN・ゼロダウンタイムデプロイが標準で利用できます。
まとめ
Next.js 15は、現代のWebアプリケーション開発に必要な機能をすべて備えたフレームワークです。SSR・SSG・ISR・Server Componentsを適切に使い分け、パフォーマンスとユーザー体験を最大化しましょう。フロントエンドエンジニアとして市場価値を高めたい方に、Next.jsの習得は必須といえます。