Next.js 15 RCのすべて

2025年1月22日 13:21

この記事は弊社のフルスタックエンジニア：Raj Chaudharyが作成した記事です。英語版はこちらをご覧ください。
Medium

Next.js 15 Release Candidate (RC) がリリースされた。RCはRelease Candidateの略で、React 19が完全にサポートされるのを待っているため、今年中にGA（General Availability）に移行する予定だ。

Next.js 15は多くのことを達成しようとしている。キャッシングはもはや最悪ではありません。そう、キャッシュの改善だ。Hydrationエラーは改善され、開発者はNext.jsがReactを食べていると言っています。このnext.jsの初期バージョンは、来たる安定版リリースの前に最新機能をテストすることができます。

これで、すぐにコードを更新するために走る必要はなくなった。RCはRelease Candidateの略で、React 19が完全にサポートされるのを待つ間、今年後半にGAまたはGeneral Availabilityに移行することを意味する。

主な変更点

リアクト19 RC

Next.js 15 RCはReact 19 RCをサポートし、Actionsのようなクライアントとサーバーの両方の新機能が含まれています。Next.15がデフォルトでサポートしているReact 19の最も重要な機能とReactコンパイラの活用について見てみましょう。

何よりもまず、Next 15はReact 19のuseをサポートするようになりました。さらに興味深いのは、Next.jsが新しくオープンソース化されたReactコンパイラをサポートしたことで、コードが最適化され、useMemoとuseCallbackのフックがなくなりました。

そして、それは複数の理由から素晴らしいことだ。長い間開発者であったが、多くの開発者がこれらの最適化テクニックをスキップしたり、誤った使い方をしたりしているのを見るのは非常に苦痛であった。そこでReact Compilerの登場だ。コードのどの部分が変更されていなければ再チェックする必要があるのか、または必要ないのかを自動的に判断し、時間を節約することで、アプリの高速実行を助けてくれる。

babel-plugin-react-compilerをインストールします：

npm install babel-plugin-react-compiler

次に、next.config.jsにexperimental.reactCompilerオプションを追加する：

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
 
module.exports = nextConfig;

オプションとして、以下のように「opt-in」モードで実行するようにコンパイラーを設定することもできる：

// next.config.ts
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};
 
module.exports = nextConfig;

2.キャッシュ：

Next.jsアプリルーターは、デフォルトのキャッシュ機能で起動します。これらは、デフォルトで最もパフォーマンスの高いオプションを提供し、必要に応じてオプトアウトできるように設計されています。Next.jsは、グローバルなウェブAPIを変更しないことを決定しました。

Next.15以前では、Fetchを使うとその結果がキャッシュされました。これは、Next.jsがグローバルAPIを直接変更することになるため、一部の開発者を動揺させました。しかし、その混乱を見て、修正されました。ルートハンドラに似ています。

デフォルトでは、APIルートの取得はキャッシュされていた。なぜ同じ結果が何度も出てくるのかと。役に立ちたかったのですが、裏目に出てしまいました。そこでありがたいことに、Next.jsは私たちの声に耳を傾けてくれました。Next 15からは、フェッチルートハンドラとリンクを使ったクライアントナビゲーションで、自動的に結果がキャッシュされることはなくなりました。しかし、何かをキャッシュしたい場合は、フラグを渡すだけでキャッシュできるようになります。

fetch('https://...', { cache: 'force-cache' | 'no-store' });

no-store - リクエストごとにリモートサーバーからリソースを取得し、キャッシュを更新しない。
force-cache - キャッシュ（存在する場合）またはリモートサーバーからリソースを取得し、キャッシュを更新します。

Next.js 14では、キャッシュオプションが提供されていない場合、動的関数または動的設定オプションが使用されていない限り、デフォルトでforce-cacheが使用されていました。

Next.js 15では、キャッシュオプションが提供されない場合、デフォルトでno-storeが使用されます。つまり、フェッチリクエストはデフォルトではキャッシュされません。

3. 部分的なプリレンダリング（実験的）：

