Next.js 15の新機能と変更点

Next.js 15は2025年にリリースされ、2026年現在のWebフロントエンド開発のデファクトスタンダードとなっています。App Routerの安定化、Turbopackのデフォルト採用、そして強化されたServer Actionsにより、フルスタック開発の体験が大幅に向上しました。

Next.js 15の主な新機能

• Turbopack（デフォルト）：Webpackの最大700倍高速なビルドツール
• React 19対応：Actionsやuse()フックの完全サポート
• 強化されたキャッシング：より細かいキャッシュ制御
• Partial Prerendering（PPR）安定版：静的・動的コンテンツの最適配信

プロジェクトの作成と基本構成

# Next.js 15プロジェクトの作成
npx create-next-app@latest my-app --typescript --tailwind --app

cd my-app
npm run dev

App Routerを使ったディレクトリ構成は以下の通りです：

my-app/
├── app/
│   ├── layout.tsx      # ルートレイアウト
│   ├── page.tsx        # ホームページ
│   ├── globals.css
│   └── blog/
│       ├── page.tsx    # /blog
│       └── [slug]/
│           └── page.tsx # /blog/[slug]
├── components/
├── lib/
└── public/

Server ComponentsとClient Components

Next.js App Routerでは、コンポーネントはデフォルトでServer Componentsとして動作します。データベースアクセスや重い処理はサーバー側で実行され、クライアントへはHTMLのみ送信されます。

// app/blog/page.tsx - Server Component（デフォルト）
import { getPosts } from '@/lib/posts'

export default async function BlogPage() {
  const posts = await getPosts() // サーバーで実行

  return (
    

      
ブログ一覧
      {posts.map(post => (
        

          
{post.title}
          
{post.excerpt}
        
      ))}
    
  )
}

// components/LikeButton.tsx - Client Component
'use client'
import { useState } from 'react'

export function LikeButton({ postId }: { postId: number }) {
  const [liked, setLiked] = useState(false)
  return (
     setLiked(!liked)}>
      {liked ? '❤️ いいね済み' : '🤍 いいね'}
    
  )
}

Server Actions｜フォーム処理の革命

Server Actionsを使えば、APIルートを作成せずにサーバー側の処理を直接呼び出せます。フォーム送信・データ更新が劇的にシンプルになります。

// app/contact/actions.ts
'use server'

import { z } from 'zod'

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  message: z.string().min(10)
})

export async function submitContact(formData: FormData) {
  const data = schema.parse({
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message')
  })

  // DBに保存・メール送信など
  await saveToDatabase(data)
  return { success: true }
}

// app/contact/page.tsx
import { submitContact } from './actions'

export default function ContactPage() {
  return (
    

      
      
      
      送信
    
  )
}

SEO最適化とMetadata API

Next.js 15のMetadata APIを使えば、SEO対策が非常に簡単になります。

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata({ params }): Promise {
  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',
      title: post.title
    }
  }
}

デプロイ｜VercelとXserver VPS

Next.jsのデプロイ先としてはVercel（開発元・無料プランあり）が最もシンプルです。GitHubと連携するだけで自動デプロイが実現します。本番環境ではXserver VPS上でDockerコンテナとして動作させる方法も人気です。

まとめ

Next.js 15はApp RouterとServer Componentsにより、フルスタック開発のパラダイムを大きく変えました。Reactの知識があれば比較的スムーズに習得できます。まずは小さなプロジェクトで試してみることをおすすめします。