BT

Ready for InfoQ 3.0? Try the new design and let us know what you think!

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

| 作者: Kevin Ball フォローする 3 人のフォロワー , 翻訳者 編集部T フォローする 1 人のフォロワー 投稿日 2018年3月12日. 推定読書時間: 3 分 |

原文(投稿日:2018/02/09)へのリンク

読者の皆様へ:お客様のご要望に応じて、重要なものを逃すことなく、ノイズを低減できる一連の機能を開発しました。興味のあるトピックを選択して、電子メールとWeb通知を入手してください

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などの従来のプロキシソリューションでもうまく機能する。

Rate this Article

Adoption Stage
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でリプライする

ディスカッション
BT