This repository demonstrates how to implement dynamic sitemaps in a Next.js application using the Pages Router. It covers creating individual dynamic sitemaps, splitting sitemaps for large websites, and implementing caching for improved performance.
For a more detailed explanation, see our blog post Advanced Sitemaps with Next.js.
- Node.js v18 or later
- NPM 9.x or later
- Dynamic sitemap generation using Next.js API routes
- Sitemap index generation for large websites
- Splitting sitemaps into multiple files
- Caching of dynamic sitemaps for improved performance
- Rewrite rules for clean sitemap URLs
-
Clone this repository:
git clone https://github.com/cuttlesoft/nextjs-dynamic-sitemaps.git cd nextjs-dynamic-sitemaps -
Install dependencies:
npm install
-
Run the development server:
npm run dev
pages/sitemaps/pages.xml.js: Generates dynamic sitemap for pagespages/sitemaps/posts/index.xml.js: Generates sitemap index for postspages/sitemaps/posts/[page].js: Generates individual post sitemapsnext.config.js: Contains rewrite rules for clean sitemap URLs
This project uses Faker.js to simulate data for demonstration purposes. In a real-world scenario, you would fetch this data from your actual CMS or database. The simulated data allows you to see how the dynamic sitemap generation works without needing to set up a full CMS backend.
- Adjust the
URLS_PER_SITEMAPconstant inpages/sitemaps/posts/index.xml.jsandpages/sitemaps/posts/[page].jsto change the number of URLs per sitemap. - Modify the caching duration in the
Cache-Controlheader in the sitemap generation files.
At Cuttlesoft, we specialize in Next.js development, including advanced SEO techniques like dynamic sitemaps. Whether you need help implementing complex SEO strategies, optimizing performance, or scaling your Next.js application, our team of expert developers is here to assist.
Contact us to discuss how we can take your Next.js project to the next level!