Go to Qiita Advent Calendar Top
LoginSignup
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@TOMOSIA-HieuNTin株式会社TOMOSIA VIET NAM

Next.js 16 の重要な新機能をまとめて紹介します（第1回）

Posted at

dc7f6823-6e8f-4287-a7e5-39de7d4d9ac0.png

🌟 はじめに

本記事では、Next.js 16の最も重要な新機能をリストアップし、分析いたします。これらの機能により、より高速で安定性が高く、保守しやすいアプリケーションを構築できるようになります。

📑 目次

💾 Next.js 16のCache Components

Next.js 16のCache Componentsは、新しいプログラミングキャッシュモデルで、Reactツリーのどの部分をキャッシュするかを能動的に決定できるようになります。これにより、以前のような予測困難な暗黙的なキャッシュ動作に依存する必要がなくなります。[1]

Cache Componentsとは？

  • Cache Componentsは、App Router内でページ、レイアウト、コンポーネント、または関数をキャッシュするために使用される"use cache"ディレクティブを中心とした機能セットです。[1]
  • Next.js Compilerは、"use cache"を配置した場所の入力（props、params、fetch dataの結果）に基づいてキャッシュキーを自動生成するため、手動でキーを管理する必要がありません。[1]

従来のキャッシュとの違い

  • 以前のApp Routerには多くのデフォルトキャッシュメカニズム（暗黙的キャッシュ）があり、デバッグや動作の予測が困難になる場合がありました。[1]
  • Next.js 16では、キャッシュはオプトイン方式になりました：デフォルトではすべてが動的（dynamic）であり、"use cache"または関連する設定を使用した場合のみ、その部分がキャッシュされ再利用されます。[1]

Partial Pre‑Rendering (PPR)との連携

  • PPRにより、同じURL上で静的（static）と動的（dynamic）を組み合わせることができます：シェル/静的部分は事前にレンダリングされ、動的部分はSuspenseを通じて後からストリーミングされます。[1]
  • Cache Componentsはこのモデルを完成させます：URLごとに静的/動的を選択するだけでなく、Reactツリー内の各ブロックをキャッシュでき、PPRを活用して速度を保ちながら、リアルタイムが必要なコンテンツ部分に柔軟性を提供できます。[1]

有効化と使用方法

next.config.tsでcacheComponents設定を使用して機能を有効化します：

const nextConfig = {
  cacheComponents: true,
};

export default nextConfig;

その後、複数のレベルで'use cache'を使用できます：

  • Page/Layout: ページ全体または変更の少ないレイアウトをキャッシュします。
  • Component: 注目記事リスト、お客様の声、顧客ロゴなどの重いブロックをキャッシュします。
  • Function: リソースを消費するfetch関数またはデータ処理関数の結果をキャッシュします。[1]

例：

// app/page.tsx
import FeaturedPosts from './FeaturedPosts';

export default async function HomePage() {
  return (
    <main>
      <Hero />
      <FeaturedPosts /> {/* このブロックはキャッシュされます */}
      <LatestPosts /> {/* 常に新しいデータを取得します */}
    </main>
  );
}

// app/FeaturedPosts.tsx
('use cache');

export default async function FeaturedPosts() {
  const posts = await getFeaturedPosts(); // 重いクエリですが、変更頻度は低い
  return <PostsGrid posts={posts} />;
}

実用例

ブログ / ニュースサイト：

  • 「注目記事」セクションは通常、重いクエリに基づいていますが、1日に数回しか変更されないため、コンポーネントをキャッシュし、revalidateTagと組み合わせて定期的に更新するのに最適です。[1]

ダッシュボード分析：

  • 多くのウィジェット（売上、トップ製品、ファネルなど）は更新頻度が異なります。重いが変更頻度の低いウィジェットには"use cache"を使用し、リアルタイムウィジェットは動的のままにすることで、ダッシュボードは高速で、ユーザー操作後のデータも正確に保たれます。[1]

Eコマース商品ページ：

  • 商品情報、説明、関連商品はキャッシュできます。在庫/価格のリアルタイム情報は直接フェッチし、後からストリーミングできるため、メインコンテンツ部分の読み込みがほぼ瞬時に感じられます。[1]

キャッシュ使用のベストプラクティス

  • Cache Componentsを「ReactツリーレベルのAPIキャッシュ」として考えてください：レイアウト、セクション、ウィジェット、fetch関数などの適切な境界に配置し、無差別に有効化しないようにします。[1]
  • revalidateTag、updateTag、refreshと組み合わせて：
    • わずかな遅延が許容されるコンテンツ（ニュース、リスト）にstale‑while‑revalidateを適用します。
    • Server Actionsを介した操作（プロフィール更新、CRUD、重要なフォーム）でread‑your‑writesを保証します。[1]

🔧 Next.js DevTools MCP

Next.js DevTools MCPは、Next.js 16のAI支援デバッグツールで、Model Context Protocol (MCP)を使用して、AIにアプリケーションの全体像を提供します。[1]

概要

Next.js 16は、Next.js DevTools MCPを統合レイヤーとして導入し、AIエージェントがNext.jsアプリケーション内のルーティング、キャッシュ、レンダリングの仕組みを理解できるようにします。[1]

このツールにより、AIはブラウザログ、サーバーログ、詳細なスタックトレース、アクセス中のルート情報にアクセスでき、手動でコピーする必要がありません。[1]

