Next.js 12.3まとめ
基本的には以下のNext.js 12.3の内容を翻訳してまとめたものになります。
TypeScriptの自動インストール
以前から.ts(x)ファイルが存在するプロジェクトでyarn devを実行した場合はtsconfig.jsonを自動生成した上で必要な依存ライブラリのインストールを促すメッセージが表示されていましたが、今後は必要な依存ライブラリも自動インストールしてくれるようになりました。
これでTypeScriptの導入は拡張子を.ts(x)に変更するだけになったので、地味ですが便利ですね。
Fast Refreshの改善
以下のファイルが変更された場合もFast Refreshが適用されるようになりました。
-
.env系 jsconfig.jsontsconfig.json
.env系は新しい値を追加したり、既存の値を変更したりするたびにyarn devし直す必要があったので、こちらも地味ですが便利ですね。
Imageコンポーネント
next/future/image(Stable)
Next.js 12.2で登場したnext/future/imageが早くも（と思いましたが、Next.js 12.2って2ヶ月も前だったんですね…）Stableになりました。
next/imageではimgタグがspanタグで囲まれていたため、スタイリングしにくい面がありましたが、next/future/imageではimgタグのみのためスタイリングしやすくなっていそうです。
その代わりにlayoutやobjectFit、objectPositionなどのレイアウト系のpropsは削除されており、styleやclassNameを使用するようになっています。
また、将来的には現状のnext/imageはnext/legacy/imageにリネームされ、next/future/imageがnext/imageにリネームされる予定のようです。
その際にはマイグレーション用のcodemodが提供されるようですが、今後はnext/future/imageを使用していった方がよいかもしれません。
詳細は以下のページで確認できます。
Remote Patterns(Stable)
Image Optimization APIを使用してRemote Imagesを最適化したい場合に、悪意のあるユーザーからアプリケーションを保護するために、Remote Imagesをホストしているドメインのリストを定義しておく必要があるようです。
詳細は以下のページで確認できます。
画像最適化の無効化(Stable)
Image Optimization APIの使用には画像をオンデマンドで最適化するためのNode.jsサーバーが必要です。
そのためnext exportではImage Optimization APIを使用できず、loader propにサードパーティの画像最適化プロバイダを設定する必要がありました。
今後はnext.config.jsを使用して画像最適化を一括で完全に無効化することができるようになったので、next exportでもnext/imageを使用しやすくなるのではないでしょうか。
SWC Minifier(Stable)
Next.js 12で登場したSWC MinifierがStableになりました。
個人的にはまだ試せていないので試してみたいです。
また、次のメジャーバージョンではデフォルトでオンにする予定のようです。
新しいルーターとレイアウトの続報
こちらは新機能として追加されたわけではありませんが、以前公開されたLayouts RFCの続報で、()で囲むことでURL構造に影響を与えずにRouteのグループ化ができるRoute Groupsなど、いくつか追加機能が公開されています。
また、次のメジャーバージョンではパブリックベータが始まるようです。
詳細は以下のページで確認できます。
その他
組み込みのアクセシビリティの機能を紹介するドキュメントの追加など、いくつかの改善があります。
詳細は以下のページで確認できます。
Discussion