Next.js 9.1がリリースされたので変更内容をざっくりまとめました。
詳しい内容はNextjs.orgのブログで公開されています。
まとめ
新機能
-
srcディレクトリのサポート -
publicディレクトリのサポート
プレビュー（フラッグ有効で利用化）
- Built-in CSSのサポート
- 静的なエラーページ
- Module / Nomodule
srcディレクトリのサポート
Next.js 9.1からはpagesディレクトリをsrcディレクトリにも設置できるようになりました。
今まではルートディレクトリにしかおけず、src/pages/を有効化するにはNext.jsのルートディレクトリをまるごとsrc/に変更する手法が使われていました。（next dev src/のようにしていた）
9.1からはこういった対応が不要で、src/pages/ディレクトリにおいたファイルが認識されるようになりました。
publicディレクトリのサポート
静的ファイルを置くディレクトリがstatic/からpublic/に変更になりました。
favicon.icoをpublic/favicon.icoに設置すると、example.com/favicon.icoで配信されるようになります。
従来はstatic/favicon.icoに設置したファイルはemample.com/static/favicon.icoで公開されており、ドメインルートでファイルを配信するのに一手間必要でした。この一手間が減り、より直感的な仕様になりました。
Built-in CSSのサポート
Next.jsでは同じくZeit製のCSS in JSライブラリである「styled-jsx」の利用が推奨されています。
しかし、Next.js中でCSSのインポートを行う、「next-css」パッケージが半分以上のNext.jsプロジェクトで利用されているらしく、その結果build-inでサポートしようという動きがあるそうです。
静的なエラーページ
Next.jsのエラーページは内部的に/_errorと呼ばれており、src/_error.jsにReactコンポーネントファイルを作成することでエラーページのカスタマイズが可能です。
エラーページを動的にレンダリングをする必要はないので、静的化を行っています。
Module / Nomodule
Next.jsはいわゆるモダンなJSでコードを書き、実際のブラウザではBabelを使ってトランスパイルされたコードが実行されます。
このコードはサポートするブラウザすべてで動作するJSファイルですが、モダンブラウザではトランスパイルが必要ない場合があります。
module/nomoduleパターンでは古いブラウザにはポリフィル付きのES5コードを提供する一方で、モダンブラウザにモダンJSを配信するために、信頼できるメカニズムを提供します。
この機能は実世界でのデータを収集するため、複数の大規模Next.jsアプリケーションで本番環境でのテストを行っているそうです。詳細は近々共有されるようです。
改善されたBundle Splitting
Next.jsでビルドを行うといくつかのJSファイルが生成されます。その中に含まれるcommons.jsには各ページ間で利用されている共通のモジュールが挿入されます。
今までのこの共通のモジュールの判定は比率ベースで行われており、すべてのページの50%で使われているモジュールがcommons.jsに含まれていました。しかし、今回新しく複数のJSファイルに分割することで最適化されたBundle Splittingが行われるようになるようです。
こちらもmodule/nomoduleの変更と同じく現在テスト中とのことで、結果は後々公開されるようです。