Next.js 6とNextjs.org

今年、ZEIT Day Keynoteは、Next.jsのメトリクスを含むオープンソースプロジェクトの紹介から始まりました。GitHubで25000以上のスターを獲得し、10000以上のウェブサイトがすでにNext.jsを基盤として動作していることに、その成長と、これに依存するプロジェクトの増加を目の当たりにして、私たちは非常に驚き、喜んでいます。

本日、製品版**Next.js 6**を発表できることを誇りに思います。主な機能は以下の通りです。

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

6.0のリリースに加え、Next.js専用のホームページnextjs.orgでNext.jsを紹介することになりました。主な機能は以下の通りです。

すべてのNext.jsドキュメントを1か所にまとめました。GitHubでREADMEファイルを探す必要はもうありません。
https://learnnextjs.comをhttps://nextjs.dokyumento.jp/learnに統合
Next.jsで構築された最も印象的なウェブサイトのショーケース

静的Reactアプリケーション

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

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

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

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

next build
next export

例として、Vercelに静的にデプロイされたこちらのウェブサイトをご覧ください。ウェブサイトのソースコードも利用可能です。

アプリケーションコンポーネント

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

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

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

ファーストクラスのTypeScriptサポート

ユニバーサルwebpackを発表した際、私たちはts-loaderを介してTypeScriptを使用できることを指摘しました。これは、現在webpackをサーバーとクライアントの両方で実行しているためです。

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

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

Nextjs.org

Next.jsのコアコントリビューターであるジミー・ムーン氏が構築した新しい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で構築されたプロジェクトのショーケース