デフォルトでは、Next.jsはSSGレンダリング戦略を実行します。他の2つを使用するには、そのページにフラグを指定するだけで、すぐに切り替えることができます。しかし、1つだけを選択する必要があります。

export const revalidate = 0 // SSR

export const revalidate = 1200 // ISR

今なら、まったく別のことができる。ページの一部分をSSGにし、他の部分をSSRまたはISRにすることで、両方の長所を組み合わせることができる。この新しいアプローチは、PPR（Partial Pre-rendering）と呼ばれています。

例えば図の場合、ページを更新すると、カートやおすすめ商品のような動的コンテンツは更新のたびに更新されるが、ナビバーのような他の静的または無効な部分は静的なままである。

PPRを使えば、動的なUIをSuspensionバウンダリでラップすることができます。新しいリクエストが来ると、Next.jsはすぐに静的なHTMLシェルを提供し、同じHTTPリクエストで動的な部分をレンダリングしてストリームします。

// app/page.jsx

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"
 
export const experimental_ppr = true
 
export default function Page() {
  return {
     <>
      <StaticComponent />
      <Suspense fallback={...}>
       <DynamicComponent />
      </Suspense>
     </>
  };
}

この新しいオプションを使うには、next.config.jsファイルのexperimental.pprコンフィグを「インクリメンタル」に設定する必要がある：

// next.config.ts
const nextConfig = {ty
  experimental: {
    ppr: 'incremental',
  },
};
 
module.exports = nextConfig;

すべてのセグメントでPPRが有効になったら、ppr値をtrueに設定し、アプリ全体と将来のすべてのルートで有効にするのが安全だと考えられます。

4. next/after（実験的）：

next/afterは、Next.jsが導入したもうひとつのクールな機能だ。ちょっとわかりにくい名前だが、意味はある。ブラウザがウェブサイトのコードを要求すると、サーバーはそれをあなたに送り返すためにいろいろなことをする。しかし、多くの場合、ウェブサイトと並行して、サーバーはさらにいろいろなことをする必要があります。

サーバーが余計なことをするからといって、長く待つ必要はない。だから次に、サーバーにまず重要なことをすべてやらせてから、あなたを待たせることなく余分なタスクを処理させる。

あなたがこれを使用する場所の実際の例は、YouTubeのビューです。YouTubeは最初にあなたのリクエストを処理し、このビデオをあなたに送信することができます。あなたがそれを見ている間、YouTubeは再生カウンターを増やし、あなたの好みをアルゴリズムに送り、アナリティクスを更新することができます。これがNextAfterの使い方です。

afterを使用するには、next.config.jsにexperimental.afterを追加する：

// next.config.ts
const nextConfig = {
  experimental: {
    after: true,
  },
};
 
module.exports = nextConfig;

次に、Server Components、Server Actions、Route Handlers、または Middleware で関数をインポートします。

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });
 
  // Primary task
  return <>{children}</>;
}

結論

ネクスト15を使うには、最新版ではなく、npx create-next-app@rcを実行する必要がある。

通常のインストールに関する質問の他に、Turboについても尋ねられます。TurboPackは、ウェブ開発者のための超整理された高速バンドルです。WebpackがWebサイトのすべてのファイルとアセットをバンドルするように、TurboPackも同じことを行いますが、より高速でスムーズです。v15から、Next.jsはWebpackの代わりに開発モードのプライマリバンドラーとして採用し始め、開発プロセスのスピードアップを目指します。

協業開発及び開発パートナーをお探しのお客様へ

弊社は、ネパールに海外拠点を持ち、生成AI、モバイルアプリ、システム開発を中心に事業を展開する企業です。
自社サービスの開発経験を活かし、クライアント様と共に事業を創造することを重視し、創業以来、スタートアップから中小企業、大手企業、自治体まで、幅広い開発実績があります。プロダクトはユーザーが使いやすいように設計しており、企画から開発、保守運用まで対応しています。開発技術を厳選し限定することで、セキュリティ、プロダクトの品質向上に努めており、事業開発に関する課題を深く理解し、最適なご提案が可能です
お問い合わせはこちらから：
お問い合わせフォーム：https://readytowork.jp/

直通番号：080-8940-7169