Next.js 7

claudejamodel: claude-sonnet-4-20250514

Next.js 7

26回のcanaryリリースと340万回のダウンロードを経て、本番環境対応のNext.js 7をリリースできることを誇りに思います。主な機能は以下の通りです：

DX改善: 起動時間57%高速化、再コンパイル42%高速化
react-error-overlayによる改善されたエラー報告
アップグレードされたコンパイルパイプライン: Webpack 4とBabel 7
標準化されたDynamic Imports
静的CDNサポート
より小さな初期HTMLペイロード
AppとPages間でのSSRを使用したReact Context

そして最後に、全く新しいNextjs.orgでこのニュースを共有できることを嬉しく思います。

DX改善

Next.jsの主要な目標の一つは、最高の本番環境パフォーマンスと可能な限り最高の開発者体験を提供することです。このリリースでは、ビルドとデバッグパイプラインに多くの重要な改善をもたらします。

コンパイル速度

webpack 4、Babel 7、そして私たちのコードベースに対する多くの改善と最適化のおかげで、Next.jsは開発時に最大57%高速で起動するようになりました。新しいインクリメンタルコンパイルキャッシュのおかげで、コードに加えた変更は40%高速でビルドされるようになります。

以下は収集したサンプル数値です：

	6.0	7.0	差分
起動時間（基本アプリケーション）	1947ms	835ms	57%高速化
コード変更（基本アプリケーション）	304ms	178ms	42%高速化

ボーナスとして、開発とビルド時にwebpackbarによるより良いリアルタイムフィードバックが表示されるようになります。

React Error Overlayによる改善されたエラー報告

正確で役立つエラーをレンダリングすることは、優れた開発とデバッグ体験にとって重要です。これまでは、エラーメッセージとそのスタックトレースをレンダリングしていました。今後は、react-error-overlayを使用してスタックトレースを以下で充実させます：

サーバーとクライアントエラーの両方に対する正確なエラー位置
コンテキストを提供するソースのハイライト
完全なリッチスタックトレース

ボーナスとして、react-error-overlayにより、特定のコードブロックをクリックするだけでテキストエディタを簡単に開くことができます。

Webpack 4

最初のリリース以来、Next.jsはコードのバンドルとプラグインや拡張機能の豊富なエコシステムの再利用のためにwebpackを使用してきました。Next.jsが最新のwebpack 4で動作することを発表できて嬉しく思います。webpack 4には多数の改善とバグ修正が含まれています。

これらの中には以下が含まれます：

.mjsソースファイルのサポート
コード分割の改善
より良いtree-shaking（未使用コードの削除）サポート

もう一つの新機能はWebAssemblyサポートです。Next.jsはWebAssemblyをサーバーレンダリングすることもできます。

注意: このアップグレードは完全に後方互換性があります。ただし、next.config.js経由でカスタムwebpackローダーやプラグインを使用している場合は、それらをアップグレードする必要があるかもしれません。

CSSインポート

webpack 4では、バンドルからCSSを抽出する新しい方法としてmini-extract-css-pluginが導入されました。@zeit/next-css、@zeit/next-less、@zeit/next-sass、@zeit/next-stylusは現在mini-extract-css-pluginで動作しています。

これらのNext.jsプラグインの新バージョンは、CSSインポートに関連する20の既存の問題を解決します。例として、動的import()でのCSSインポートがサポートされるようになりました：

// components/my-dynamic-component.js
import './my-dynamic-component.css';

export default function MyDynamicComponent() {
  return <h1>My dynamic component</h1>;
}

// pages/index.js
import dynamic from 'next/dynamic'

const MyDynamicComponent = dynamic(import('../components/my-dynamic-component'))

export default function Index() {
  return (
    <div>
      <MyDynamicComponent/>
    </div>
  )
}

主要な改善点は、pages/_document.jsに以下を追加する必要がなくなったことです：

<link rel="stylesheet" href="/_next/static/style.css" />

代わりに、Next.jsが自動的にCSSファイルを注入します。本番環境では、Next.jsはCSSのURLにコンテンツハッシュも自動的に追加するため、変更があった場合にエンドユーザーが古いバージョンのファイルを取得することがなく、不変の永続キャッシュを導入する能力を持ちます。

標準化されたDynamic Imports

Next.jsはバージョン3以来、next/dynamicを通じて動的インポートをサポートしてきました。この技術の早期採用者として、import()を処理するための独自のソリューションを書く必要がありました。その結果、Next.jsはwebpackが後に導入したサポートから分岐し始め、いくつかの機能が欠けていました。

Next.js 7以降、デフォルトのimport()動作には手を加えません。これは、完全なimport()サポートをそのまま利用できることを意味します。この変更も完全に後方互換性があります。

Babel 7

Next.js 6ではまだベータ版だったBabel 7を導入しました。それ以来、Babel 7の安定版がリリースされ、Next.js 7では現在このバージョンを使用しています。

変更の完全なリストについては、Babelのリリースノートを参照してください。主な機能のいくつかは：

TypeScriptサポート（Next.jsでは@zeit/next-typescriptを使用可能）
フラグメント構文<>サポート
babel.config.jsサポート
ファイルやディレクトリのサブセットにのみプリセット/プラグインを適用するoverridesプロパティ

Next.jsプロジェクトでカスタムBabel設定がない場合、破壊的変更はありません。

より小さな初期HTMLペイロード

Next.jsはHTMLを事前レンダリングするため、<html>、<head>、<body>とページをレンダリングするために必要なJavaScriptファイルを含むデフォルト構造でページをラップします。この初期ペイロードは以前約1.62kBでした。

Next.js 7では初期HTMLペイロードを最適化し、現在1.5kBで、7.4%の削減となり、ページをより軽量にしています。

	6.0	7.0	差分
ドキュメントサイズ（サーバーレンダリング）	1.62kb	1.50kb	7.4%小さく

静的CDNサポート

Next.js 5ではassetPrefixサポートを導入しました。これは、Next.jsが特定の場所（通常はCDN）からアセットを自動的に読み込む方法です。

Next.js 7では、.nextのディレクトリ構造をURL構造に合わせて変更しました：

https://cdn.example.com/_next/static/<buildid>/pages/index.js
// マップ先:
.next/static/<buildid>/pages/index.js

プロキシタイプのCDNの使用を推奨しますが、この新しい構造により、異なるタイプのCDNのユーザーが.nextディレクトリをCDNにアップロードできるようになります。

Styled JSX v3

styled-jsx 3の導入を嬉しく思います。Next.jsにデフォルトで含まれるCSS-in-JSソリューションが、React Suspenseに対応しました。

styled-jsx 3では、新しいAPI css.resolveを導入することでこの問題を解決しました。これは、指定されたstyled-jsx文字列に対してclassNameと<style>タグ（stylesプロパティ）を生成します：

import css from 'styled-jsx/css';

const ChildComponent = ({ className }) => (
  <div>
    <p className={className}>some text</p>
  </div>
);

const { className, styles } = css.resolve`
  p {
    color: black;
  }
`;

export default function Index() {
  return (
    <div>
      <ChildComponent className={className} />
      {styles}
    </div>
  );
}

この新しいAPIにより、子コンポーネントにカスタムスタイリングを透過的に渡すことができます。

要約

Summary

Key Points

翻訳

Next.js 7

DX改善

コンパイル速度

React Error Overlayによる改善されたエラー報告

Webpack 4

CSSインポート

標準化されたDynamic Imports

Babel 7

より小さな初期HTMLペイロード

静的CDNサポート

Styled JSX v3