🚀

Next.js 12.3まとめ

2022/09/09に公開約2,100字

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

https://nextjs.org/blog/next-12-3

TypeScriptの自動インストール

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

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

Fast Refreshの改善

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

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

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

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

https://nextjs.org/docs/api-reference/next/future/image

Remote Patterns(Stable)

Image Optimization APIを使用してRemote Imagesを最適化したい場合に、悪意のあるユーザーからアプリケーションを保護するために、Remote Imagesをホストしているドメインのリストを定義しておく必要があるようです。

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

https://nextjs.org/docs/api-reference/next/image#remote-patterns

画像最適化の無効化(Stable)

Image Optimization APIの使用には画像をオンデマンドで最適化するためのNode.jsサーバーが必要です。
そのためnext exportではImage Optimization APIを使用できず、loader propにサードパーティの画像最適化プロバイダを設定する必要がありました。

https://qiita.com/sakelog/items/ec0bc7f6d13ad5e0a17c

今後はnext.config.jsを使用して画像最適化を一括で完全に無効化することができるようになったので、next exportでもnext/imageを使用しやすくなるのではないでしょうか。

SWC Minifier(Stable)

Next.js 12で登場したSWC MinifierがStableになりました。
個人的にはまだ試せていないので試してみたいです。

また、次のメジャーバージョンではデフォルトでオンにする予定のようです。

新しいルーターとレイアウトの続報

こちらは新機能として追加されたわけではありませんが、以前公開されたLayouts RFCの続報で、()で囲むことでURL構造に影響を与えずにRouteのグループ化ができるRoute Groupsなど、いくつか追加機能が公開されています。

また、次のメジャーバージョンではパブリックベータが始まるようです。

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

https://nextjs.org/blog/layouts-rfc

その他

組み込みのアクセシビリティの機能を紹介するドキュメントの追加など、いくつかの改善があります。

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

https://nextjs.org/blog/next-12-3#other-improvements

Discussion

ログインするとコメントできます