読み込みに時間がかかるサイトは、訪問者にとってもGoogleにとっても不快です。読み込み速度は検索結果のランクを決定するのに役立ち、結果としてサイトに訪れる訪問者の数に影響します。訪問者が少なければ少ないほど、収益は低くなります。
Next.jsのようなJavaScriptフレームワークは、Webサイトの速度を向上させ、ユーザーに最高のエクスペリエンスを提供するのに役立ちます。Next.jsには、高速なWebサイトを作成するための最良のオプションとなる多くの機能があります。
Next.jsとは?
Next.jsは、Node.jsで構築されたオープンソースのフレームワークで、サーバー上でレンダリングできるReactアプリケーションを作成できます。高速でSEOに優しいReactアプリを構築するために必要な、すぐに使えるツールと設定を提供します。
静的ページ、Eコマースアプリケーション、APIからデータを取得するなど、Next.jsは役立ちます。わずか数行のコードから、ほとんど設定することなく、本格的なアプリケーションを作成できます。
これがNext.jsの主な利点です。インストールすると、すぐに高速で実稼働環境に適したアプリケーションを作成できます。
Next.jsを使用する利点
以下は、Next.jsを使用する利点の一部です。
学習曲線が緩やか
Next.jsはReactのラッパーであるため、Reactのコード構文を拡張しています。そのため、React開発者は非常に簡単に習得できます。また、Reactと同様に、Next.jsには、新しいNextアプリを素早く作成するために実行できるcreate-next-appコマンドがあります。
ターミナルで次のコマンドを実行すると、Next.jsが必要なパッケージをインストールし、開始するために必要なファイルを作成します。
npx create-next-app your-next-app-name
プリレンダリング
React、Angular、VueなどのJavaScriptフレームワークは、クライアントサイドレンダリングを普及させました。これは、サーバーがHTMLシェルとJavaScriptバンドルを送信するレンダリング方法です。その後、そのコードがブラウザで実行され、ハイドレーションと呼ばれるプロセスでドキュメントが更新されます。
レンダリングはユーザーのデバイスで行われるため、CSRアプリケーションは遅くなる可能性があります。Next.jsは、プリレンダリングによってソリューションを提供します。クライアント側でUIを構築する代わりに、Next.jsはサーバー上で事前に構築します。
プリレンダリングには2種類あります。
- サーバーサイドレンダリング(SSR)
- 静的サイト生成(SSG)
SSRでは、サーバーはHTMLを構築し、すべての動的コンテンツを取得してブラウザに送信します。サーバーは受信リクエストごとにこれを行います。そのため、SSRは常に変化するデータに最適です。
SSRページは、アプリケーションがサーバーから取得する必要があるデータ量とサーバーのパフォーマンスレベルによって遅くなる可能性があります。Next.jsのgetServerSideProps()を使用すると、SSRを必要とするページにのみSSRを使用できます。
SSGでは、アプリケーションはビルド時にすべてのデータをプリフェッチします。その後、HTMLページを生成し、複数のリクエストに応答します。サーバーがすべてのページを生成すると、CDNがキャッシュして配信できるため、非常に高速です。
そのため、SSGはランディングページなどの静的ページに最適です。APIからデータを使用する静的ページの場合、Next.jsを使用すると、getStaticProps()を使用してビルド時にデータを取得できます。
これらのレンダリング方法には両方とも利点があります。使用例に応じて、Next.jsを使用すると、ページごとにそれらを混在して使用できます。
組み込みルーティング
Next.jsは、ファイルベースのルーティングシステムを使用しています。サーバーは、Pagesフォルダーに保存されているすべてのファイルを自動的にルートに変換します。これは、Reactルーターをインストールして設定する必要があるReactアプリケーションとは異なります。
さらに、Reactはコンポーネントによるクライアントサイドルーティングをサポートしています。また、ビューポート内にあるリンクのページをプリフェッチします。これは、SSGを使用するページのみですが、それでもこの機能により、あるページから別のページに移動する速度が非常に速くなります。
自動コード分割
コード分割とは、バンドルファイルをオンデマンドで遅延読み込みできるチャンクに分割することを指します。Next.jsは、コード分割を自動的に処理します。Next.jsは、Pagesフォルダー内の各ファイルを自動的に独自のバンドルに分割します。さらに、ページ間で共有されるコードは1つにバンドルされて、同じコードをダウンロードするのを防ぎます。
コード分割は、ブラウザが少量のデータのみをダウンロードする必要があるため、初期の読み込み時間を短縮します。
組み込みの画像最適化
重い画像は、サイトの速度を低下させ、Googleのランキングを下げる可能性があります。Next.jsを使用すると、imageコンポーネントを使用して画像を自動的に最適化できます。
import Image from 'next/image'
このコンポーネントは、ブラウザがサポートしている場合は、適切なサイズの画像とwebpなどの最新の形式を提供します。画像は、ユーザーがスクロールして表示するまで読み込まれません。これにより、ページの速度が最適化され、ユーザーのデバイスのスペースが節約されます。
組み込みのCSSサポート
Next.jsは、CSSモジュールとSassをすぐにサポートしています。余分な時間を費やして設定する必要はなく、CSSスタイルを直接記述できます。Next.jsには、コンポーネント内にCSSを直接記述できるstyled-jsxも付属しています。
成長するコミュニティ
Next.jsはReactで構築されているため、非常に急速に人気が高まっています。そのため、行き詰まった場合に喜んで支援してくれる開発者のコミュニティが成長しています。これと優れたドキュメントを組み合わせることで、初心者でもNext.jsを簡単に使い始めることができます。
Next.jsを使用するべきなのはいつ?
Next.jsの最も優れた点の1つは、そのレンダリングオプションです。CSR、SSR、SSGに縛られることはなく、どのページをサーバー側でレンダリングするか、クライアント側でレンダリングするか、完全に静的にするかを選択できます。
このため、アプリケーションの各ページのレンダリング方法を、そのニーズに合わせてカスタマイズできます。たとえば、常に変化するデータに依存するページをSSRを使用してレンダリングし、ログインページなどの静的ページをSSGを使用してレンダリングできます。
Next.jsには、すぐに機能を追加できるようにする多くの組み込み機能と追加設定が用意されています。アプリのルートの設定、画像の最適化、バンドルファイルの分割を心配する必要はありません。すべてが完了しています。
動的コンテンツを使用するReactアプリケーションを作成し、設定に時間をかけることなく、パッケージをインストールしたり、アプリケーションを高速に構成したりしたくない場合は、Next.jsが最適なソリューションです。ただし、静的なシングルページアプリを作成する場合は、従来のReactでも十分です。
Reactでアプリケーションを構築する
Next.jsには、高性能なReactアプリケーションを構築するための最適化機能とツールが組み込まれています。
これらの機能を実際に使用してみたいが、どこから始めればよいかわからない場合は、まずReactアプリケーションの構築方法を学びましょう。コード構文はほぼ同じなので、Next.jsを学ぶ方がよいでしょう。
コメントする