https://zenn.dev/a_da_chi/articles/b4fff5bc87fc9e

og-base_z4sxah.png

基本的には以下のNext.js 12.3の内容を翻訳してまとめたものになります。

TypeScriptの自動インストール

以前から.ts(x)ファイルが存在するプロジェクトでyarn devを実行した場合はtsconfig.jsonを自動生成した上で必要な依存ライブラリのインストールを促すメッセージが表示されていましたが、今後は必要な依存ライブラリも自動インストールしてくれるようになりました。

これでTypeScriptの導入は拡張子を.ts(x)に変更するだけになったので、地味ですが便利ですね。

Fast Refreshの改善

以下のファイルが変更された場合もFast Refreshが適用されるようになりました。

.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タグのみのためスタイリングしやすくなっていそうです。 その代わりにlayoutobjectFitobjectPositionなどのレイアウト系のpropsは削除されており、styleclassNameを使用するようになっています。

また、将来的には現状のnext/imagenext/legacy/imageにリネームされ、next/future/imagenext/imageにリネームされる予定のようです。 その際にはマイグレーション用のcodemodが提供されるようですが、今後はnext/future/imageを使用していった方がよいかもしれません。

詳細は以下のページで確認できます。

Remote Patterns(Stable)