【初心者向け】Next.jsで高速でSEOに強いWebアプリケーションを構築

はじめに

この記事では、近年、モダンフロントエンド開発において最も人気の高いVercel社が提供しているオープンソースのWebアプリケーションフレームである、「Next.js」について解説します。ウェブサイトの可用性と効率性を高めるためには、Next.jsの理解と適切なフレームワークや技術選択が重要です。

Next.jsとは

Next.jsは、Vercel社が開発したReactのフレームワークです。Reactのフレームワークとは、Reactの機能を拡張したり、開発を効率化したりするためのものです。Next.jsは、Reactのフレームワークの中でも特に人気が高く、多くのWebアプリケーションの開発に利用されています。

Next.jsでは画像のレンダリング(画像や映像、テキスト)を最適化してくれます。画像を最適化するメリットは、ページの読み込み速度が高速になることです。読み込み速度の高速化はSEO対策にも効果的です。

Next.jsの特徴

Next.jsの特徴は大きく分けて4つあります。

1.プレレンダリング

プレレンダリングとは、事前にHTMLを生成し、レンダリングすることを言います。 Next.jsの元となっているReactではレンダリングはユーザーのページアクセス時に行われます。 しかし、プレレンダリングしてあるページであれば事前に生成しているHTMLファイルを出力するため、 表示速度が速くなります。

2.SEOに対するポジティブな影響をもたらす。

Next.jsではプレレンダリング方式により事前にHTMLを生成していることで クローラーにサイトの内容をすべて見せることが可能になります。 そのため、SEO対策にとても有効です。

3.二種類のプレレンダリング方式(SSG,SSR)

Next.jsにはSSGとSSRの二種類のプレレンダリング方式があります。 どちらにもメリット、デメリットがありますので、目的とするサイトの用途によってうまく使い分けましょう。

1. SSGとは

   SSGとはStatic Site Generatorの略称で日本語では静的生成です。ユーザーからアクセスする前に、あらかじめ静的なHTMLファイルを生成しておき、ユーザーからのリクエストの際にHTMLファイルを返すレンダリング方式です。事前に生成してあるため、表示速度が速く、セキュリティ上のリスクも低いとされています。 なお、Next.js公式ではSSGの使用を推奨しております。

   SSGはビルド後に変更を行わないページで主に使われています。 使用例：

   • ブログの記事
   • Q&A、お問い合わせページ
   • 一覧画面

2. SSRとは

   SSRとはServer Side Renderingの略称です。クライアント側でレンダリングするのではなく、サーバー側でレンダリングします。 リクエストを受けたサーバーが必要なデーターを取得した後にHTMLを生成し、クライアントに返却します。 ユーザー側のパソコンのスペックに左右されずにページを最速で表示することが可能になります。

SSGとSSRどちらを選べばいい？

ブログやコーポレートサイトなどの静的なコンテンツを扱うサイトでは、SSGが適しています。SSGを利用することで、ページの読み込み速度を向上させ、SEO対策の効果を高めることができます。

ウェブアプリケーションなどの動的コンテンツを扱うサイトでは、SSRが適しています。SSRを利用することで、ユーザー側のパソコンのスペックに左右されずにページを最速で表示することができます。

また、SSGとSSRを組み合わせて利用する方法もあります。例えば、ブログのトップページやカテゴリページなどはSSGで生成し、記事ページなどはSSRで生成することで、両方のメリットを享受することができます。

Next.js開発のステップ

1. Next.jsのインストール方法

Next.jsをインストールする前にNode.jsが必要なため公式サイトからダウンロードしましょう。

Latest LTS Version: 20.11.0

2.create-next-appをインストールしよう

ターミナルでインストールコマンドを入力

npm install -g create-next-app

インストール終了後、下記のコマンドを入力して、バージョンを表示されれば成功です。

create-next-app --version

3. プロジェクトのひな形を作成する

cdコマンドでプロジェクトを作成したいディレクトリに移動し、下記コマンドでプロジェクトのひな形を作成しましょう。

npx create-next-app プロジェクト名

create-next-appとは？

create-next-appは、Next.jsのプロジェクトを簡単に作成するためのコマンドラインツールです。npmやyarnなどのパッケージマネージャーを使ってインストールすることができます。

create-next-appコマンドを実行すると、Next.jsのプロジェクトのひな形が作成されます。ひな形には、以下のファイルやフォルダが含まれています。

• package.json：npmパッケージの管理を行うファイル
• next.config.js：Next.jsの設定を行うファイル
• pages：ページのソースコードが格納されるフォルダ
• public：静的ファイルが格納されるフォルダ

create-next-appコマンドを実行する際、プロジェクト名を指定することができます。プロジェクト名を指定すると、作成されるプロジェクトのディレクトリ名と、ブラウザでアクセスする際に使用するURLのホスト名になります。

4. サーバーを立ち上げよう

下記コマンドでサーバーを立ち上げることができます。

npm run dev

このコマンドはローカルでサーバーを立ち上げる際のコマンドです。よく使うので覚えましょう。

5. サーバーにアクセスしましょう

http://localhost:3000にアクセスができたら完了です。

まとめ

Next.jsは、高速なページの読み込みとSEO対策に優れた、モダンフロントエンド開発に欠かせないフレームワークです。

特徴

• プレレンダリングにより、ページの読み込み速度を大幅に向上させます。
• 生成されたHTMLは検索エンジンにより容易にクロールされ、SEOに非常に有効です。
• SSGとSSRの両方を提供し、プロジェクトのニーズに応じて最適なレンダリング方法を選べます。

活用シーン

• ブログ
• コーポレートサイト
• ウェブアプリケーション
• SEOを重視するサイト

Next.jsは、さまざまなニーズに対応できる柔軟なフレームワークです。Web開発において、より速く、より効果的なウェブサイトやアプリケーションを構築したい場合に、ぜひ検討してみてください。