Next.js 5.1: Faster Page Resolution, Environment Config & More

claudejamodel: claude-sonnet-4-20250514

Next.js 5.1: より高速なページ解決、環境設定など

2018年3月26日（月）

投稿者: Arunoda Susiripala @ arunoda、Tim Neutkens @ timneutkens

環境設定、フェーズ、ソースマップ、新しいNext.jsプラグインのサポートを特徴とするNext.js 5.1をご紹介できることを嬉しく思います。主要なパフォーマンス改善が導入されました：ページ解決が102倍高速化され、エラーページがより効率的に読み込まれるようになりました。

アップグレードまたはインストールするには、以下を実行してください：

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

Next.jsのバージョンアップに加えて、ピア依存関係のreactとreact-domもアップグレードします。@zeit/next-css、@zeit/next-sass、@zeit/next-less、@zeit/next-typescriptなどのnext-pluginsも必ずアップグレードしてください。

より高速なページ解決

Next.js 5.0のアーキテクチャ変更により、URLパスに基づいてページを解決するロジックを簡素化することができました。これらの変更は@oliviertassinariの研究に基づいています。

以前はページの解決に平均2.347msかかっていました。新しいロジックでは、同じページの解決に平均0.023msかかります。これはNext.jsアプリケーションで最も頻繁に呼び出されるメソッドの一つが102倍高速化されたことを意味します。

環境設定

典型的なNode.js環境では、アプリケーションに環境変数を渡すことに依存することがよくあります。例えば：

API_URL=https://api.vercel.com node index.js

そして、process.env.API_URLを使用してアプリケーション内のどこでもAPI_URLを使用できます。

ユニバーサルレンダリングでは、process.envはクライアント側で利用できません。そこでNext 5.1では新機能を導入します：publicRuntimeConfigとserverRuntimeConfigです。これらはnext.config.jsで設定でき、next/configモジュールを使用して利用できるようになります。

next.config.js

module.exports = {
  serverRuntimeConfig: {
    // サーバー側でのみ利用可能
    mySecret: 'secret',
  },
  publicRuntimeConfig: {
    // サーバーとクライアントの両方で利用可能
    staticFolder: '/static',
  },
};

pages/index.js

import getConfig from 'next/config';
const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();

console.log(serverRuntimeConfig.mySecret); // サーバー側でのみ利用可能
console.log(publicRuntimeConfig.staticFolder); // サーバーとクライアントの両方で利用可能

export default function Index() {
  return (
    <div>
      <img src={`${publicRuntimeConfig.staticFolder}/logo.png`} />
    </div>
  );
}

改善されたエラーハンドリング

以前、Next.jsはページバンドルを読み込む際のサーバーエラーを検出するための特別なエラーハンドリングメカニズムを持っていました。ページバンドルとは、ページを読み込むためにクライアント側で読み込まれるJavaScriptファイルです（例：/_next/-/page/index.js）。

ビルドIDの不一致などのエラーがあった場合、ページバンドルは200 HTTPステータスで提供されますが、内容はNext.jsサーバーによって生成されたエラーのJSON表現でした。

Next.js 5.1では、エラーハンドリングロジックを完全にリファクタリングしました。ページバンドルが404 HTTPステータスを返すと、ルーターが自動的にそれを検出してページをリロードし、マルチゾーン間のナビゲーションを可能にします。

このロジックの書き直しにより、主にページリロードをトリガーするために使用されていたRouter.onAppUpdatedフックを削除しました。現在、ページは自動的にリロードされます。

さらに、開発モードでのエラー回復に関する新しい統合テストセットを追加し、将来のリリースでエラー回復の回帰を避けるようにしました。

フェーズ / 設定関数

@zeit/next-cssなどの一部のnext-pluginsは、Next.jsが開発モードの時やnext buildを実行している時にのみ必要です。オブジェクトを直接エクスポートする代わりに、設定オブジェクトを返す関数をエクスポートできるようになりました。

module.exports = (phase, { defaultConfig }) => config;

関数をエクスポートすると、Next.jsが実行されているフェーズ（例：development、production、building、export）にアクセスできます。これにより、プラグインを必要な時にのみ読み込むことができ、デフォルト設定にもアクセスできます。

フェーズを含む一般的に使用される定数を保持するnext/constantsという新しいモジュールを導入しました。

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

module.exports = (phase, {defaultConfig}) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      /* 開発専用の設定オプション */
    }
  }
  return {
    /* 開発以外のすべてのフェーズの設定オプション */
  }
}

改善されたプロダクションソースマップ生成

Next.js 5でのユニバーサルwebpackの導入により、プロダクション環境にソースマップを追加することが、next.config.jsに数行追加するだけで簡単になりました：

next.config.js

module.exports = {
  webpack(config, { dev }) {
    if (!dev) {
      config.devtool = 'source-map';
      for (const plugin of config.plugins) {
        if (plugin['constructor']['name'] === 'UglifyJsPlugin') {
          plugin.options.sourceMap = true;
          break;
        }
      }
    }
    return config;
  },
};

@zeit/next-source-mapsをプロジェクトに追加して、プロダクションソースマップを自動的に有効にできます。next.config.jsに以下を追加してください：

const withSourceMaps = require('@zeit/next-source-maps');
module.exports = withSourceMaps();

@ptomasroosからのプルリクエストにより、app.jsファイルがmain.jsに置き換えられました。このファイルは以前manifest.jsとcommons.jsにコンパイルされていたコードを保持し、webpackはmain.jsのソースマップを生成します。

ソースマップは自動的に提供され、外部エラー追跡ツールがエラーを検出した際に実際のファイルと行番号を表示できるようになります。

新しいプラグイン / 既存プラグインの改善

2つの新しい公式プラグインを導入しました。@zeit/next-bundle-analyzerは、サーバー側とクライアント側のバンドルを個別に分析するためのwebpack-bundle-analyzerの設定を簡単にできます。

さらに、公式のcss、less、sassプラグインにホットリロードとバンドリングに関する多くの改善がありました。例えば、開発モードでスタイルなしコンテンツのフラッシュがなくなり、サブコンポーネントのスタイルも取得されるようになりました。

コミュニティ

Next.jsコミュニティはGitHubで見つけることができます。最近、Next.jsを使用している注目すべき企業のリストが投稿されました。スレッドにプロジェクトを自由に投稿してください。

感謝

このリリースのためにNext.jsに貢献してくださったすべての方に感謝いたします。コアへの貢献であれ、成長し続けるexamplesディレクトリの拡張と改善であれ。

Next.jsへの貢献を始めたい方は、「good first issue」または「help wanted」ラベルの付いたissueを見つけることができます。

環境設定と新しいエラーページハンドリングに関する貴重なフィードバックをいただいたTruliaに特別な感謝を申し上げます。

Summary