Next.jsはReactベースのフルスタックWebフレームワークとして、2026年現在も最も人気のあるJavaScriptフレームワークの一つです。本記事ではNext.js 15の最新機能を中心に、App Router・Server Components・Server Actionsの実践的な使い方を解説します。
Next.js 15の主要新機能
- React 19対応：最新のReact機能が利用可能
- Turbopack安定版：高速なバンドラーが本番利用可能に
- 強化されたキャッシング：より細かいキャッシュ制御
- 部分的プリレンダリング（PPR）：静的・動的コンテンツの混在
App Routerの基礎
Next.js 13から導入されたApp Routerは、ファイルシステムベースのルーティングをさらに進化させました。app/ディレクトリ内のファイル構造がそのままURLになります。
app/
├── layout.tsx # 全ページ共通レイアウト
├── page.tsx # / のページ
├── blog/
│ ├── page.tsx # /blog のページ
│ └── [slug]/
│ └── page.tsx # /blog/:slug の動的ページ
└── api/
└── posts/
└── route.ts # /api/posts のAPIエンドポイントServer ComponentsとClient Componentsの使い分け
App Routerの最大の特徴は、デフォルトで全コンポーネントがServer Componentsになることです。これにより、データフェッチをサーバー側で行い、クライアントへのJavaScriptバンドルを削減できます。
| 種類 | 特徴 | 用途 |
|---|---|---|
| Server Components | サーバーで実行、JSバンドルなし | データフェッチ、SEOコンテンツ |
| Client Components | クライアントで実行、インタラクティブ | ユーザー操作、リアルタイム更新 |
// Server Component (デフォルト) - データを直接fetchできる
async function BlogList() {
const posts = await fetch("https://api.example.com/posts").then(r => r.json());
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
// Client Component - インタラクティブな処理
"use client";
import { useState } from "react";
export function SearchBox() {
const [query, setQuery] = useState("");
return <input value={query} onChange={e => setQuery(e.target.value)} />;
}Server Actionsで簡単フォーム処理
Server Actionsは、クライアントからサーバー側の関数を直接呼び出せる機能です。APIエンドポイントを別途作成せずに、フォーム送信やデータ変更処理が書けます。
// app/actions.ts
"use server";
import { revalidatePath } from "next/cache";
export async function createPost(formData: FormData) {
const title = formData.get("title") as string;
const content = formData.get("content") as string;
// データベースに保存
await db.post.create({ data: { title, content } });
// キャッシュを無効化してページを更新
revalidatePath("/blog");
}
// app/blog/new/page.tsx
import { createPost } from "@/app/actions";
export default function NewPostPage() {
return (
<form action={createPost}>
<input name="title" placeholder="タイトル" />
<textarea name="content" placeholder="内容" />
<button type="submit">投稿する</button>
</form>
);
}Next.jsのSEO最適化
Next.jsはSEOに優れたフレームワークです。Metadata APIを使って各ページのSEO設定を動的に生成できます。
// app/blog/[slug]/page.tsx
import type { Metadata } from "next";
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [{ url: post.coverImage }],
},
twitter: {
card: "summary_large_image",
},
};
}まとめ
Next.js 15は、App Router・Server Components・Server Actionsの成熟により、フルスタック開発がより簡単かつ高性能になっています。フロントエンドエンジニアはもちろん、バックエンドエンジニアもNext.jsをマスターすることで、フルスタックエンジニアとして市場価値を大きく高められます。