DocsDigest
一覧へLanguage: EN
OpenAINext.js2019/04/02 1:35

Next.js 8.0.4

要点だけを先に読めるように短く再構成したセクションです。

元記事
OpenAIClaude

Quick Digest

要約

要点だけを先に読めるように短く再構成したセクションです。

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

Next.js 8.0.4 リリース概要

nextjsperformanceserverlessmdxbuildviewport

Key Points

  • ビルドの決定性向上
  • ランタイムと関数の小型化
  • デフォルト viewport を追加

Summary

Next.js 8.0.4 がリリースされました。主な目的はビルド・ランタイムの軽量化とビルドの決定性向上、デフォルトの viewport メタタグ追加、MDX プラグインの統合です。通常はパッケージをアップデートするだけで恩恵を受けられます: npm i next@latest react@latest react-dom@latest。

Key Points

  • ビルドの決定性向上によりキャッシュ効果が高まり、再ビルドが高速化。
  • next/dynamic のサーバー側マニフェストを簡素化し、出力JSが減少。
  • CircleCI の環境を検出して適切な CPU 数を設定し、ビルド時間を短縮。
  • クライアント側の JavaScript を約 5.58KB 減少。withRouter の hoist-non-react-statics 依存を削除で約 3KB 削減。
  • サーバーレス関数が平均 44KB（gzip 5.44KB）小さくなり、コールドスタートが改善。
  • X-Powered-By ヘッダを削除（既に無効化している場合は next.config.js の設定を削除可能）。
  • デフォルトの viewport が自動で注入されます: <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">。上書きする場合は next/head を使って自身の meta を追加してください（例: import Head from 'next/head' と <meta name="viewport" .../>）。
  • MDX プラグインが公式レポジトリに移管され、パッケージ名が @next/mdx に。インストール: npm i @next/mdx @mdx-js/loader（next.config.js に const withMDX = require('@next/mdx')(); module.exports = withMDX(); を追加）。
  • Learn サイトは MDX 化および serverless ターゲット化され、ドキュメント改善と例の更新が行われています。

アップグレード前にカスタム babel 設定やプラグイン互換性を確認してください（今回、一部の最適化はビルド工程側に移動しています）。

Full Translation

翻訳

原文の流れを保ったまま読める翻訳セクションです。

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

Next.js 8.0.4

Next.js 8.0.4

投稿日: 2019年4月2日（火）

投稿者: Connor Davis (@connordav_is)、JJ Kasper (@_ijjk)、Joe Haddad (@timer150)、Luis Alvarez (@luis_fades)、Tim Neutkens (@timneutkens)

主な変更点:

  • ビルドパフォーマンスの改善
  • 決定論的（Deterministic）ビルド
  • クライアントランタイムの縮小
  • Serverless 関数の縮小
  • デフォルトの viewport メタタグ追加
  • Learn（学習ガイド）の改善

常に後方互換性を保つよう努めています。ほとんどの Next.js アプリケーションでは、次のコマンドを実行するだけでアップデートできます。

ターミナル:

npm i next@latest react@latest react-dom@latest

ビルドパフォーマンス

Next.js のビルドはより決定論的になりました。つまり、コードが変更されていない場合は、ビルド出力が毎回同じになるため、ビルドプロセスでのキャッシュが効きやすくなり、最初のビルド以降のリビルドが高速化します。

測定では、ビルド時間の多くが JavaScript の圧縮（minify）に費やされていることがわかりました。ビルド出力がより決定論的になることで、圧縮済みファイルが既にキャッシュに存在する可能性が高まり、結果的に高速化します。Vercel にデプロイしているユーザーはこれらのキャッシュ改善を自動的に体験できます。

サーバー側の next/dynamic マニフェストを、非同期に読み込まれるモジュールのみを含むよう簡素化しました。この簡素化されたマニフェストは計算が速く、生成される JavaScript も少なくなります。

CircleCI を使用しているユーザーはビルド時間の短縮に気づくはずです。以前は CircleCI 環境が利用可能な CPU 数を正確に反映しておらず、ワーカーが過剰にスケジューリングされていました。Next.js は現在 CircleCI を検出すると、利用可能なリソースに基づいて適切な CPU 数を設定します。

ランタイムフットプリントの縮小

Next.js はクライアント側の JavaScript を合計で 5.58KB 減少させ、HTTP ペイロードを小さくしました。

  • withRouter はもはや hoist-non-react-statics に依存しないため、バンドルサイズが約 3KB 減少しました。withRouter は getInitialProps をホイストしますが、他の静的プロパティはホイストしません。
  • next/babel プリセットは、より軽量で高速な JavaScript を生成するよう最適化されました。
  • X-Powered-By ヘッダーを削除し、HTTP ペイロードを削減しました。コミュニティ調査で多くのプロダクション環境でこのヘッダーが無効化されていることがわかったため、このヘッダーを削除しています。プロジェクトで poweredByHeader オプションを next.config.js に設定している場合は、これを削除して問題ありません。

