Next.js 7

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

• 開発者体験（DX）の改善：起動速度57%向上、再コンパイル速度42%向上
• より優れたエラー報告（react-error-overlayを使用）
• コンパイルパイプラインのアップグレード：Webpack 4とBabel 7
• 動的インポートの標準化
• 静的CDNのサポート
• 初期HTMLペイロードの小型化
• AppとPages間のSSRにおけるReact Contextのサポート

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

DXの改善

Next.jsの主要な目標の一つは、**最高の開発者体験**とともに最高のプロダクション性能を提供することです。このリリースでは、ビルドおよびデバッグパイプラインに多くの重要な改善がもたらされます。

コンパイル速度

webpack 4、Babel 7、そしてコードベースにおける多くの改善と最適化により、Next.jsは開発中の起動時間が最大57%高速化しました。

新しいインクリメンタルコンパイルキャッシュのおかげで、コードへの変更は**40%高速にビルド**されるようになりました。

以下は、収集したいくつかの例です。

おまけとして、開発およびビルド時に、webpackbarのおかげで、より優れたリアルタイムフィードバックが表示されるようになりました。

React Error Overlayによるエラー報告の改善

正確で役立つエラーをレンダリングすることは、優れた開発およびデバッグ体験に不可欠です。これまで、エラーメッセージとスタックトレースをレンダリングしていましたが、今後は`react-error-overlay`を使用して、スタックトレースをさらに充実させます。

• サーバーおよびクライアントエラーの両方に対する正確なエラー位置
• コンテキストを提供するためのソースのハイライト
• 完全で豊富なスタックトレース

これは、エラーのBefore/Afterの比較です。

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

Webpack 4

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

これらの改善点の中には、次のようなものがあります。

• `.mjs`ソースファイルのサポート
• コード分割の改善
• より優れたツリーシェイキング（未使用コードの削除）のサポート

もう一つの新機能は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インポートがサポートされるようになりました。

import './my-dynamic-component.css';
 
export default function MyDynamicComponent() {
  return <h1>My dynamic component</h1>;
}

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にコンテンツハッシュも自動的に追加するため、変更があった場合でも、エンドユーザーが古いバージョンのファイルを取得することがなく、不変の永続キャッシュを導入する機能が保証されます。

要するに、Next.jsプロジェクトで`.css`ファイルのインポートをサポートするために必要なことは、`next.config.js`に**`withCSS`プラグインを登録するだけ**です。

const withCSS = require('@zeit/next-css');
module.exports = withCSS({
  /* my next config */
});

動的インポートの標準化

Next.jsはバージョン3から`next/dynamic`を介した動的インポートをサポートしています。

この技術の初期採用者として、私たちは`import()`を処理するための独自のソリューションを記述する必要がありました。

その結果、Next.jsはwebpackが後で導入したサポートから乖離し始め、いくつかの機能が欠けていました。

このため、Next.jsはwebpackがそれ以来導入したいくつかの`import()`機能をサポートしていませんでした。

例えば、特定ファイルの命名や手動でのバンドルは不可能でした。

import(/* webpackChunkName: 'my-chunk' */ '../lib/my-library');

もう1つの例は、`next/dynamic`モジュールでラップせずに`import()`を使用することです。

Next.js 7から、デフォルトの`import()`の挙動に手を加えることはなくなりました。つまり、**完全な`import()`サポートがすぐに利用できる**ようになりました。

この変更も完全に下位互換性があります。動的なコンポーネントの使用は、これまで通りシンプルです。

import dynamic from 'next/dynamic';
 
const MyComponent = dynamic(import('../components/my-component'));
 
export default function Index() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

この例では、`my-component`用に新しいJavaScriptファイルを作成し、``がレンダリングされたときにのみロードします。

最も重要なのは、レンダリングされない場合、`