Help us understand the problem. What is going on with this article?

Next.js 9.1: srcディレクトリとpublicディレクトリがサポートされました

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.icopublic/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の変更と同じく現在テスト中とのことで、結果は後々公開されるようです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした