Next.js 13.1 | Next.js

Next.js 13.1 には、pages/（安定版）と app/（ベータ版）の両方のディレクトリの改善が含まれています。

app ディレクトリ（ベータ版）の改善： 信頼性とパフォーマンスの向上。
組み込みモジュール変換： next-transpile-modules の機能をコアに統合。
Edge Runtime（安定版）： Edge 用の軽量 Node.js ランタイム。
Turbopack のアップデート： Tailwind CSS、next/image、@next/font などに対応。
Middleware の改善： レスポンスの返却とリクエストヘッダーの設定が可能に。
SWC のインポート解決： バレルファイル使用時の JavaScript バンドルサイズの縮小。
メモリ使用量の改善、新しいテンプレートなど！

本日、実行してアップデートしてください

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

`app` ディレクトリの信頼性とサポートの向上

Next.js 13 では、新しい app ディレクトリ（ベータ版）を発表しました。この新しいルーティングおよびデータ取得システムは、既存の pages ディレクトリと並行して段階的に採用できます。

app ディレクトリは、レイアウトの強化、コンポーネント、テスト、スタイルの共置、コンポーネントレベルでのデータ取得など、多くの利点を提供します。皆様からのフィードバックと早期テストのおかげで、app ディレクトリの信頼性に関していくつかの改善が行われました。

レイアウトの <div> が不要に： 以前は、app ディレクトリでレイアウトをスクロール表示する際に、追加の <div> 要素が作成されていました。13.1 では、これらの追加要素は作成されなくなりました。スクロールの動作は維持されます。
TypeScript プラグイン： 新しい TypeScript プラグインを構築しました。これにより、ページやレイアウトの設定オプションの候補が表示され、ドキュメントが IDE に直接表示され、Server Components と Client Components に関する便利な使用方法のヒント（Server Components での useState の使用禁止など）が得られます。詳細はこちら。
信頼性の向上： CSS Modules のサポート改善、レイアウトとページでの cache() および fetch() の重複排除、メモリリークなど、多数のバグを修正しました。
クライアントサイド JavaScript の削減： app ディレクトリは、pages ディレクトリよりも 9.3kB 少ないクライアントサイド JavaScript を含んでいます。このベースラインは、アプリケーションに 1 つまたは 1000 の Server Components を追加しても増加しません。React ランタイムは一時的にわずかに大きくなりますが、これは React Server Components ランタイムによるもので、Next.js が以前処理していたメカニズムを処理します。この量をさらに削減するよう取り組んでいます。

	`pages/`	`app/`	差分
合計初回ロード JS	`ベースライン`	`-9.3kB`	`12.1%` 小さい
Next.js ランタイム	`ベースライン`	`-12kB`	`56.8%` 小さい
React ランタイム	`ベースライン`	`+2.7kB`	`5.2%` 大きい

app ディレクトリの安定性向上に継続的に取り組んでいくことを楽しみにしています。app ディレクトリのベータ版ドキュメントは、皆様からのフィードバックに基づき数百件の更新が行われました。

組み込みモジュール変換（安定版）

ローカルパッケージ（monorepoなど）からの依存関係や、外部依存関係（node_modules）からの依存関係をマークして、変換およびバンドルできるようになりました。この組み込みサポートは、人気の next-transpile-modules パッケージに取って代わります。

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
};
 
module.exports = nextConfig;

このパッケージに貢献し、組み込みサポートがコミュニティのニーズを満たすように支援してくださった Pierre de la Martinière（@martpie）に感謝いたします。

バンドルサイズの縮小のためのインポート解決

多くの人気の npm パッケージでは、他のモジュールを再エクスポートする単一のファイルを提供する「バレルファイル」が使用されています。例：

export { default as Button } from './dist/Button';
export { default as Slider } from './dist/Slider';
export { default as Dropdown } from './dist/Dropdown';

これにより、パッケージのコンシューマーは 1 行で名前付きエクスポートを使用できます。

import { Button, Slider, Dropdown } from '@acme/ui';

バンドラーはこれらのバレルファイルを理解し、未使用の再エクスポート（「デッドコード削除」と呼ばれます）を削除できますが、このプロセスには再エクスポートされたすべてのファイルを解析/コンパイルする必要があります。公開ライブラリの場合、一部の npm パッケージは数千ものモジュールを再エクスポートするバレルファイルを提供しており、コンパイル時間が遅くなります。これらのライブラリは、この問題を回避するために babel-plugin-transform-imports を推奨していましたが、SWC を使用しているユーザーには以前はサポートがありませんでした。Next.js には、modularizeImports という新しい SWC トランスフォームが組み込まれました。

