Next.js App router sitemap won't build if called sitemap but builds if called something else

Developing with Prismic
,
1

Hi I've built out a sitemap generator for the app router using the filename sitemap.tsx.

When I do a local build Next.js tries to render the page but returns this error

Error occurred prerendering page "/sitemap.xml". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Prismic repository not found. Check that "https://[removed repo].cdn.prismic.io/api/v2" is pointing to the correct repository.

The repo is current and running.

However if I rename the file to something else like 'sitemap-data.ts' Next.js renders it at build time no problems - but obviously because it's not called sitemap it doesn't generate a sitemap.xml file.

Additionally if I access the page at runtime in dev mode with the filename sitemap.ts and the requesting url being sitemap.xml it runs fine. It's like Next.js is not fetching correctly at build time for the sitemap.ts file or is failing on fetch... it's got me stumped.

Am using the latest stable everything on Next.js and Prismic.

Code below have removed website and repo names. this file sits directly under the app folder.

'use server'

import { createClient } from "@/prismicio";

const URL = "https://www.[website_url].com";

export default async function site() {

    const client = createClient();
    
    const page = await client.getAllByType("page");
    const pages = page.map((page) => ({
        url: `${URL}/${page.uid}`,
        lastModified: page.last_publication_date,
    }));

    const solution = await client.getAllByType("solution");
    const solutions = solution.map((solution) => ({
        url: `${URL}/solutions/${solution.uid}`,
        lastModified: solution.last_publication_date,
    }));


    const article = await client.getAllByType("article");
    const articles = article.map((article) => ({
        url: `${URL}/news-views/${article.uid}`,
        lastModified: article.last_publication_date,
    }));

    const project = await client.getSingle("project_template") as any;
    const projects = project.data.project_data.data.map((code: any) => ({
        url: `${URL}/projects/${code.code}`,
        lastModified: project.last_publication_date,
    }));

    const routes = ["", "/solutions", "/projects", "/news-views"].map((route) => ({
        url: `${URL}${route}`,
        lastModified: new Date().toISOString(),
    }));

    return [...routes, 
            ...pages,
            ...solutions,
            ...projects,
            ...articles
            ];
}

Grateful for any suggestions - many thanks Rob

3

Hey @rob1 ,

I think you need to call the file sitemap.xml.js as per the Next.js docs:

4

Thanks Phil I was using the latest docs for App Router - they are using a different model and don't mention this file naming convention.

1 Like
5

I hope you have your sitemap.xml working now.

I put one together in a very similar way to yours. However, I did have another problem with it in that last_publication_date returns the date in an invalid format. The time zone is expressed as "+0000" where is should be "+00:00". I fixed this with a .replace('0000','00:00').

1 Like