依存ツリーとコードベースの最適化により、すべての Serverless Function を平均で 44KB（gzip 5.44KB）小さくすることに成功しました。Serverless 関数のサイズは起動性能に直接影響するため、関数が小さいほど起動が速くなります。

バージョンServerless ページサイズServerless ページサイズ (gzip)
8.0259 KB62.3 KB
8.0.4215 KB56.8 KB
差分17% 小9% 小

next/babel プリセット関連の修正

Next.js 8 のリリース後、一部のユーザーが Next.js の外部（例: テストスイート）で React コンポーネントをインポートする際に問題を報告しました。これは next へのインポートが Next.js コードベース内の正しいファイルへ書き換えられる最適化が、next/babel プリセットの全ユーザーに対して適用されていたことが原因でした。この最適化は Next.js のビルドプロセス自体に移動されたため、ユーザーの Babel 設定と競合することはなくなりました。

デフォルトの viewport メタタグ

Next.js の目標の一つは、ウェブアプリケーションを書く際に最適なデフォルトを提供することです。CSS の @media クエリを実装する際のセットアップを減らすため、ほとんどの場合で追加の viewport メタタグが不要になるようにしました。ブラウザはデフォルトでは期待通りに @media クエリやズームを扱わないことがあり、CSS の一貫性に予期せぬ差異が生じることがあります。そのため、ほとんどの Next.js ユーザーは一貫性を得るためにアプリに viewport メタタグを追加していました。

バージョン 8.0.4 から、アプリケーションが viewport を設定していない場合は次のデフォルトが適用されます:

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />

必要であれば、next/head を使って上書きできます。例:

// pages/index.js
import Head from 'next/head';

function HomePage() {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width,minimum-scale=0.5,initial-scale=1" />
      </Head>
    </>
  );
}

export default HomePage;

この変更に協力し実装を行ってくれた Jason Miller に感謝します。

新しい @next/mdx プラグイン

MDX を使うと Markdown ドキュメント内に JSX を書くことができます。通常の Markdown 構文でコンテンツを書きつつ、React コンポーネントをインポートして文書をインタラクティブかつ動的に拡張できます。

Next.js 用の MDX サポートを提供するプラグイン @zeit/next-mdx は Next.js の GitHub リポジトリに移され、現在は @next/mdx として利用可能です。

インストール:

npm i @next/mdx @mdx-js/loader

Next.js アプリで利用可能にするには、next.config.js を作成して次のように含めます:

const withMDX = require('@next/mdx')();
module.exports = withMDX();

今後、より多くの Next.js プラグインが Next.js リポジトリに移され、Next.js コアと一緒にリリースされ、Next.js のテストスイートでテストされる予定です。これにより、Hot Module Replacement、production ビルドなどがプラグインと一緒にうまく動作することを保証できます。

Learn（学習ガイド）の改善

Next.js Learn はクイズやサンプルを備えたステップバイステップのチュートリアルです。サイトは最近 MDX を使って再構築され、コントリビュートがこれまでより簡単になりました。Learn サイトへの貢献を歓迎します！

また、Learn サイトは Next.js 8 で導入された serverless ターゲットを使うようにアップグレードされ、世界中のユーザーに対してスケーラブルで高速なサイトになっています。

コミュニティから多くのコンテンツ改善のフィードバックを受け、過去数週間でそれらに対応してきました。Next.js Learn には更新された例や各セクションの詳細が追加され、手順がより分かりやすくなっています。

貢献と数値

Next.js の採用が継続して拡大していることを嬉しく思います。現在までに 660 を超えるコントリビューターが参加しています。GitHub でのスターは 36,150 回以上、最初のリリース以来 2,950 を超える pull request が提出されています。

このリリースに貢献してくださったすべての方に感謝します。コアへの貢献でも、増え続ける examples ディレクトリの拡充や改善でも、そのすべてを歓迎します。Next.js への貢献を始めたい場合は、good first issue や help wanted ラベルが付いた issue が良い出発点です。

コミュニティ

Next.js コミュニティは 6,000 人を超えるメンバーに成長しました。GitHub Discussions は Next.js について話し合い、問題解決のアドバイスを受けたり、他のメンバーを助けたりする場です。ぜひ GitHub 上でコミュニティに参加してください！

Next.js 8.0.4 | Next.js | DocsDigest