Next.js 6 と Nextjs.org

今年、ZEIT Dayの基調講演では、Next.jsの指標を示すなど、オープンソースプロジェクトが取り上げられました。GitHubで25,000を超えるスターを獲得し、10,000以上のウェブサイトがすでに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.dokyumento.jp/learnに統合しました。
Next.jsで構築された最も印象的なウェブサイトのショーケース。

静的Reactアプリケーション

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

**サーバーサイドレンダリング:** 各リクエストがレンダリングをトリガーします。その結果、エンドユーザーはデータの消費を開始するために、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`を定義することで有効になるいくつかのユースケースを見てみましょう。

ページ遷移

ページ遷移の例：page-transitions-app-next.vercel.app by Xavier Cazalot (ソース)

この例では、各ページに個別にアクセスし、プリレンダリングおよび遅延読み込みを行うことができます。ただし、クライアント側で遷移すると、スムーズなアニメーションが可能です。

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[アイコン]

異なるBabel構成を必要とするディレクトリがNext.jsアプリケーションにネストされている場合、そのディレクトリにスコープされた`.babelrc`ファイルを具体的に含めることが可能になりました。

src/
  .babelrc      # General .babelrc
  components/
    i18n/
      .babelrc  # This .babelrc only applies to this directory

ファーストクラスのTypeScriptサポート[アイコン]

ユニバーサルwebpackについて発表した際、サーバーとクライアントの両方でwebpackを実行するようになったため、ts-loader[アイコン]を介してTypeScriptを使用できることを指摘しました。

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

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

Nextjs.org[アイコン]

Next.jsのコアコントリビューターであるJimmy Moon[アイコン]によって構築された新しいnextjs.org[アイコン]をご紹介します。

まず、サーバーレンダリングを使用してPWAをゼロから5分で作成する方法を示す高速化されたビデオをハイライトします。

`nextjs.org`[アイコン]のオープニングビデオ

ドキュメントのワンストップ[アイコン]

何かをすばやく検索する必要がある場合は、nextjs.org/docsにアクセスしてください。

ドキュメントは常に最新の安定バージョンを反映しています。

ステップバイステップで学ぶ[アイコン]

以前は、初心者にはステップバイステップガイド（クイズ付き！）を使用してNext.jsの学習を開始する方法について、https://learnnextjs.com[アイコン]にアクセスすることをお勧めしていました。

現在は、学習の開始をさらに容易にするために、nextjs.org/learn[アイコン]に直接統合しました。

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

インスピレーションを得る[アイコン]

現在、Next.jsで構築された魅力的なウェブサイトやアプリケーションのショーケースを掲載しています。nextjs.org/showcase[アイコン]にアクセスしてインスピレーションを得るか、独自のものを提出してください[アイコン]！

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