App router: get params in the generateSitemaps function from dynamic page /[locale]/sitemap.xml

[mnaeem99]

What is the improvement or update you wish to see?

I would like to generateSitemaps for each locale dyamic page but function have no way to get params.

I have tried useParams from 'next/navigation' but these are not accessible in server component as a client component

Is there any context that might help us understand?

//'use client'
//import { useParams } from 'next/navigation'
import { gql } from "@apollo/client";
import { client } from "../../../apollo-client";


 
export default async function sitemap({params}) {
  // const params = useParams()
  // console.log("params");
  // console.log(params.locale);
  // const params = 'en-PK'
  let [languageCode, countryCode] = params.locale.split('-');
  console.log(languageCode, countryCode);
  const cities = await getCities(languageCode, countryCode);
  return cities.data?.citySitemaps?.content?.map((city) => ({
      url: `https://www.grumpeat.com/${languageCode}/${city.countryName?.replace(/%20|\s/g, '_')}/${city.cityName?.replace(/%20|\s/g, '_')}`,
      lastModified: new Date(city.lastModified).toISOString(),
  }));
}

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/app/api-reference/functions/generate-sitemaps

[diego-lipinski-de-castro]

Have you found a way to do this?

[JannikZed]

we urgently need this as well.. in our case, we are using the multi-domain setup / multi-tenant setup, that Vercel describes here: https://vercel.com/guides/nextjs-multi-tenant-application
so obviously, you will need to consume the params to get the current, statically optimised domain you are rendering. Why isn't this working?

export async function generateSitemaps({params}) {
    console.log('Generating sitemaps function', params)
    return [{ id: 0 }]
}

[JannikZed]

we fixed this by accessing headers in the function. That does work..

[jonas-tm]

Thanks for the tip had exactly the same problem today.

For any one else looking for a quick fix:

import type { MetadataRoute } from 'next'
import { headers } from 'next/headers'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
    const headersList = headers()
    const host = headersList.get('host')
    // ...
}

[jjnr-vo]

Not sure if it's worth mentioning here but for a case I encountered, it was a matter of trying to collect the dynamic router param. Unfortunately since NextJS does not provide those params as a prop for the sitemap, I made use of this solution but I looked at the 'x-current-path' instead of 'host'

[LebedMaksym]

Maybe my workaround can help you guys
In my case I needed to create separate files for each locale like sitemap-en.xml, sitemap-fr.xml, etc...

Here is my project app folder structure

then in next.config.js you can use rewrites function like:

  rewrites: async () => {
    return {
      beforeFiles: [
        {
          source: "/sitemap-en.xml",
          destination: "/sitemaps/en/sitemap.xml",
        },
        {
          source: "/sitemap-fr.xml",
          destination: "/sitemaps/fr/sitemap.xml",
        },
        // FOR YOUR CASE
        {
          source: "/tr/some-url/sitemap-tr.xml",
          destination: "/sitemaps/tr/sitemap.xml",
        },
      ],
    };
  },