コンテンツにスキップ
ブログに戻る

2022年9月8日 木曜日

Next.js 12.3

投稿者
Balázs Orbán
Balázs Orbán@balazsorban44
DongYoon Kang
DongYoon Kang@kdy1dev
Jiachi Liu
Jiachi Liu@huozhi
JJ Kasper
JJ Kasper@_ijjk
Maia Teegarden
Maia Teegarden@padmaia
Shu Ding
Shu Ding@shuding_
Steven
Steven@styfle
Tim Neutkens
Tim Neutkens@timneutkens

Next.js 12.3 では、いくつかの品質向上策をリリースしました。

本日、npm i next@latest を実行してアップデートしてください。

10月25日に開催される第3回グローバル Next.js コミュニティカンファレンスを発表します。 今すぐ登録 →

Next.js Conf

10月25日に開催されるグローバル Next.js コミュニティカンファレンスにご招待します。Next.js の6周年を記念して、以下を紹介します。

  • React Server Components、ストリーミング、Suspense を活用した機能。
  • 開発者がアプリケーションを最適化・スケーリングしやすくするための規約。
  • ローカル開発と本番ビルドを高速化するオープンソースツール。

無料チケットを請求 して、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.json
  • tsconfig.json

これらの設定ファイルへの変更時に、ローカル開発サーバーを再起動する必要はなくなりました。

Next.js が `.env` ファイルをホットリロードする様子を示すビデオ。

Image コンポーネント

next/future/image コンポーネント (安定版)

Next.js 12.2 では、スタイリングを簡素化し、ネイティブブラウザの遅延読み込みを使用してパフォーマンスを向上させる、新しい Image コンポーネントの実験的なプレビューを共有しました。

新しい Image コンポーネントは安定版となり、実験的なフラグは不要になりました。

前回リリース以降、さらに改善を行いました。

  • fill レイアウトモードのサポートを追加しました。これにより、画像は親要素を埋めるようになります。
  • ぼかしプレースホルダーが透明な画像でも機能するように改善し、<noscript> が不要になり、next dev と next start の整合性が取れるようになりました。
  • 画像読み込み中に alt テキストを非表示にすることで、わずかなレイアウトシフト (Chrome 以外のブラウザ) を防止しました。
  • アクセシビリティ向上のために alt プロパティを必須としました。
  • ハイドレーション前にエラーが発生した場合の onError プロパティを修正しました。
  • width または height プロパティのみを持つ静的インポート画像のアスペクト比を修正しました。
  • 不適切な設定や構成を使用した際のエラーメッセージを改善しました。

将来的には、next/image を next/legacy/image に、next/future/image を next/image にリネームする予定です。これにより、新しい Next.js プロジェクトに最適なエクスペリエンスが提供され、既存のプロジェクトも next/image codemod を使用して簡単に移行できるようになります。次期メジャーバージョンに向けて、詳細をさらに提供する予定です。

今日から使用する方法の詳細については、移行ガイドを含む ドキュメント を参照してください。

リモートパターン (安定版)

remotePatterns は、組み込みの Image Optimization API を使用する際に、リモート画像のワイルドカードを指定できるようにします。これは、ドメイン名に対して完全一致しか行わない既存の images.domains 設定よりも強力なマッチングを可能にします。

このオプションは現在安定版であり、以下の設定オプションで使用できます。

next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        // The `src` property hostname must end with `.example.com`,
        // otherwise the API will respond with 400 Bad Request.
        protocol: 'https',
        hostname: '**.example.com',
      },
    ],
  },
};

画像最適化の無効化 (安定版)

Image Optimization API は、リクエストされたときにオンデマンドで画像を最適化するためにサーバーを必要とします。これは、next start でセルフホストする場合や、Vercel のようなプラットフォームにデプロイする場合にうまく機能します。ただし、これはサーバーを含まない next export では機能しません。以前は、loader プロップを使用してサードパーティの Image Optimization プロバイダーを設定する必要がありましたが、現在では next.config.js を使用して、すべての next/image インスタンスで画像最適化を完全に無効にすることができます。

この以前は実験的なオプションが安定版となり、以下の設定オプションで使用できます。

next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

SWC ミニファイア (安定版)

Next.js 12 では、Next.js Compiler の実験的な機能の一部として、SWC を使用したコードミニファイアを導入しました。初期結果によると、SWC によるミニファイアは、Terser を使用した以前のバージョンよりも 7倍高速 でした。

このリリースでは、この機能は安定版となり、以下の next.config.js オプションを使用してオプトインできます。

next.config.js
module.exports = {
  swcMinify: true,
};

次期メジャーバージョンで SWC ミニファイアをデフォルトにする予定です。

新しいルーターとレイアウトのアップデート

今年初めに、Next.js がリリースされて以来最大のアップデートである Layouts RFC を公開しました。これらの変更には、React Server Components 上に構築された新しいルーターが含まれています。実装作業が開始され、次期メジャーバージョンでのパブリックベータを目指して作業を進めています。

本日、以下を含む今後の機能に関する詳細情報を共有します。

さらに、別の RFC では、新しい app ディレクトリでの **グローバル CSS インポート** のサポートを追加することを検討しています。これにより、追加の設定なしで、独自の .css ファイルをインポートするパッケージを使用できるようになります。

これらの新機能の詳細については、Layouts RFC を参照してください。

その他の改善点

  • Next.js の組み込みアクセシビリティ機能に関する新しいドキュメント。
  • create-next-app テンプレートには、システムの好みに応じてダークモードサポートが自動的に含まれるようになりました。
  • src/ は、統合 ESLint サポートを使用する場合、デフォルトのリントディレクトリになりました。
  • next.config.js には ajv によるスキーマ検証が含まれるようになり、設定オプションの誤用を防ぐのに役立ちます。
  • next.config.js には実験的な設定フラグ fallbackNodePolyfills: false が追加され、Next.js が Node.js API をブラウザ用にポリフィルしないようにします (これによりバンドルサイズが増加します)。このオプションにより、Next.js は不要なインポート元を示すビルド時エラーを表示します。

コミュニティ

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 による貢献によってもたらされました。