Next.js 6 と Nextjs.org
2018年5月16日（水）
投稿者: Arunoda Susiripala @ arunoda、Tim Neutkens @ timneutkens
今年のZEIT Day基調講演では、Next.jsの指標を示すなど、私たちのオープンソースプロジェクトをハイライトすることから始まりました。GitHubで25,000以上のスターを獲得し、10,000以上のウェブサイトがすでにNext.jsで動作している中、その成長に驚いており、それに依存するプロジェクトの増加を見ることを嬉しく思っています。
本日、プロダクション対応のNext.js 6をご紹介できることを誇りに思います。主な機能は以下の通りです：
- ゼロ設定での静的エクスポート。デフォルトでnext.config.jsが不要
_app.js：ページ遷移、エラーバウンダリなどを可能にする拡張ポイント- Babel 7とFragment構文
<>のサポート
- セキュリティに重点を置いた拡張統合テストスイート
- コアコードベースでのFlow注釈
6.0リリースに加えて、Next.js専用のホームページnextjs.orgで機能を紹介します：
静的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では、<div>などの任意のHTML要素でラップすることなく要素のリストを表現できるFragment APIが導入されました：
render() {
return (
<React.Fragment>
<A />, <B />
</React.Fragment>
)
}
これを書くのは面倒な場合があります。Next.js 6では、新しいJSXフラグメント構文を使用してフラグメントの作成を簡単にできます：
render() {
return (
<>
<A />, <B />
</>
)
}
ネストされた.babelrc
Next.jsアプリケーション内にネストされたディレクトリがあり、異なるBabel設定が必要な場合、そのディレクトリ内に特別にスコープされた.babelrcファイルを含めることが可能になりました：
src/
.babelrc
components/
i18n/
.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/docsにアクセスしてください：
ドキュメントは常に最新の安定バージョンを反映します。
ステップバイステップで学習
以前は、初心者にはNext.jsの始め方に関するステップバイステップガイド（クイズ付き！）として https://learnnextjs.com をお勧めしていました。
現在、学習を開始しやすくするために、これをnextjs.org/learnに直接統合しました：
Next.jsを学び始める最も簡単な方法です。
インスピレーションを得る
Next.jsで構築された見栄えの良いウェブサイトやアプリケーションのショーケースを特集しています。インスピレーションを得るためにnextjs.org/showcaseにアクセスするか、あなた自身のプロジェクトを投稿してください！