Next.js は、最近オープンソース化された人気の React SSR（React サーバーサイドレンダリングフレームワーク）です。SEO フレンドリーで最小限の設定でアプリケーションを構築できます。
サーバーサイドレンダリングにより、クライアントに返す前に SEO メタタグをサーバー側で割り当てることができます。
これにより、検索エンジンは JavaScript を実行することなくデータをクロールできます。これは、ブログやニュースサイトに特に適しています。
また、サーバー側でレンダリングされるアプリケーション向けの汎用 JavaScript フレームワークでもあります。React 上に最小限の API サーフェスを提供することで、アプリやウェブサイトの開発をより快適で簡単なものにします。
Next.jsの起源
Next.js フレームワークは、ZEIT という組織によってサポートされています。2016年10月25日にオープンソース化されました。React、Bable、Webpack をベースに構築されています。
ZEIT はブログで、現在自社のサイトが Next.js で稼働していることを述べています。
next.js は、2016年10月25日にオープンソース化された際に初めてリリースされました。その後すぐに、2017年3月27日に Next.js 2.0 がリリースされ、その後もバージョンがリリースされてきました。
最新バージョンは Next.js 5.0 です。
Next.js は多くの開発者に人気があり、Typescript も同様です。そのため、最終的にはこれらを併用する人も出てくるでしょう。そして、それは既に起こりつつあると言えるでしょう。
Typescript とは何でしょうか?
Typescriptは、Microsoftによって開発・保守されているプログラミング言語です。Typescriptもオープンソースであり、構文的に厳密なJavaScriptのスーパーセットです。
では、next.jsとTypescriptを併用するにはどのような選択肢があるのでしょうか？まず思いつくのは、ZEITの公式パッケージ next-typescript を使うことです。これはts-loaderを使用しており、問題なく動作します。
しかし、awesome-typescript-loaderという選択肢もあります。これを使用する主な理由はパフォーマンス最適化ですが、Babelとの統合や型チェッカーを別プロセスで実行できることも理由の一つです。
Next.js の機能の一部を以下に示します。
- デフォルトでサーバーサイドレンダリングされます。
- コード分割により、ページの読み込みが高速化されます。
- クライアントサイドのルーティングはページベースでシンプルです。
- 設定は一切不要です。ファイルシステムはAPIとして使用されます。
- 導入も比較的シンプルです。
Next.Js アプリケーション
Next.jsは現在、データベースや人工知能など、様々な分野で利用されています。以下に、その応用例の一部をご紹介します。
- エルトン・ジョンの個人サイト eltonjohn.com では、現在彼の最後のツアー「farewell-yellow brick road」が紹介されており、Next.js 上で運営されています。
- IOTA は、トランザクションを可能にするデータプラットフォーム data.iota.org に Next.js を採用しています。
- コンテナ化の専門企業として知られる Docker は、カスタマーサポートポータル success.docker.com を開発しました。
- 拡張現実 (AR) 空間分野のスタートアップ企業 Magic Leap は、この人気フレームワークを自社のウェブサイト magicleap.com に採用しています。
- Node.js のデフォルトパッケージ管理ツールである NPM の検索ツール npmjs.com/search も Next.js を採用しています。
このフレームワークは数か月で消え去るものではなく、今後も存続するものであることは明らかです。
