DocsDigest
Back to listLanguage: JA
OpenAINext.jsOct 7, 2019, 6:59 PM

Next.js 9.1

A condensed section focused on the key takeaways first.

Original Post
OpenAIClaude

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

Next.js 9.1: src & public dirs, experimental CSS and performance improvements

next.jssrcpubliccssbundle-splittingmodule-nomodule

Key Points

  • src/pages support
  • public/ replaces static
  • experimental built-in CSS imports

Summary

Next.js 9.1 introduces optional src directory support for organizing application code, a new public directory (root-mounted assets) that replaces the old static convention (deprecated), and multiple experimental performance features: built-in CSS imports, static error pages optimization, module/nomodule modern bundle delivery, and improved bundle splitting. This release is backward compatible; update by installing latest Next/React packages.

Key Points

  • src directory support: you can move pages into src/pages instead of the project root to match common repo layouts.
  • public directory: files under public/ are served from the site root (e.g. public/robots.txt → /robots.txt). static/ is deprecated; use public/static/ if needed.
  • Built-in CSS (experimental): global CSS imports from pages/_app.js and planned CSS Modules (*.module.css) with dev hot-reload and production optimizations (feature is behind a flag).
  • Static error pages (experimental): expected errors like 404 are statically exported by default for better CDN caching and lower server load; opt-out available when dynamic behavior is required.
  • Module/nomodule (experimental): serve modern ES module bundles to evergreen browsers and legacy ES5 bundles to older browsers to reduce bytes shipped.
  • Improved bundle splitting (experimental): new chunking strategy to produce smaller, better-cached client bundles across diverse page sets.
  • Upgrade: run npm i next@latest react@latest react-dom@latest and consult the upgrade guide if coming from pre-9.x.

Practical notes for engineers

  • All new features are backward compatible; experimental features are behind flags and are being A/B tested in production by large apps.
  • Migrate static assets into public/ to ensure root path mapping; keep static/ for now but expect deprecation warnings.
  • Test module/nomodule and improved chunking in staging to measure TTI and caching improvements before rolling to production.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

Next.js 9.1

ブログに戻る

月曜日, 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

    // Global styles can be imported from _app.js
import '../styles/global.css';
import App from 'next/app';
export default App;

  • 次に .module.css 拡張子による CSS モジュールをサポートします。

    pages/index.js

    // Scoped styles are imported through .module.css
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+ 人

参加をお待ちしています。今回のリリースに貢献してくれたコミュニティおよび外部からのフィードバックに感謝します。