Next.js 6.1 リリース

本日、本番環境対応の Next.js 6.1 をリリースできることを誇りに思います。主な特徴は以下の通りです:

ホットリロードの信頼性向上
コードベースの改善
Next.js コーデモッドの導入

Next.js 6.1 のリリースに加えて、nextjs.org がオープンソース化されたことも発表できることを嬉しく思います。

ホットリロードの信頼性向上

Next.js 6.1 以前のバージョンでは、Next.js はユーザーの代わりに react-hot-loader を実装していました。このライブラリはホットリロード間で React の状態を保持します。

これにより react-hot-loader は React にいくつかの非標準的な動作を追加します。例えば、shouldComponentUpdate を無視したり、要素の type が実際の React コンポーネントではなくプロキシコンポーネントになってしまうことがありました。

Next.js を標準の React に可能な限り近づけるため、依存関係から react-hot-loader を削除しました。これにより開発モードと本番モードの動作がより近くなります。なお、Next.js のホットリロード機能が削除されたわけではないことに注意してください。ホットリロードは常に Next.js 内部で処理されています。

TypeScript やその他のカスタム拡張子のホットリロード

デフォルトでは、Next.js は pages ディレクトリ内の .js または .jsx ファイルを自動的に探してルートを定義します。

Next.js 5 でユニバーサル webpack が導入されたことで、コンパイル済みの JavaScript トップレベルページを持つことが可能になりました。良い例が .ts と .tsx を使用する TypeScript です。

pageExtensions は next.config.js の設定キーで、Next.js プラグインがページと見なすべき拡張子を定義できるようにするためのものです。例えば @zeit/next-typescript は .ts と .tsx を定義し、@zeit/next-mdx はドキュメントでトップレベルの .mdx ページの使用方法を説明しています。

以前は pageExtensions を実装する際、Next.js プラグインはホットリロードに使用される hot-self-accept-loader を実装する必要がありました。これはもはや必要なくなり、pageExtensions に拡張子を追加すると hot-self-accept-loader が自動的に適用されます。

コードベースの改善

最近、私たちは今後の機能に向けた準備を進めており、これには長期的なコード品質の向上につながる内部的な変更が含まれています。

これらの変更の1つは、server/build ディレクトリをトップレベルの build に移動したことです。これにより、新しいコントリビューターが webpack と babel の設定を見つけやすくなりました。

また、コードベース全体に Flow の型を追加することにも注力しています。

ユーザーにとってより目に見える変更は、.next/dist が .next/server に名前変更されたことです。.next ディレクトリはビルド出力を保持します。例えば next build を実行すると、結果は .next に保存されます。

プリレンダリングファイルは現在 server ディレクトリにあります

同じ定数の出現箇所は共通ファイル constants.js に移動されました。

Next.js コーデモッド

Next.js 6.0 がリリースされた際、ページコンポーネントに魔法のように注入されていた url プロパティは非推奨になりました。url が廃止される理由は、物事を非常に予測可能で明示的にしたいからです。どこからともなく魔法のように現れる url プロパティはこの目標に役立ちません。

url プロパティと同じプロパティを取得する推奨方法は withRouter を使用することです:

page.js

// 旧
class Page extends React.Component {
  render() {
    const { url } = this.props;
    return <div>{url.pathname}</div>;
  }
}
export default Page;

Next.js 6 以前のバージョンで url を使用して pathname にアクセスする方法

page.js

// 新
import { withRouter } from 'next/router';
class Page extends React.Component {
  render() {
    const { router } = this.props;
    return <div>{router.pathname}</div>;
  }
}
export default withRouter(Page);

Next.js 6 以降のバージョンで withRouter によって注入される router を使用して pathname にアクセスする方法

私たちは Next.js アプリケーションのアップグレードパスをシンプルに保つことにコミットしているため、url の使用を withRouter にアップグレードする簡単な方法を作成することにしました。

この取り組みの結果が next‑codemod です。これは非推奨の機能を新しい使用方法にアップグレードするコーデモッドのライブラリで、1つのコマンドを実行するだけで簡単にアップグレードできます。

私たちが提供する最初のコーデモッドは url-to-withrouter で、url が使用されていた多くのケースを自動的に withRouter に変換します。

Terminal

  jscodeshift -t ./url-to-withrouter.js pages/**/*.js

これにより url の使用が withRouter に変換されます

詳細はこちら

Next.js への貢献

Next.js コミュニティは成長しており、Next.js コアや例に少なくとも1つのコミットをしたコントリビューターが450人以上います。

Next.js に貢献する方法はたくさんあります:

コミュニティに参加して GitHub でアドバイスする
一般的なユースケースの例を提供する: examples ディレクトリ
good first issue と help wanted ラベルの付いたイシューを GitHub で確認する

good first issue ラベルの付いた30のオープンなイシューがあります。新しいコントリビューターが貢献する機会を提供します。

ホットリロードの信頼性向上

TypeScript やその他のカスタム拡張子のホットリロード

コードベースの改善

Next.js コーデモッド

Next.js への貢献

nextjs.org のオープンソース化

将来の展望

Webpack 4

サーバーレス Next.js