Next.js: ReactベースのシンプルなUniversal JavaScriptフレームワーク

新しいUniversal JavaScriptフレームワーク、Next.jsがオープンソース化された。これはReactおよびサーバーベースのWebアプリに、もうひとつの選択肢をもたらすものだ。

Zeitのチームは、Reactの基盤とそのコンポーネントモデルをベースに、重要な拡張を加えることで、Next.jsを作った。getInitialProps()というコンポーネントライフサイクルフックを使うことで、最初のレンダリングをサーバーで実行し、必要に応じてクライアントでレンダリングを続けることができる。だが、この先進的な機能は「小さいけれども非常に有能なフレームワーク」のボーナスのようなものだ。

Next.jsを使うことで、少なくとも、新しいWebアプリを動かす簡単な方法を手に入れることができる。あなたはもう大量のツールをセットアップする必要はない。create-react-appのように、このフレームワークをインストールすることで、React、Webpack、Babelで構築されたビルドプロセスがセットアップされる。Reactコンポーネントを書いたことのある開発者であれば、各ページにrender関数を用意するReactの構文に基づいて、ページを生成することができる。

import React from 'react'
export default () => <div>Hello world!</div>

Next.jsはファイルシステムをAPIとして利用し、pagesフォルダに置かれたコンポーネントをサーバーベースのrouteに自動的にマッピングする。たとえば、ディスク上にpages/about.jsというコンポーネントがあると、/aboutというURLで公開される。

Express上に構築されたビューエンジンであるexpress-react-viewsなどとは異なり、Next.jsはトップレベルサーバーであり、JavaScript関数の結果だけをレンダリングする。そのため、スタンドアロンのCSSファイルではなく、glamorを使ってCSSを処理する。

Next.jsのrouteはすべて、React.Componentから拡張した関数やクラスをexportする単なるES6モジュールです。

このNext.jsの頑固さにはいくつかのメリットがある。ひとつはWebpackやBabelの設定に時間をかけなくて済むことだ。開発者はこの2つのステップのために何時間も無駄にしてきた。サイトの開発バージョンを動かしたければ、npm run devを実行すればよい。

Universal JavaScriptはまだ一部の開発チームのための先進的なテクニックにすぎず、いろいろなフレームワークが独自のやり方で実装している。Angular 2にはUniversal Angular 2が、EmberにはFastbootがある。Reactの世界も、WalmartのElectrodeやRedfinのReact Serverなど、選択肢にあふれている。今のところ、Next.jsはさまざまなポテンシャルを持つシンプルな選択肢だ。プロジェクトはGitHubに公開されている。