目的

  • エラー診断の高速化: AIは原因を分析するための十分なデータを持ち、貼り付けた数行のエラーメッセージに基づいて推測するだけではありません。[1]
  • アプリ内の「奇妙な動作」の説明をサポート（ナビゲーション、キャッシュ、再検証など）し、開発ワークフロー内で直接修正方法を提案します。[1]

使用タイミング

  • エラーが発生した場合: 500エラー、ハイドレーションエラー、または特定のルートでのみ発生し、再現が困難なバグ。[1]
  • パフォーマンス最適化が必要な場合: どのルートが遅いか、どの部分のレンダリングに時間がかかるか、ナビゲーションがfetch/renderによってブロックされているかどうかを知りたい場合。[1]
  • 新しい開発者のオンボーディング時: AIが「ガイド役」を務め、アプリケーション内のルーティング、キャッシュ、データフローのアーキテクチャを説明できます。[1]

使用方法（ワークフローの観点から）

Next.js DevTools MCPを有効化し、MCPをサポートするAIエージェントに接続すると、エージェントは以下にアクセスできます：ルーティング、キャッシュ、レンダリング動作、統合ログ、自動エラーアクセス、ページ認識。[1]

その後、自然な質問をすることができます：

  • 「なぜ/dashboardページの読み込みが遅いのですか？」
  • 「/posts/[id]ルートはどのタイプのキャッシュを使用していますか？いつ再検証されますか？」
  • 「/homeから/settingsへのナビゲーション中に発生したエラーを説明し、修正方法を提案してください。」[1]

AIはDevTools MCPからのデータを使用して問題を診断し、原因を説明し、具体的な変更を提案します：キャッシュ戦略の調整、コンポーネントの分離、データクエリの最適化、または関連設定の更新。[1]

簡単な例

/dashboardページに多くの分析ウィジェットがあり、最近読み込みが遅く、時々理解しにくい500エラーが返される場合を想定します。[1]

Next.js DevTools MCPを使用すると、AIはサーバーログ、ブラウザログ、スタックトレースを確認し、リクエストごとに非常に重いDBクエリを実行しているウィジェットを発見し、このウィジェットを分離し、キャッシュ（またはCache Components）を追加し、再検証戦略を調整してパフォーマンスを改善することを提案できます。[1]

⚙️ React Compiler

React Compiler – 手動の「memo」が不要な自動パフォーマンス最適化

NextJS 16は、React Compilerバージョン1.0のリリース後、React Compilerを安定してサポートするようになりました。これは、Reactが自動的にre-renderを最適化するツールで、パフォーマンス向上のために手動でReact.memo、useMemo、またはuseCallbackを使用する必要がなくなります。

React Compilerはコンポーネントのソースコードを分析し、安全に「メモ化」できる部分を特定して自動的に実行します。

👉 結果: パフォーマンスが大幅に改善され、特に多くの子コンポーネントや複雑なデータを持つアプリで効果的です。

NextJS 16でReact Compilerを有効化する方法

next.config.tsに以下の設定を追加します：

// next.config.ts

const nextConfig = {
  reactCompiler: true,
};

export default nextConfig;

必要なプラグインをインストールします：

npm install babel-plugin-react-compiler@latest

React Compiler使用前

不要な再レンダリングを避けるために、手動でメモ化する必要がありました。

import { useMemo, useCallback, memo } from 'react';

interface UserListProps {
  users: User[];
  onUserSelect: (userId: string) => void;
  searchTerm: string;
}

const UserList = memo(function UserList({ users, onUserSelect, searchTerm }: UserListProps) {
  const filteredUsers = useMemo(() => {
    return users.filter(user =>
      user.name.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [users, searchTerm]);

  const sortedUsers = useMemo(() => {
    return [...filteredUsers].sort((a, b) => a.name.localeCompare(b.name));
  }, [filteredUsers]);

  const handleUserClick = useCallback((userId: string) => {
    onUserSelect(userId);
  }, [onUserSelect]);

  return (
    <div>
      {sortedUsers.map(user => (
        <UserItem
          key={user.id}
          user={user}
          onClick={() => handleUserClick(user.id)}
        />
      ))}
    </div>
  );
});

ここでは、users、searchTerm、またはonUserSelectが変更されるたびにコンポーネントが再レンダリングされるのを防ぐために、memo、useMemo、useCallbackを使用する必要がありました。

React Compiler有効化後

この最適化ロジック全体がReactによって自動的に処理されます — コードが大幅に簡潔になります。

interface UserListProps {
  users: User[];
  onUserSelect: (userId: string) => void;
  searchTerm: string;
}

function UserList({ users, onUserSelect, searchTerm }: UserListProps) {
  const filteredUsers = users.filter(user =>
    user.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  const sortedUsers = [...filteredUsers].sort((a, b) => a.name.localeCompare(b.name));

  const handleUserClick = (userId: string) => {
    onUserSelect(userId);
  };

  return (
    <div>
      {sortedUsers.map(user => (
        <UserItem
          key={user.id}
          user={user}
          onClick={() => handleUserClick(user.id)}
        />
      ))}
    </div>
  );
}

これで、メインロジックの記述に集中できます。React Compilerが計算結果のメモ化と不要な再レンダリングの回避を処理します — 手動での介入なしで高いパフォーマンスを実現します。

参考: Next.js 16 Blog

次回のパート2では、Next.js 16のその他の重要な新機能について詳しく解説いたします。お楽しみに！

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?