未経験からのNext.js『TypeScript』入門|Next.jsとは
概要
Next.js は、React のフレームワークであり、ハイブリッドアプリ・静的サイト・サーバーサイドレンダリングを提供します。
Next.js は、2017 年にオランダの会社 Vercel によって作成されました。React で作成されているフレームワークでは他にGatsbyがあげられますが、Next.js とは違い、静的サイトしか作れないのが難点でした。Next.js はサーバーサイドレンダリングを提供し、静的サイトにはない様々なメリットを受けることが可能です。
また非常に強い強みとして、Next.js で開発された Web アプリケーションは、「一度ビルドすればどこでも実行できる」という原則に基づいて作成されており、Next.js でビルドを通した実行コードで、モバイルアプリ・デスクトップアプリ・プログレッシブ Web アプリとして、ユーザーに提供できます。
Next.js が提供する機能
Next.js を導入することで、様々な機能を簡単に利用できます。
- 画像の最適化
最新の画像形式で提供し、遅延読み込みを行います。 - 国際化
国際化されたルーティングを提供します。 - 訪問者データの取得
訪問者のデータを取得し、サイトスコアを計算します。 - ゼロ構成
自動コンパイルを提供し、全ての機能は npx にバンドルされています。 - ハイブリッドアプリ・静的サイト・SSR(サーバーサイドレンダリング)を提供思案す。
- インクリメンタル静的構築
部分的な変更をしたとき、全体を再構築せずページごとに再構築します。 - Typescript サポート
静的型付けである TypeScript をサポートします。 - 高速リフレッシュ
- ファイルシステムルーティング
- API ルート
- 組み込みの CSS サポート
- コード分割とバンドル
Next.js を使用するメリット
- サーバサイドレンダリング
Next.js は、SSR(サーバーサイドレンダリング)のためクライアントのプラウザが JavaScript をロードしてコンテンツを表示するのを待つ必要がありません。よって高速なパフォーマンスをクライアントに提供します。しかし気を付けなければいけないの SSR の特性上 HTML のレンダリングをサーバー側で行うため、サーバーコストが他のレンダリング方法と比べコストがかかります。 - 強力な SEO
SSR(サーバーサイドレンダリング)のため、HTML はサーバー側で表示したい内容をレンダリングした後にクライアントに提供されます。そうした場合 SPA などのようにクライアントでレンダリングするのと違い動的にメタタグを設定することで SEO に対して最適化を行うことができます。 - 自動コード分割
Next.js で書かれたコードがクライアントに提供される際、アプリケーションコードは分割されて小さなバンドルとして提供されます。このバンドルは必要な処理に応じてクライアントに適切に読みこまれるため、不必要な処理を読み込むことがありません。そのため非常に高速で最適なパフォーマンスを期待できます。 - プリフェッチ
Next.js は軽量なバンドルをバックグランドで遅延読み込みします。
そのためクライアントが体感する読み込み速度を軽量化できます。 - ホットリロード
Next.js のコードが変更されるとをそれを検知して、自動的にページを再読み込みします。 - どこにでもデプロイできる
「一度ビルドすればどこでも実行できる」という原則に基づいて、Next.js アプリケーションはどのようなアプリケーションでも構築でき様々な用途に使えます。
Next.js を使用するデメリット
- 静的サイトを作る場合、Next.js でも問題ないことがありますがオプションを数は Gatsby のほうが多く、小規模なプロジェクトでは Next.js は向かない場合があります。
- Next.js のパフォーマンスは、ほとんどの場合 Gatsby や Nuxt より劣っています。
- Next.js は、API は提供しません。バックエンドサーバーが必要になります。
最後に
React でアプリケーション開発をするとき、多くの場合が Next.js を使用するのがいいです。書き方は React を踏襲できるので学習コストは低く済みます。
ただし、Nuxt のように API も一緒に提供してくれるわけではないので、バックエンドサーバーの学習を進める必要があります。
少しでもメリットを感じたら、Next.js を使ってみましょう。