ブログに戻る
月曜日, 2019-10-07
Next.js 9.1
投稿者: JJ Kasper (@_ijjk), Joe Haddad (@timer150), Luis Alvarez (@luis_fades), Tim Neutkens (@timneutkens)
本日、Next.js 9.1 を発表します。今回のリリースでは src と public ディレクトリのサポートが追加されました。
今回のリリースでの新機能
src ディレクトリのサポート
pages ディレクトリはアプリケーションのルートに必須でしたが、src 配下にネストして配置できるようになりました。- これにより、コードベースを
src 配下にまとめる一般的な構成をそのまま使えます。src/pages を作成することで、従来のルート直下の pages の代わりに使用できます。
src の使用は任意です。
public ディレクトリのサポート
- これまで Next.js には特殊ディレクトリとして
static があり、/static へマッピングされていました（例: static/my-image.png → /static/my-image.png）。
- しかし、
/static ではドメインルートに置く必要がある robots.txt のようなケースをカバーできませんでした。
- Next.js 9.1 から
public ディレクトリが導入され、public/robots.txt は /robots.txt にマッピングされます。public に置いたファイルはドメインルートにそのままマップされます。
public は static のユースケースも包含するため、static ディレクトリは非推奨(deprecated)となり、代替として public/static を推奨します。後方互換性のため、static は非推奨メッセージ付きで引き続き動作します。
今回のリリースでプレビュー中の機能（実験的フラグ）
これらの機能は現在実験的フラグ下で提供されており、最終実装が整い次第リリースされます。
組み込みの CSS サポート
-
現在、Next.js は styled-jsx を組み込みで提供しており、コンポーネント単位のスタイリングに適しています。
-
しかし企業からの要望として、既存の CSS やデザインシステムを使いたいニーズが多く、一般に next-css プラグインを導入して CSS インポートを有効にしているケースが約50%あります。
-
そのため、開発時の自動リロードや本番での最適化（コンパイルやポリフィル）を含む、組み込みの CSS インポートサポートを追加しています。初期実装は本番 Next.js アプリでテスト中です。
-
グローバル CSS のインポートをまず導入します。
pages/_app.js
import '../styles/global.css';
import App from 'next/app';
export default App;
-
次に .module.css 拡張子による CSS モジュールをサポートします。
pages/index.js
import styles from '../styles/index.module.css';
export default function HomePage() {
return <h1 className={styles.heading}>Hello World</h1>;
}
-
これにより、CSS インポート時の開発体験が大幅に向上します。進行中の作業は GitHub 上の RFC で確認できます。
静的エラーページ
- Next.js には内部的に
/_error と呼ばれるエラーページがあります。ユーザーは pages/_error.js を作ることでカスタマイズできます。
- エラーは一般に「想定されるエラー」と「想定外のエラー」に分かれます。想定されるエラーの例は 404 ページ、想定外のエラーは
getInitialProps やレンダリング中にスローされるエラー（500）などです。
- 想定されるエラーは動的レンダリングする必要がないことが多いため、自動的に静的最適化（静的エクスポート）を行う予定です。デフォルトでは 404 は静的ページになり、動的レンダリングを希望する場合はオプトアウトできます。
- これにより、サーバーターゲット使用時のサーバー負荷軽減や、serverless ターゲット使用時のコスト削減、CDN キャッシュの利点を得られます。
Google Chrome との協力
- Next.js 9 発表時に共有した通り、Google Chrome チームは Next.js のパフォーマンス改善にリソースを投資しており、大規模なパフォーマンス改善に向けた複数の取り組みを進めています。詳細は Next.js 9 の発表や Nicole Sullivan 氏の React Rally の講演で確認できます。
Module / Nomodule
- 開発者は一般に「モダン」な JavaScript を書き、Next.js は Babel を使って必要に応じて変換やポリフィルを自動で行います。
- 多くの機能は現在のブラウザでサポートされていますが、従来はすべてのブラウザ向けに一つの JavaScript バンドルを配信していました（例: Internet Explorer 11 向けにコンパイルして polyfill を含める）。
- 今回、モジュール/ノーモジュール（module/nomodule）パターンを利用して、モダンブラウザには最新の JS を、古いブラウザにはポリフィル済みの ES5 コードを提供する仕組みを導入します。
- この機能は複数の大規模 Next.js アプリで本番テスト中で、実運用データを収集中です。初期の結果は有望で、性能改善の詳細は追って共有されます。
改善されたバンドル分割
-
Next.js はページをインタラクティブにするために複数の JavaScript バンドルを読み込みます。主なものは:
- ページの JavaScript バンドル
- 共通の JavaScript を含むファイル（commons）
- Next.js のクライアントランタイムバンドル
- 動的インポート（通常
next/dynamic 経由で追加）
-
これらは相互依存のため全て読み込まれる必要があり、起動のために過剰なコードをダウンロードしないよう最適化することが重要です。
-
現行の commons 算出は比率ベースのヒューリスティックで、あるモジュールがページの50%で使われていれば commons と判断していました。しかし、アプリがマーケティングページ、ブログ、ダッシュボードなど複数の領域から成る場合、特定の領域に偏った最適化になりがちです。
-
Alex Castle により定義された新しいチャンク層（複数ファイルでの分割）により、より最適化された commons チャンク生成が可能になります。module/nomodule と同様に、改善されたバンドル分割も複数の大規模アプリで本番テスト中で、詳細は別記事で共有予定です。
更新方法
-
いつも通り後方互換性を保つよう努めています。アップデートは次のコマンドを実行するだけです:
npm i next@latest react@latest react-dom@latest
-
アプリケーションが Next.js のバージョン 9 未満の場合は、アップグレードに必要な変更点についてアップグレードガイドを参照してください。
採用事例とショーケース
- 前回のメジャーリリース以降、TikTok、Hilton、Elastic、Realtor、JW Player といった企業が Next.js を採用して公開しています。ショーケースをチェックしてください。
コミュニティ
- 今回の変更により、すべての Next.js アプリケーションでのパフォーマンス向上を期待しています。
- Next.js コミュニティは拡大を続けています:
- 800 以上のコントリビューターが少なくとも1つのコミットを実施
- GitHub スターは 41,350+ 回
- examples ディレクトリは 210+ の例
- Next.js コミュニティのメンバーは 11,250+ 人
参加をお待ちしています。今回のリリースに貢献してくれたコミュニティおよび外部からのフィードバックに感謝します。