この新しい設定により、定義されたパターンに基づいてインポートステートメントを変更する SWC トランスフォームが有効になります。たとえば、上記のように 3 つのコンポーネントを使用するコードは、開発者が手動でコードを記述することなく、直接インポートを使用するように自動的に変換されます。

// Before (with barrel file)
import { Button, Slider, Dropdown } from '@acme/ui';
 
// After (with modularized imports from plugin)
import Button from '@acme/ui/dist/Button';
import Slider from '@acme/ui/dist/Slider';
import Dropdown from '@acme/ui/dist/Dropdown';

この変換は、next.config.js の modularizeImports オプションで可能です。

module.exports = {
  modularizeImports: {
    '@acme/ui': {
      transform: '@acme/ui/dist/{{member}}',
    },
  },
};

このトランスフォームを @mui/icons-material または lodash と連携させることで、未使用のファイルのコンパイルをスキップできます。詳細はこちら。

デモを見るで、これを実際にご覧いただけます。

Edge 用の軽量 Node.js ランタイム、API Routes 用に安定版になりました

Next.js 内の Edge Runtime は、Vercel のような Edge コンピューティングプラットフォームやセルフホスティング環境と互換性のある Node.js API（Request、Response など）の厳密なサブセットを使用します。これらの API はブラウザを含むどこでも実行できるため、開発者は一度学習すればどこでも利用できます。

// "experimental-" prefix is no longer needed
export const config = {
  runtime: 'edge',
};
 
export default function handler(req: Request) {
  return new Response('Hello World');
}

Next.js Middleware は、パフォーマンス向上のためにデフォルトでこの軽量な Edge Runtime を使用しています。Middleware はアプリケーション内のすべてのリクエストの前に実行される可能性があるため、低遅延を保証するには軽量なランタイムが不可欠です。Next.js 12.2 では、API Routes でもこのランタイムをオプションで使用できるようになりました（実験的機能）。

13.1 では、Next.js 内の Edge Runtime が API Routes 用に安定版になりました。セルフホストする場合、Middleware と Edge Runtime を使用する API Routes は、next start の一部としてデフォルトで単一リージョンのワークロードとして実行されます。Vercel では、Next.js Middleware と API Routes は、可能な限り低い遅延を実現するためにVercel Edge Functions を使用してグローバルにデプロイされます。Vercel Edge Functions は一般提供も開始されました。

Turbopack の改善

Next.js 13 で Turbopack アルファ版をリリースした後、信頼性の向上、最も要望の多い機能の追加、プラグインや他のフレームワークでの使用計画の策定に注力してきました。

Next.js 13.0.0 以降、Turbopack は

PostCSS、Tailwind CSS を含む、をサポート
next/image をサポート
@next/font（Google Fonts）をサポート
動的な import() ステートメントからの CSS ロードをサポート
CSS ソースマップをサポート（@ahnehgk さん、貢献ありがとうございます）
next dev エラーオーバーレイでのエラーハンドリングの改善
メモリ使用量の改善
CSS Modules サポートの改善
HMR アップデートのチャンクアルゴリズムの改善
HMR ソースマップの信頼性の向上

Evan You および Vite コミュニティの皆様には、Turbopack のベンチマークが可能な限り正確になるようにフィードバックと貢献をしていただいたことに感謝いたします。Vite チームと協力して最新の Turbopack ベンチマークを検証し、テスト方法論に数多くの改善を加えました。

この共同作業の結果、React の更新メカニズムで費やされた時間を含む、より正確なメトリックを使用するようになりました。Turbopack および webpack 上の Next.js 13.1 で React Fast Refresh の時間を 30ms 改善できました。また、SWC を使用した Vite の新しいベンチマークを追加し、デフォルトの Vite と Babel を使用した場合と比較してパフォーマンスが向上したことを示しています。更新されたベンチマークをご覧になるか、テスト方法論についてお読みください。

本日、Next.js 13 の Turbopack アルファ版を next dev --turbo でぜひお試しください。フィードバックがありましたら、GitHub Discussions までお知らせください。

Next.js 高度な Middleware

皆様からのフィードバックにより、Next.js Middleware はこれまで以上に強力になりました。13.1 では、Middleware からレスポンスを返したり、リクエストにヘッダーを設定したりできるようになりました。

これらの API の改善により、Next.js のルーティングライフサイクルのすべての部分をカスタマイズするための強力な新しい柔軟性が得られます。next.config.js 内の experimental.allowMiddlewareResponseBody 設定オプションは不要になりました。

rewrite または redirect を行う必要なく、リクエストにヘッダーをより簡単に設定したり、直接応答したりできるようになりました。

