Next.js アプリで「next-sitemap」をインストールして使用する方法: ステップバイステップ ガイド

Next.js を使用して Web サイトを構築している場合は、検索エンジンがページを効率的に検出してインデックスを作成できるようにする必要があるでしょう。このプロセスを改善する 1 つの方法は、サイトマップを作成することです。サイトマップは、Web サイト上のすべての URL をリストしたファイルで、Google などの検索エンジンがサイトをより速くクロールしてインデックスを作成するのに役立ちます。

このガイドでは、Next.js プロジェクトに next-sitemap をインストールして構成する方法を説明します。また、サイトマップの利点についても説明し、その仕組みを説明するために「Hello World」Next.js アプリのサンプル コードを含めます。

next-sitemap を使用するメリット

インストールプロセスに入る前に、next-sitemap を使用する主な利点について簡単に説明します。

1. SEO の改善: 適切に構造化されたサイトマップにより、Google などの検索エンジンがページをより効率的に検出できるようになり、インデックスの作成が向上し、検索ランキングが向上する可能性があります。

2. クロールの高速化: 検索エンジンに Web サイトのロードマップを提供することで、検索エンジンがページをより速くクロールしてインデックスを作成できるようになります。

3. 動的ルートの処理: 動的ルートを持つ Web サイトの場合、next-sitemap を使用すると動的コンテンツの URL を簡単に生成でき、すべてのページが確実に検出可能になります。

4. カスタム サイトマップ: next-sitemap を使用すると、優先度の設定、変更頻度、特定のページの除外などのオプションを使用してサイトマップをカスタマイズできます。

ステップ 1: 次のサイトマップをインストールする

始めるには、Next.js プロジェクトに next-sitemap パッケージをインストールする必要があります。ターミナルで次のコマンドを実行します:

npm install next-sitemap

または、Yarn を使用している場合:

yarn add next-sitemap

ステップ 2: next-sitemap.js 構成ファイルを作成する

パッケージをインストールした後の次のステップは、プロジェクトのルートに next-sitemap.config.js という名前の構成ファイルを作成することです。このファイルには、サイトマップを生成するための設定が含まれます。

基本的な構成は次のとおりです:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

上記のコードでは、siteUrl を使用してサイトのベース URL を指定しています。 generateRobotsTxt オプションはサイトマップと一緒に robots.txt ファイルを生成し、sitemapSize は各サイトマップ ファイルに含める URL の数を決定します。

ステップ 3: サイトマップ スクリプトを使用して package.json を更新する

ここで、プロジェクトをビルドするたびにサイトマップを生成するスクリプトを package.json ファイルに追加する必要があります。

その方法は次のとおりです:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

これにより、各ビルド後に、設定に基づいてサイトマップが自動的に生成されます。

ステップ 4: サイトマップを構築して生成する

すべての設定が完了したので、次のコマンドを実行してプロジェクトをビルドし、サイトマップを生成します。

npm run build

または糸を使って:

yarn build

ビルドが完了すると、sitemap.xml ファイル (およびオプションで robots.txt ファイル) がプロジェクトの public/ フォルダーに生成されます。これらのファイルには Next.js アプリのすべての URL が含まれており、検索エンジンによってクロールされる準備ができています。

例: next-sitemap を使用した「Hello World」Next.js アプリ

next-sitemap がどのように機能するかを示すために、単純な「Hello World」Next.js アプリを作成してみましょう。基本的な Next.js ページは次のとおりです:

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Hello World</h1>
      <p>Welcome to my Next.js app!</p>
    </div>
  );
}

次に、next-sitemap.config.js を次のように設定します。

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

次に、package.json に以下を追加します。

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

npm run build を実行すると、public/ ディレクトリにサイトマップが表示され、「Hello World」ホームページの URL が含まれます。

ライブデモ

私のウェブサイト https://rajeshkumaryadav.com は、ビルド プロセスでサイトマップを自動生成するためにこのパッケージを使用しています。以下は sitemap.xml

を含む robot.txt です。

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

結論

このガイドで説明されている手順に従うことで、next-sitemap が Next.js プロジェクトに統合されました。このツールは、サイトマップと robots.txt ファイルを生成する簡単な方法を提供します。これにより、Web サイトの SEO が大幅に向上し、検索エンジンがすべてのコンテンツを効率的に検出できるようになります。

この設定により、Next.js アプリをより検索エンジンに適したものにし、インデックスをより適切に作成する準備が整っています!

以上がNext.js アプリで「next-sitemap」をインストールして使用する方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。