Next.jsとは？React開発者が学ぶべき理由
Next.jsはVercel社が開発したReactベースのフルスタックWebフレームワークです。2026年現在、Next.js 15がリリースされており、Server Components・App Router・Server Actions・Turbopackなど、Reactエコシステムの最先端機能が揃っています。
Next.jsを使うことで、SEO対策・パフォーマンス最適化・フルスタック開発が一つのフレームワークで完結します。現在、多くの企業がNext.jsを採用しており、エンジニアとしての市場価値向上にも直結します。
Next.js 15のセットアップ
# Next.jsプロジェクトの作成（推奨: create-next-app）
npx create-next-app@latest my-next-app
# 対話式設定
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias (@/*)? … No
cd my-next-app
npm run devApp Router の基本構造
my-next-app/
├── src/
│ └── app/
│ ├── layout.tsx # ルートレイアウト
│ ├── page.tsx # ホームページ（/）
│ ├── about/
│ │ └── page.tsx # Aboutページ（/about）
│ ├── blog/
│ │ ├── page.tsx # ブログ一覧（/blog）
│ │ └── [slug]/
│ │ └── page.tsx # 記事詳細（/blog/[slug]）
│ └── api/
│ └── posts/
│ └── route.ts # APIルート（/api/posts）
├── public/
└── next.config.tsServer Components と Client Components
Next.jsのApp Routerでは、デフォルトで全コンポーネントがServer Componentsになります。インタラクティブな機能が必要な場合のみ、ファイルの先頭に'use client'を追加してClient Componentにします。
// Server Component（デフォルト）
// src/app/blog/page.tsx
import { getPosts } from '@/lib/api';
export default async function BlogPage() {
// サーバーサイドでデータフェッチ（高速・SEO最適）
const posts = await getPosts();
return (
<main>
<h1>ブログ</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>
<a href={`/blog/${post.slug}`}>{post.title}</a>
</li>
))}
</ul>
</main>
);
}// Client Component（インタラクティブが必要な場合）
'use client';
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}メタデータの設定（SEO最適化）
// src/app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
title: {
default: 'Tech Blog',
template: '%s | Tech Blog',
},
description: 'エンジニア向けの技術情報ブログです。',
openGraph: {
title: 'Tech Blog',
description: 'エンジニア向けの技術情報ブログです。',
url: 'https://example.com',
siteName: 'Tech Blog',
locale: 'ja_JP',
type: 'website',
},
robots: {
index: true,
follow: true,
},
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="ja">
<body>{children}</body>
</html>
);
}Server Actions でフォーム処理
// src/app/contact/actions.ts
'use server';
export async function submitContactForm(formData: FormData) {
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) {
return { error: '全ての項目を入力してください' };
}
// メール送信やDB保存の処理
await sendEmail({ name, email, message });
return { success: 'メッセージを送信しました' };
}まとめ
Next.js 15はReact開発者にとって必須のフレームワークです。App Router・Server Components・Server Actionsを習得することで、高パフォーマンスでSEOに強いWebアプリケーションを効率的に開発できます。