Next.js 13.1
2022年12月22日（木）
投稿者：OJ Kwon @ _ojkwon、Tim Neutkens @ timneutkens
Next.js 13.1では、pages/（安定版）とapp/（ベータ版）の両方のディレクトリに改善が含まれています：
- app Directory（ベータ版）の改善：信頼性とパフォーマンスの向上
- 組み込みモジュール変換：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プラグイン：ページとレイアウトの設定オプションの提案を提供し、ドキュメントを直接IDEに取り込み、ServerとClient Componentsに関する有用な使用ヒント（ServerコンポーネントでのuseStateの使用を防ぐなど）を提供する新しいTypeScriptプラグインを構築しました。詳細はこちら
-
信頼性の改善：CSSモジュールサポートの改善、レイアウトとページのcache()とfetch()の重複排除の修正、メモリリークなど、多数のバグを修正しました。
-
クライアントサイドJavaScriptの削減：appディレクトリは、pagesディレクトリよりも9.3kB少ないクライアントサイドJavaScriptを含むようになりました。このベースラインは、アプリケーションに1つまたは1000のServerコンポーネントを追加しても増加しません。
| pages/ | app/ | 差分 |
|---|
| Total First Load JS | ベースライン | -9.3kB | 12.1%削減 |
| Next.js Runtime | ベースライン | -12kB | 56.8%削減 |
| React Runtime | ベースライン | +2.7kB | 5.2%増加 |
Reactランタイムは一時的にわずかに大きくなっています。この増加は、Next.jsが以前処理していたメカニズムを処理するReact Server Componentsランタイムによるものです。これをさらに削減するよう取り組んでいます。
組み込みモジュール変換（安定版）
ローカルパッケージ（monoreposなど）や外部依存関係（node_modules）からの依存関係を変換およびバンドルするようにマークできるようになりました。この組み込みサポートは、人気のnext-transpile-modulesパッケージを置き換えます。
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';
これにより、パッケージの利用者は単一行で名前付きエクスポートを使用できます：
import { Button, Slider, Dropdown } from '@acme/ui';
バンドラーはこれらのバレルファイルを理解し、未使用の再エクスポートを削除できますが（「デッドコード除去」と呼ばれる）、このプロセスには再エクスポートされたすべてのファイルの解析/コンパイルが含まれます。
Next.jsに組み込まれた新しいSWC変換であるmodularizeImportsを追加しました。この新しい設定により、定義されたパターンに基づいてインポート文を変更するSWC変換が有効になります。
import { Button, Slider, Dropdown } from '@acme/ui';
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など）を使用します。
export const config = {
runtime: 'edge',
};
export default function handler(req: Request) {
return new Response('Hello World');
}
Next.js Middlewareは、より良いパフォーマンスのためにデフォルトでこの軽量エッジランタイムを既に使用しています。13.1では、Next.js内のEdge RuntimeがAPI Routes向けに安定版になりました。
Turbopackの改善
Next.js 13でTurbopack alphaをリリースした後、信頼性の向上、最も要求された機能のサポート追加、プラグインと他のフレームワークでの使用計画の定義に焦点を当ててきました。
Next.js 13.0.0以降、Turbopackは以下をサポートします：
- PostCSS（Tailwind CSSを含む）
- next/image
- @next/font（Google Fonts）
- 動的
import()文からのCSS読み込み
- CSSソースマップ（@ahabhgkの貢献に感謝）
next devエラーオーバーレイでのエラーハンドリング改善- メモリ使用量の改善
- CSSモジュールサポートの改善
- HMR更新のチャンキングアルゴリズム改善
- HMRソースマップの信頼性向上
Turbopackベンチマークを可能な限り正確にするためのフィードバックと貢献について、Evan YouとViteコミュニティに感謝します。
next dev --turboでNext.js 13のTurbopack alphaバージョンを今すぐお試しください。フィードバックがあればGitHub Discussionでお知らせください。
Next.js高度なMiddleware
フィードバックのおかげで、Next.js Middlewareをこれまで以上に強力にしています。13.1では、Middlewareからレスポンスを返すことや、リクエストにヘッダーを設定することができるようになりました。
next.config.js内のexperimental.allowMiddlewareResponseBody設定オプションは不要になりました。
import { NextResponse } from 'next/server';
export function middleware(request: Request) {
if (!isAuthorized(request)) {
return NextResponse.json({ message: 'Unauthorized' });
}
const requestHeaders = new Headers(request.headers);
requestHeaders.set('x-version', '13.1');
return NextResponse.next({
request: {
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を構築する最も人気のある方法の一つです。
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-