import { NextResponse } from 'next/server';
 
export function middleware(request: Request) {
  // Check if a user has access...
  if (!isAuthorized(request)) {
    return NextResponse.json({ message: 'Unauthorized' });
  }
 
  // Add a new header, this will change the incoming request headers
  // that you can read in getServerSideProps and API routes
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('x-version', '13.1');
 
  return NextResponse.next({
    request: {
      // Apply new request headers
      headers: requestHeaders,
    },
  });
}

Next.js 高度な Middleware について詳細をご覧ください。

その他の改善

@next/font は、同じフォント宣言で複数のフォントウェイトとスタイルを追加できるようになりました。詳細はこちら。
next/dynamic は React のプリミティブ lazy() と <Suspense> を使用するようになりました。以前の suspense オプションは不要になりました。これらの変更により、next/dynamic は app ディレクトリと互換性があります。
create-next-app は新しいデザインに更新され、レイアウトシフトなしでフォントを自動的にセルフホストするための @next/font がデフォルトで含まれるようになりました。npx create-next-app@latest で試すか、テンプレートをデプロイしてください。
Next.js 13 の app ディレクトリ（ベータ版）の最新機能と規約の一部を紹介するApp Directory Playground に数多くの改善を加えました。独自のものをデプロイできます。
画像プレースホルダー、遅延読み込み、自動最適化、キーボードサポートなどを備えた、高性能な画像ギャラリーテンプレートを作成しました。独自のものをデプロイしてください。
大規模なオープンソース React および Express.js アプリケーションを Next.js に移行する方法するためのリソースを作成しました。詳細なウォークスルーと、特定のコミットへのリンクが含まれています。

コミュニティ

Next.js は、2,400 人以上の個々の開発者、Google や Meta のような業界パートナー、そして Vercel のコアチームの共同作業の結果です。毎週 360 万回以上の npm ダウンロードと 97,900 以上の GitHub スターを持つ Next.js は、Web を構築するための最も人気のある方法の 1 つです。

GitHub Discussions、Reddit、Discord でコミュニティに参加しましょう。

このリリースは、以下の方々によってもたらされました。

Next.js チーム：Balazs、Hannes、Jan、Jiachi、Jimmy、JJ、Josh、Sebastian、Shu、Steven、Tim、そしてWyatt。
Turbopack チーム：Alex、Donny、Justin、Leah、LongYinan、Maia、OJ、Tobias、そしてWill。

そして、@aarnadlr、@aaronbrown-vercel、@aaronjy、@abayomi185、@ademilter、@adictonator、@adilansari、@adtc、@alantoa、@aleksa-codes、@alfred-mountfield、@alpha-xek、@andarist、@andykenward、@anujssstw、@artdevgame、@artechventure、@arturbien、@aziyatali、@bennettdams、@bertho-zero、@blue-devil1134、@bot08、@brkalow、@brvnonascimento、@chanceaclark、@chibicode、@chrisipanaque、@chunsch、@colinking、@craigwheeler、@ctjlewis、@cvolant、@danmindru、@davidnx、@delbaoliveira、@devvspaces、@dtinth、@ducanhgh、@duncanogle、@ethomson、@fantaasm、@feugy、@fomichroman、@gruz0、@haschikeks、@hughlilly、@idoob、@iiegor、@imranbarbhuiya、@ingovals、@inokawa、@ishaqibrahimbot、@ismaelrumzan、@jakemstar、@janicklas-ralph、@jaredpalmer、@jaykch、@jimcresswell、@joliss、@josephcsoti、@joshuaslate、@joulev、@jueungrace、@juliusmarminge、@karlhorky、@kikobeats、@kleintorres、@koenpunt、@koltong、@kosai106、@labyrinthitis、@lachlanjc、@laityned、@leerob、@leoortizz、@lorenzobloedow、@lucasassisrosa、@m7yue、@manovotny、@marcus-rise、@matthew-heath、@mattpr、@maxleiter、@maxproske、@meenie、@mmaaaaz、@mnajdova、@moetazaneta、@mrkldshv、@nathanhammond、@nekochantaiwan、@nfinished、@niedziolkamichal、@nocell、@notrab、@nuta、@nutlope、@obusk、@orionmiz、@peraltafederico、@reshmi-sriram、@reyrodrigez、@rightones、@rishabhpoddar、@saseungmin、@serkanbektas、@sferadev、@silvioprog、@sivtu、@soonoo、@sqve、@steven-tey、@sukkaw、@superbahbi、@teobler、@theevilhead、@thomasballinger、@timeyoutakeit、@valentinh、@ws-jm、@wxh06、@yasath、@yutsuten、@zekicaneksi の貢献。