UniversalなReactフレームワークであるNext.jsがバージョン5.0をリリース

UniversalなReact.jsアプリケーション向けのオープンソースのツールキットであるNext.jsがバージョン5.0に達した。今回のリリースでは、Next.jsアプリケーションの設定に関する改善があった。そして、サーバーサイドのwebpackサポートが強化され、モジュール化された設定のためのプラグインシステムが追加された。また、洗練されたTypeScriptのサポート、Preactのような機能を提供するReactのalt-libに対するサポートの強化、Zonesと呼ばれるマルチアプリケーションの構成機能が追加されている。

Next.jsは最初のリリースからwebpackのカスタム設定をサポートしてきたが、最新のリリースではいくつかの大きな制限を克服した。バージョン5リリースの投稿で、Next.js開発者であるTim Neutkens氏とArunoda Susuripala氏が次のように説明している。

webpackはクライアント（ブラウザ）バンドルでのみ実行されるため、サーバーレンダリングのために、この素晴らしいツールチェーンを使用できることを忘れがちです。

webpackがUniversalに動作するようにコードベースを広範囲にリファクタリングしたことを発表できて幸せです。

ユーザ視点の変更点は、追加されたisServerプロパティがデコレータ関数に渡されるということのみである。しかし、その新しいセマンティクスは、webpackローダの幅広いエコシステムが利用できるようになったことを意味します。

この機能により、Next.jsの設定をより詳細に制御でき、その設定を簡単に管理することができる。Next.jsは設定用のプラグインシステムを作成し、共通の再利用可能なプラグインのオープンソースリポジトリをセットアップする。執筆時点では、利用可能なプラグインには、css、less、scssをインポートするための設定と、PreactあるいはTypeScriptを使用するためのプロジェクト設定が含まれていた。コミュニティはすでにGraphQLタグやwebpackバンドルアナライザのような機能を提供するプラグインの追加に、openなpullリクエストで着手している。

プラグインアーキテクチャは、洗練されたTypeScriptサポートをNext.js内で可能にするものである。シンプルな2行のコードで、Next.jsアプリケーションでTypeScriptを使用を開始できる。

const withTs = require('next-typescript');
module.exports = withTs({ /* additional config*/ })

Reactなどのブログの投稿で、Jorge氏は次のように返答した。

Next.jsは、有用な機能を提供するためにユーザの要求に応えるためことを継続しています。これは、TypeScriptがJavaScriptコミュニティーからどれだけ爆発的な人気を得ているかを示す一つの証です。入力機能を提供し、言語機能を追加するだけでなく、強力なデバッグとリファクタリング機能を提供しています。

TypeScriptはReactと相性がよいため、Next.js開発における開発体験が向上します。

Next.js 5.0には、「Zones」という機能も追加されている。マニュアルによると、複数のNext.jsアプリケーションを1つのアプリケーションにマージすることができる。

これは、マイクロサービスとまったく同じ概念であるが、フロントエンドアプリケーションにも当てはまります。

この機能はプロキシと組み合わせ、Reactの<Link>タグを使用することで、別々のアプリケーションをリンクすることができる。これによって、別々のアプリケーションをシームレスにインテグレーションできる。開発とデプロイを容易にするために、チームはmicroproxyというノードパッケージをリリースした。しかし、この機能はNGINXやHAProxyなどの従来のプロキシソリューションでもうまく機能する。