Next.js Function generateSitemaps

GenerateSitemaps function allows us to generate multiple sitemaps programmatically for our application. It is useful for large applications with many pages or products in which a single sitemap file may not be sufficient due to search engine limitations on sitemap size (ex, Google's limit is 50,000 URLs per sitemap).Using the generateSitemaps function you can create sitemaps based on your data and split them into manageable parts.

To generate a sitemap, you have to create a sitemap.js in your root app directory, and inside it, you can write the generateSitemaps function.

Syntax:

 export async function generateSitemaps() {
    // Fetch or calculate the total number of items and determine how many sitemaps are needed
    return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
    // Example IDs for sitemaps
}

export default async function sitemap({ id }) {
    // Dynamically generate sitemap content based on the id
    const BASE_URL = "http://localhost:3000";
    // Base URL of your application

    return [
        {
            url: `${BASE_URL}/page-${id}`,
            lastModified: new Date(),
        },
        // Add more URLs as needed
    ];
}

Steps to Create Next.js Application

Step 1: Create a Next.js application using the following command.

npx create-next-app@latest gfg

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? ... Yes 
√ Would you like to customize the default import alias (@/*)? ... Yes

Step 3: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Project Structure:

Example: The below example demonstrate to dynamically generate sitemap using a generateSitemaps function.

//File path: src/app/sitemap.js

export async function generateSitemaps() {

    // Fetch the total number of products and calculate the number of sitemaps needed
    return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}

export default async function sitemap({ id }) {

    const BASE_URL = "http://localhost:3000"

    return [{
        url: `${BASE_URL}/about`,
        lastModified: new Date()
    },
    {
        url: `${BASE_URL}/`,
        lastModified: new Date()
    }]
}

//File path: src/app/page.js

export default function Home() {
    return (
        <>
            <h1>Home Page</h1>
        </>
    );
}

//File path: src/app/about/page.js

export default function Page() {
    return (
        <>
            <h1>About Page</h1>
        </>
    )
}

Note: Make sure to remove css from globals.css file.

To run the Application open the terminal in the project folder and enter the following command:

npm run dev

Output: