Next.js 6 と Nextjs.org

今年の ZEIT Day Keynoteは、Next.jsのメトリクスを表示するなど、オープンソースプロジェクトを紹介することから始まりました。GitHubで25,000以上のスターを獲得し、10,000以上のウェブサイトがすでにNext.jsで動作しています。この成長には驚かされ、ますます多くのプロジェクトがNext.jsに依存しているのを見るのは嬉しいことです。

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

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

6.0リリースに加えて、Next.jsを独自のホームページであるnextjs.orgで紹介していきます。主な内容は以下の通りです。

Next.jsのドキュメントすべてを1か所に集約。READMEファイルをGitHubで探す必要はもうありません。
https://learnnextjs.comを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 Component

Next.jsは_document.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 (Source)

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

より良い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サポート

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

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

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

Nextjs.org

Next.jsコアコントリビューターであるJimmy Moonが構築した新しいnextjs.orgを紹介できることを大変嬉しく思います。

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

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

ドキュメントの1か所

何かを素早く調べたいときは、nextjs.org/docsにアクセスしてください。

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

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

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

学習をさらに容易にするために、それらをnextjs.org/learnに統合しました。nextjs.org/learn

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

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

Next.jsで構築された、見栄えの良いウェブサイトやアプリケーションのショーケースを掲載しています。インスピレーションを得るにはnextjs.org/showcaseにアクセスするか、ご自身で送信してください！

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