BT

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

| 作者: David Iffland フォローする 4 人のフォロワー , 翻訳者 笹井 崇司 フォローする 0 人のフォロワー 投稿日 2016年11月10日. 推定読書時間: 2 分 |

原文(投稿日:2016/10/31)へのリンク

新しい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に公開されている。

 
 

Rate this Article

Relevance
Style
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション

InfoQにログインし新機能を利用する


パスワードを忘れた方はこちらへ

Follow

お気に入りのトピックや著者をフォローする

業界やサイト内で一番重要な見出しを閲覧する

Like

より多いシグナル、より少ないノイズ

お気に入りのトピックと著者を選択して自分のフィードを作る

Notifications

最新情報をすぐ手に入れるようにしよう

通知設定をして、お気に入りコンテンツを見逃さないようにしよう!

BT