How to Create a Sitemap for a Next.js Website Using the App Router

Introduction

Creating a sitemap for a Next.js website, especially when incorporating dynamic content such as Strapi API, significantly boosts your website's SEO. This guide will detail the process of building and integrating a sitemap into your Next.js website, ensuring your content is efficiently indexed by search engines.

Understanding Sitemaps in Next.js

A sitemap is an XML file that lists important pages of your site, helping search engines to crawl it more effectively. In the context of Next.js, where content is often dynamically generated, sitemaps play a crucial role in ensuring all pages are discovered and indexed.

Setting Up Next.js and Strapi

The first step involves setting up your Next.js environment and integrating Strapi as your backend. This setup is essential for managing dynamic content and ensuring seamless integration with your sitemap.

Creating the Sitemap.ts File

The creation of the sitemap.ts file in your project’s root is a critical step. Here’s a breakdown of the code and its functions:

1. Initial Setup: Import necessary modules and define your base URL.

   import { TPost } from "@/lib/types";
   import { getPosts } from "@/services";
   import { MetadataRoute } from "next";
   
   const BASE_URL = process.env.SITE_URL || "https://therobin.dev";
   

2. Structure your data properly: Return the data as per the Sitemap Return Type defined by Next.js to get your sitemap data correctly.

   type Sitemap = Array<{
     url: string,
     lastModified?: string | Date,
     changeFrequency?: 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never',
     priority?: number
   }>;
   

3. Static Pages Array: List the static pages of your website with relevant details.

   const pages: MetadataRoute.Sitemap = [
        {
            url: BASE_URL,
            lastModified: new Date(),
            changeFrequency: "yearly",
            priority: 1,
        },
        /* ... other static pages */
    ]
   

Adding Dynamic Content from Strapi

This section involves fetching dynamic content from Strapi and integrating it into your sitemap:

1. Fetching Blog Posts: Use getPosts to retrieve blog posts from Strapi and map them into your sitemap format.

   const getBlogPosts = async () => {
       const allPosts = await getPosts();
       return allPosts.data.posts.data.map((post: TPost) => ({
            url: `${BASE_URL}/blog/${post.attributes.slug}`,
            lastModified: post.attributes.updatedAt,
            changeFrequency: "weekly",
            priority: 0.8,
        }));
   };
   

2. Combining Content: Merge static pages with dynamically fetched blog posts to create a comprehensive sitemap.

   const sitemap = async (): Promise<MetadataRoute.Sitemap>=> {
       const posts = await getBlogPosts();
       return [...pages, ...posts];
   };
   

Testing and Launching the Sitemap

After crafting your sitemap, test it to ensure all links are functional. Deploy the sitemap to your server and keep it updated to reflect new content additions.

Conclusion

Integrating a sitemap into your Next.js website, particularly when using Strapi for content management, is a strategic step toward enhancing your SEO. This guide provides a clear roadmap for creating a sitemap, ensuring your website's content is easily discoverable by search engines.