Next.js 6 と Nextjs.org | Next.js 日本語

今年の ZEIT Day キーノートでは、Next.js のメトリクスを含む私たちのオープンソースプロジェクトに焦点を当てました。GitHub で 25000 以上のスターを獲得し、10000 以上のウェブサイトで既に利用されている Next.js の成長には驚かされ、依存プロジェクトが増え続けているのを見るのは嬉しい限りです。

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

ゼロコンフィグレーションの静的エクスポート。デフォルトで next.config.js は不要
ページ遷移やエラーバウンダリなどを可能にする拡張ポイント _app.js
Babel 7 とフラグメント構文 <> のサポート
セキュリティに重点を置いた拡張統合テストスイート
コアコードベースの Flow アノテーション

6.0 リリースに加えて、Next.js を独自のホームページ nextjs.org で紹介することにしました。特徴は:

すべての Next.js ドキュメントを一箇所に集約。GitHub の README ファイルを参照する必要はもうありません
https://learnnextjs.com を https://nextjs.org/learn に統合
Next.js で構築された印象的なウェブサイトのショーケース

静的 React アプリケーション

Next.js は、プリレンダリング というアイデアに焦点を当て、高いパフォーマンスを実現しています。プリレンダリングには2つの形式があります:

サーバーサイドレンダリング (SSR): 各リクエストがレンダリングをトリガーします。その結果、エンドユーザーはデータの利用を開始するために JS のダウンロードを待つ必要がありません
静的レンダリング: サーバー上でコードを実行することなく直接提供できる静的ファイルを出力します

これまで、Next.js の静的エクスポートは非常に強力でしたが、十分に使いやすくはありませんでした。カスタムルートを使用していない場合でも、手動でルートマップを設定する必要がありました。

Next.js 6 では、pages/ ディレクトリの内容に基づいてルートマップを自動生成します。高度なカスタムルーティングを使用していない場合、next.config.js を変更する必要はありません。次のコマンドを実行するだけです:

next build
next export

例として、Vercel に静的にデプロイされたこのウェブサイトをご覧ください。ウェブサイトのソースコードも公開されています。

App コンポーネント

Next.js は _document.js という拡張ポイントを提供しています。定義すると、アプリケーションの最上位ドキュメント（<html> 要素をレンダリングする部分）をオーバーライドできます。

_document.js は強力な拡張性を提供しますが、いくつかの重大な制限があります。例えば、React はクライアントサイドで <html> や <body> を直接レンダリングできないため、_document.js は主に初期プリレンダリングフェーズに限定されます。

他の強力なユースケースを可能にするために、各ページをラップする最上位コンポーネントである _app.js を導入します。

_document.js と _app.js の違い

_app.js を定義することで可能になるユースケースを見てみましょう。

ページ遷移

ページ遷移の例: Xavier Cazalot による page-transitions-app-next.vercel.app (ソース)

この例では、各ページに独立してアクセスでき、プリレンダリングされ、遅延読み込みされます。しかし、クライアントサイドで遷移する際には、スムーズなアニメーションが可能です。

Apollo と Redux のより良い統合

私たちは既に Apollo や Redux のようなデータおよび状態管理フレームワークを統合する多くの例を持っていました。

しかし、_app.js を使用すると、これらを含めるのがさらに簡単になります。いくつかの例をご紹介します:

より良いエラーハンドリング

React は componentDidCatch というコンポーネントメソッドを提供しており、クライアントサイドでネストされたコンポーネントからバブルアップする例外を捕捉して処理できます。

多くの場合、これらの例外の予期せぬ性質により、すべてをトップレベルで同じように処理したいと思うかもしれません。

したがって、_app.js はその componentDidCatch ロジックを定義するのに適した場所です。実際のエラーハンドリング境界の例をご覧ください (ソースコード)

Babel 7

Babel を最新バージョンである 7 にアップグレードしました。これにより、いくつかの素晴らしい新機能と改善がもたらされます。

JSX フラグメント

React 16.2 では Fragment API が導入され、<div> のような任意の HTML 要素でラップすることなく要素のリストを表現できるようになりました:

render() {
  return <React.Fragment>
    <A />,
    <B />
  </React.Fragment>
}

これを書くのは面倒かもしれませんが、Next.js 6 では新しい JSX フラグメント構文を使用してフラグメントの作成を容易にできます:

render() {
  return <>
    <A />,
    <B />
  </>
}

ネストされた .babelrc

Next.js アプリケーション内に異なる Babel 設定を必要とするディレクトリがある場合、そのディレクトリに限定された .babelrc ファイルを含めることが可能になりました

src/
  .babelrc      # 一般的な .babelrc
  components/
    i18n/
      .babelrc  # この .babelrc はこのディレクトリにのみ適用

第一級の TypeScript サポート

Universal webpack を発表した際、サーバーとクライアントの両方で webpack を実行するため、ts-loader を介して TypeScript を使用できることを指摘しました。

Babel 7 には TypeScript の組み込みサポートが含まれています（以前は Babel で Flow のみがサポートされていました）。

これを使用するには、最新バージョンの @zeit/next-typescript をインストールするか、この例を確認してください。

nextjs.org

Next.js コアコントリビューターの Jimmy Moon によって構築された新しい nextjs.org を紹介できることを非常に嬉しく思います。

まず、5分でサーバーレンダリング付きの PWA をゼロから作成する方法を示すスピードアップ動画をご覧ください:

nextjs.org のオープニングビデオ

ドキュメントの一元化

何かを素早く調べる必要があるときは、nextjs.org/docs にアクセスしてください:

ドキュメントは常に最新の安定版を反映します

ステップバイステップで学ぶ

以前は、Next.js を始めるためのステップバイステップガイド（クイズ付き！）として https://learnnextjs.com を初心者に推奨していました。

現在はこれを nextjs.org/learn に直接統合し、学習を開始するのをさらに簡単にしました:

Next.js を学び始める最も簡単な方法

インスピレーションを得る

現在、Next.js で構築された素晴らしい見た目のウェブサイトやアプリケーションのショーケースを特集しています。nextjs.org/showcase でインスピレーションを得るか、自分自身のプロジェクトを提出してください!

Next.js で構築されたプロジェクトのショーケース