投稿日: 2022-09-08T16:00:00.000Z
投稿者: Balázs Orbán (@balazsorban44), DongYoon Kang (@kdy1dev), Jiachi Liu (@huozhi), JJ Kasper (@ijjk), Maia Teegarden (@padmaia), Shu Ding (@shuding), Steven (@styfle), Tim Neutkens (@timneutkens)
Next.js 12.3
Next.js 12.3 では、いくつかの使い勝手向上をリリースしました:
- 改善された Fast Refresh:
.env、jsconfig.json、tsconfig.json のホットリロード対応
- TypeScript 自動インストール:
.ts ファイルを追加すると自動で TypeScript を構成し依存関係をインストール
- 画像コンポーネント:
next/future/image が安定化
- SWC Minifier: Next.js コンパイラによるミニファイが安定化
- 新しい Router + Layouts のアップデート: 実装が開始され、今後の新機能を説明
今すぐアップデートするには:
npm i next@latest
Next.js Conf (招待)
グローバルな Next.js コミュニティカンファレンスを 10月25日に開催します。Next.js の6周年を記念して、以下を紹介します:
- React Server Components、Streaming、Suspense を活用する機能
- 開発者がアプリを最適化・スケールしやすくするための規約
- ローカル開発と本番ビルドを高速化するOSSツール
無料チケットを取得して、Next.js と React の未来を体験してください。詳細や発表は @nextjs をフォローしてください。コミュニティトークも募集中です。トーク提案を提出して、あなたが Next.js で作っているものを共有してください。
TypeScript 自動インストール
Next.js は TypeScript の自動構成を内蔵しています。従来は既存プロジェクトへ TypeScript を追加する際に依存関係を手動でインストールする必要がありましたが、本リリースからは Next.js がプロジェクト内に TypeScript ファイルを検出すると必要な依存関係をインストールし、tsconfig.json を追加します。これは next dev と next build 実行時に動作します。
（ビデオ: Next.js が TypeScript を自動インストールする様子）
改善された Fast Refresh
ローカル開発での高速な反復は非常に重要です。Next.js は React コンポーネントの編集に対して Fast Refresh を使用し、保存するとページをリロードせずにブラウザに即時反映されます。Next.js 12.3 では以下の設定ファイルもホットリロードされるようになりました:
.env と env.* のバリアントjsconfig.jsontsconfig.json
これらの設定を編集してもローカル開発サーバーを再起動する必要はありません。
（ビデオ: Next.js が .env ファイルをホットリロードする様子）
画像コンポーネント
next/future/image コンポーネント（安定化）
Next.js 12.2 で実験的プレビューを共有した新しい Image コンポーネントは、画像のスタイリングを簡素化し、ネイティブのブラウザ遅延読み込みを利用してパフォーマンスを改善します。新しい Image コンポーネントは現在安定版となり、実験フラグは不要です。前回以降の改善点:
- 親要素を埋める
fill レイアウトモード対応を追加
- ぼかしプレースホルダーを改善（透明画像で動作、
<noscript> 不要、next dev が next start と一致）
- 画像読み込み中に alt テキストを非表示にして微妙なレイアウトシフト（Chrome 以外のブラウザ）を防止
- アクセシビリティ向上のため
alt プロパティを必須化
- ハイドレーション前にエラーが発生した際の
onError プロパティの修正
- 幅または高さのみを持つ静的インポート画像のアスペクト比修正
- 不適切な設定・構成使用時のエラーメッセージ改善
将来的には next/image を next/legacy/image にリネームし、next/future/image を next/image にする計画があります。新しいプロジェクトではより良い体験を提供し、既存プロジェクトは next/image の codemod で容易に移行できるようにします。次のメジャーリリースに向けて詳細を提供します。現時点での使用方法や移行ガイドはドキュメントを参照してください。
Remote Patterns（安定化）
remotePatterns は組み込みの Image Optimization API を使用する際にリモート画像のワイルドカードを指定できる機能です。これにより images.domains のドメイン名の完全一致にとどまらない強力なマッチングが可能になります。安定化され、次の設定で使用できます:
// next.config.js
module.exports = {
images: {
remotePatterns: [
{
// `src` のホスト名は `.example.com` で終わる必要があります。そうでない場合 API は 400 を返します。
protocol: 'https',
hostname: '**.example.com',
},
],
},
};
画像最適化の無効化（安定化）
Image Optimization API はリクエスト時に画像をオンデマンドで最適化するためにサーバーを必要とします。next start でセルフホストや Vercel のようなプラットフォームでは問題ありませんが、next export ではサーバーが含まれないため動作しません。以前は loader プロパティでサードパーティ Image Optimization プロバイダを設定する必要がありましたが、next.config.js 側で next/image の画像最適化を完全に無効化できるようになりました。実験的オプションが安定化し、次の構成で使用できます:
module.exports = {
images: {
unoptimized: true,
},
};
SWC Minifier（安定化）
Next.js 12 で導入した Next.js Compiler の実験機能としての SWC によるコードミニファイは、当初 Terser と比べて約7倍高速であることが示されました。本リリースでこの機能は安定化し、next.config.js で以下のようにオプトインできます:
module.exports = {
swcMinify: true,
};
次のメジャーリリースで SWC ミニファイアをデフォルトにする予定です。
新しい Router と Layouts のアップデート
今年初めに公開した Layouts RFC は、2016年のリリース以来の Next.js にとって最大の更新を導入しました。これらの変更は React Server Components 上に構築された新しいルーターを含みます。実装作業は始まっており、次のメジャーリリースでパブリックベータを目指しています。今回、以下の今後の機能について追加情報を共有します:
- Route Groups: レイアウトからルートを除外したり、URL パスに影響を与えずにルートを整理するための仕組み
- Instant Loading States: Suspense を用いて簡単にローディング UI を追加する新しいファイル規約
- Error Handling: ネストされた Error Boundary やエラー UI を簡単に追加する新しいファイル規約
- Templates: 共有 UI を追加する新しいファイル規約（別インスタンスを作成し状態を共有しない）
- Intercepting Routes、Parallel Routes、Conditional Routes: 高度なルーティングパターンを実現する新しい規約
別の RFC では、新しい app ディレクトリでの Global CSS インポートのサポート追加を検討しています。これにより、追加設定なしで独自に .css をインポートするパッケージを利用できるようになります。
詳細は Layouts RFC を参照してください。
その他の改善点
- Next.js の組み込みアクセシビリティ機能に関する新しいドキュメントを追加
create-next-app のテンプレートがシステムのプリファレンスに基づくダークモード対応を自動で含むように- 統合された ESLint サポート時に
src/ がデフォルトの lint 対象ディレクトリに
next.config.js に ajv を用いたスキーマバリデーションを追加し、設定の誤用を防止next.config.js に実験的フラグ fallbackNodePolyfills: false を追加。ブラウザ向けに Node.js API をポリフィルすること（バンドルサイズ増につながる）を防止します。このオプションは、不要なインポート元を示すビルド時エラーを表示します。
コミュニティ
Next.js は 2,000 人以上の開発者、Google Chrome や Meta のような業界パートナー、そして Vercel のコアチームによる共同作業の成果です。本リリースは以下の貢献者によって支えられました（抜粋）:
@pthomas931, @madmed88, @sanjaiyan-dev, @balazsorban44, @DonghyukJacobJang, @chaiwattsw, @styfle, @dunglas, @ahkhanjani, @promer94, @terrierscript, @shawncal, @insik-han, @QuiiBz, @ykzts, @JoshuaKGoldberg, @lucasassisrosa, @dikwickley, @Brooooooklyn, @sicarius97, @FourwingsY, @manovotny, @SukkaW, @pepoeverton, @jdeniau, @sumiren, @anthonyshew, @pekarja5, @huozhi, @leerob, @fediev, @atcastle, @shuding, @feugy, @jonohewitt, @zakiego, @Schniz, @timneutkens, @wyattjoh, @MaedahBatool, @X7Becka, @nnnnoel, @dcdev67, @alvinometric, @timothympace, @jeferson-sb, @ijjk, @theMosaad, @Yuddomack, @msquitieri, @andreizanik, @nix6839, @thomasballinger, @ziishaned, @xyeres, @nyedidikeke, @maxproske, @sokra, @titusdmoore, @thebergamo, @fikrikarim, @Kikobeats, @clearlyTHUYDOAN, @nasso, @qutek, @kdy1, @kyliau, @housseindjirdeh, @barissayil, @seveibar, @Jessidhia, @santidalmasso, @JohnDaly, @Nikhilnama18, @mduleone, @colinhacks, @ductnn, @josh, @hiro0218, @eltociear, @kwonoj, @valcosmos, @mihaic195, @stefanprobst, @KATT, @thiagomorales, @danielcavanagh, @steven-tey, @hellomhc, @trevor-fauna, @nguyenyou, @eminvergil, @lobsterkatie, @dorian-davis, @sambecker, @isaac-martin, @lfades, @amorimr, @javivelasco, @mongolyy, @Thisen, @zorrolisto, @ethomson, @padmaia, @thisisjofrank, @dominiksipowicz, @awareness481, @pakaponk, @apledger, @longzheng, @tknickman, @rbrcsk, @emersonlaurentino, @carstenlebek, @edusig, @riccardogiorato, @hanneslund, @ryanhaticus, @j-mendez, @armandabric, @WinmezzZ, @andershagbard, @dammy001, @MarDi66, @okmttdhr, @rishabhpoddar, @marjorg, @dustinsgoodman, @zanechua
ご協力ありがとうございました。