// サーバーコンポーネント (デフォルト)
function MyComponent() {
  return (
    

      
Hello from Server!
    
  );
}

// クライアントコンポーネント
'use client';
function MyClientComponent() {
  const [count, setCount] = React.useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}

// app/products/page.js
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    cache: 'no-store', // または 'force-cache', 'no-store'
  });

  if (!res.ok) {
    throw new Error('Failed to fetch products');
  }

  return res.json();
}

async function ProductsPage() {
  const products = await getProducts();

  return (
    

      
Products
      

        {products.map((product) => (
          
{product.name}
        ))}
      
    
  );
}

export default ProductsPage;

// app/api/hello/route.js
export async function GET(request) {
  return new Response('Hello, world!');
}

Next.js 15 最新機能解説完全マスターガイド【2025年最新版】


2025年6月
読了時間: 約10分



目次

はじめに
新しいApp Routerの進化
サーバーコンポーネントがデフォルト
Turbo Mode：高速な初期表示
データフェッチの改善
Route Handlersの強化
楽観的な更新
エラーハンドリングの改善
パフォーマンスの最適化
この記事のポイント
今すぐ実践できること




Next.jsは、ReactベースのWebアプリケーション開発を効率化する強力なフレームワークです。しかし、Webアプリケーションの複雑化やユーザーの要求の多様化に対応するため、Next.jsは常に進化を続けています。Next.js 15は、開発者の生産性を向上させ、より高速でインタラクティブなWebアプリケーションを構築するための革新的な機能を提供します。本記事では、Next.js 15の主要な新機能と、それらを活用するための実践的なコード例を解説します。React開発者の方も、Next.js初心者の方も、このガイドを読めばNext.js 15を最大限に活用できるでしょう。




新しいApp Routerの進化
Next.js 15では、`app`ディレクトリをベースとした新しいルーティングシステム（App Router）が大きく進化しました。従来の`pages`ディレクトリベースのルーティングは非推奨となり、`app`ディレクトリが主要なルーティングの場所となります。App Routerは、サーバーコンポーネントをデフォルトでサポートし、より柔軟なUI構築を可能にします。

App Routerでは、UIコンポーネントとデータフェッチをより密接に結合できます。`app`ディレクトリ内のフォルダは自動的にルートに対応し、`layout.js`ファイルはレイアウトを定義します。




サーバーコンポーネントがデフォルト
Next.js 15で最も重要な変更点の一つが、サーバーコンポーネントがデフォルトで有効になったことです。これにより、クライアントサイドでのJavaScriptの量を大幅に削減し、初期表示速度の向上、セキュリティの強化、そして開発の簡素化を実現できます。サーバーコンポーネントは、サーバー上でレンダリングされるため、ブラウザでの処理が不要になり、パフォーマンスが向上します。

クライアントコンポーネントを作成するには、ファイル名の先頭に`use client`ディレクティブを追加します。これにより、コンポーネントがクライアント上で実行されるようになります。


// サーバーコンポーネント (デフォルト)
function MyComponent() {
  return (
    

      
Hello from Server!
    
  );
}

// クライアントコンポーネント
'use client';
function MyClientComponent() {
  const [count, setCount] = React.useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
}



Turbo Mode：高速な初期表示
Next.js 15に導入されたTurbo Modeは、サーバーサイドレンダリング（SSR）のパフォーマンスをさらに向上させます。Turbo Modeは、初期HTMLをサーバーで生成し、クライアントサイドでJavaScriptを最小限に抑えることで、初期表示速度を大幅に改善します。これは、特にモバイルデバイスや低速なネットワーク環境で効果を発揮します。


データフェッチの改善
Next.js 15では、データフェッチの方法が大幅に改善されました。`fetch` APIの統合により、サーバーコンポーネント内で直接データフェッチが可能になりました。また、`cache`オプションを使用して、データのキャッシュを簡単に制御できます。

// app/products/page.js
async function getProducts() {
  const res = await fetch('https://api.example.com/products', {
    cache: 'no-store', // または 'force-cache', 'no-store'
  });

  if (!res.ok) {
    throw new Error('Failed to fetch products');
  }

  return res.json();
}

async function ProductsPage() {
  const products = await getProducts();

  return (
    

      
Products
      

        {products.map((product) => (
          
{product.name}
        ))}
      
    
  );
}

export default ProductsPage;



Route Handlersの強化
Route Handlersは、APIエンドポイントを簡単に作成するための新しい機能です。Route Handlersを使用すると、サーバーサイドで実行されるAPIエンドポイントを作成できます。これにより、バックエンドのロジックをNext.jsアプリケーションに直接統合できます。

// app/api/hello/route.js
export async function GET(request) {
  return new Response('Hello, world!');
}



楽観的な更新
楽観的な更新は、ユーザーインターフェースを即座に更新し、バックエンドへのリクエストの成功を前提とした更新を行う技術です。これにより、ユーザーエクスペリエンスが向上し、アプリケーションの応答性が高まります。エラーハンドリングと組み合わせることで、より堅牢なアプリケーションを構築できます。


エラーハンドリングの改善
Next.js 15では、エラーハンドリングが大幅に改善されました。`error.js`ファイルを使用することで、ルートごとのエラーページを簡単に作成できます。また、グローバルなエラーハンドリングもサポートされています。


パフォーマンスの最適化
Next.js 15は、パフォーマンス最適化のためのさまざまな機能を提供します。サーバーコンポーネントの利用、画像の最適化、コード分割など、さまざまな手法を組み合わせて、アプリケーションのパフォーマンスを最大限に高めることができます。




この記事のポイント

Next.js 15は、App Router、サーバーコンポーネントのデフォルト化、Turbo Modeなど、多くの新機能を導入しました。
サーバーコンポーネントを活用することで、クライアントサイドJavaScriptの量を削減し、パフォーマンスを向上させることができます。
Route Handlersを使用することで、APIエンドポイントを簡単に作成できます。
エラーハンドリングを適切に行うことで、アプリケーションの信頼性を高めることができます。



今すぐ実践できること

新しいNext.jsプロジェクトを作成し、App Routerを使用してみましょう。
既存のプロジェクトで、サーバーコンポーネントを導入してみましょう。
Route Handlersを使用して、APIエンドポイントを作成してみましょう。
パフォーマンスを測定し、ボトルネックを特定して最適化してみましょう。