本日Next.js 9.4がリリースされました。簡単にまとめたので、公式ブログと合わせて確認してください。
Fast Refresh
Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。
これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。
これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。
Incremental Static Regeneration (beta)
段階的な静的ページ再生成がサポートされました。
Next.js 9.3でサポートされたStatic Generationでは、ビルド時に生成したページでなくてもfallback: trueオプションを利用することで実行時に新しいページを追加することが出来ました。Tweetを表示する事例が話題になりましたね。
Next.js 9.4では過去に生成したページであっても、一定期間を経た後に再生成することができるようになります。
getStaticPropsでrevalidate期間を返すことで期間を設定し、ページが生成されてから設定した期間を超えると再生成されます。
CMS examples
Contentful、DatoCMS、Prismic、Sanity、TakeShapeなどのCMSを利用したExampleが用意されています。
Examplesのうちcms-から始まるものがCMSのexampleです。
DatoCMSは画像の最適化、TinaCMSはページ内編集にも対応しているとのこと。
Headless CMSが更に便利に使えそうです。
New Environment Variables Support
Next.jsはNode.jsとブラウザの両方で動くことから、環境変数を設定した場合、どっちで動作するのかが分かりづらいものでした。（Node.jsでしか見たくない環境変数がブラウザで見れたら事故ですよね）
そこで下位互換性のある2つの変更が行われました。
- NEXT_PUBLICから始まる環境変数はブラウザに公開される。
-
.envのサポートが行われます。Basic Features: Environment Variables
環境変数はデフォルトでNode.js環境でのみ利用可能で、NEXT_PUBLICで始まるものだけがブラウザで利用可能になります。
Improved Built-in Fetch Support
今までブラウザ環境でのfetchポリフィルは提供されていましたが、サーバー環境では独自にポリフィルライブラリを導入する必要がありました。今回のBuild-in Fetch Supportではサーバー環境でもfetchポリフィルが用意されました。
Integrated Web Vitals Reporting
Googleがウェブで優れたユーザー エクスペリエンスを実現するために重要と思われる品質シグナルの統合ガイドを提供する取り組みであるWeb Vitals（日本語記事）
Largest Contentful Paint, First Input Deley, Cumulative Layout Shiftをすべてのサイトで共通な指標ととらえCore Web Vitalsと呼んでいます。
これらの指標を追跡するために_app.jsにreportWebVitalsというメソッドが導入されました。（ドキュメント）
Absolute Imports and Aliases
jsconfig.js, tsconfig.jsonを使って絶対パスでのインポートが可能になります。
Configurable Sass Support
Next.js 9.3でサポートされたBuild-in Sass Support。コンパイラーの設定をnext.config.jsでいじれるようになります。
Improved Log Output
ログが重複して出力されるケースが改善されます。
感想
今回の目玉はIncremental Static Regeneration (beta)だと思います。これでメディアサイトであってもrevalidateの期間を短くすればstaticなページとして提供できるのではないかと考えています。