Next.js 6.1

本日、本番稼働可能なNext.js 6.1を発表できることを誇りに思います。このバージョンには、以下が含まれています。

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

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 にするトップレベルページを作成できるようになりました。たとえば、TypeScript は .ts と .tsx を使用します。

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 codemods

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

url プロパティが持っていたのと同じプロパティを取得するための推奨される方法は、withRouter を使用することです。

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

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

// new
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 を使用してパス名にアクセスする方法

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

この努力の成果が、next‑codemod です。これは、非推奨になった特定の機能の使用法を、1つのコマンドを実行するだけで新しい使用法にアップグレードできる codemods のライブラリです。

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

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

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

こちらで詳細をご覧ください

Next.js への貢献

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

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

コミュニティに参加し、GitHub でアドバイスを提供する
一般的なユースケースの例を寄稿する：examples ディレクトリ
GitHub の good first issue および help wanted ラベルを確認する

「good first issue」ラベルが付いたオープンな課題が 30 件あります。これにより、新しいコントリビューターに貢献する機会が与えられます。

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

TypeScript およびその他のカスタム拡張機能のホットリロード

コードベースの改善

Next.js codemods

Next.js への貢献

nextjs.org オープンソース

将来

Webpack 4

Serverless Next.js