Universal Windows PlatformアプリはWin32機能を追いかける

ユニバーサルReact.jsアプリケーションのオープンソースツールキットであるNext.jsのバージョン5.0がリリースされた。このリリースでは、Next.jsアプリケーションの設定性が向上し、改善されたサーバーサイドwebpackサポート、モジュール化された構成のプラグインシステムが追加された。また、ファーストクラスのTypeScriptサポート、PreactのようなReact altライブラリサポートの改善、Zonesと呼ばれる複数アプリケーションの構成機能が追加されている。

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

Webpackはクライアント（ブラウザ）バンドルのみで実行されるため、サーバーレンダリングにこの素晴らしいツールチェーンを使う可能性を忘れてしまいます。

私たちは、Webpack作業を普遍的にするために、広範囲にコードベースをリファクタリングしたことを発表しました。

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

この機能により、Next.jsの構成をさらに制御できるようになり、Next.jsを構成するシンプルな方法を提供するために、構成のプラグインシステムを構成しており、共通の再利用可能なプラグインのオープンソースリポジトリを設定した。執筆時点では、css, less, scssをインポートするための設定と、PreactとTypeScriptを使ったプロジェクトの設定ができるプラグインが提供されている。 コミュニティはすでにオープンプルリクエストでGraphQL tagsとwebpack bundle analyzerのようなプラグインの機能を追加している。

プラグインアーキテクチャは、Next.jsでファーストクラスTypeScriptサポートが有効になっており、Next.jsアプリケーションでTypeScriptをつかったシンプルなコードの行のみで The plugin architecture is what enables first class TypeScript support in Next.js, making it take only two simple lines of code to begin using TypeScript in Next.js applications:

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

In a post on the React etc blog, Jorgé reacted:

Next.js is continuing on the path of responding to users' request to provide useful features. This is yet another testament to how TypeScript is taking JavaScript community by storm. Not only by offering typing and additional language features, but super powerful debugging and refactoring capabilities.

As TypeScript plays great with React, this will provide an improved development experience for Next.js development.

Next.js 5.0 also adds a feature called ‘Zones’, which according to the documentation allows the merging of multiple Next.js applications into a single application:

This is exactly the same concept as microservices, but for frontend apps.

The feature combines with a proxy and allows you to use React <Link> tags that link separate applications, creating a seamless integration across what would otherwise be separate applications. To facilitate easy development and deployment, the team has released a node package called microproxy, but the feature also plays nicely with traditional proxy solutions like NGINX and HAProxy.