Posted on Jun 13 • Originally published at notes.aimodels.fyi If you're looking to generate sitemaps for your Next.js website, the next-Sitemap npm package is a great tool to help you with that. In this tutorial, I'll guide you through the process of using this package and explain why you would want to use it.Sitemaps are essential for search engine optimization (SEO) as they help search engines discover and index the pages on your website. By using the next-sitemap package, you can easily generate sitemaps for your Next.js website, ensuring that search engines can crawl and index your pages effectively.To get started, you need to install the next-sitemap package. Open your terminal and run the following command:The next-sitemap package requires a basic config file named next-sitemap.config.js in the root directory of your project. This file will contain the configuration options for generating your sitemaps. Here's an example of a basic config file:Make sure to replace 'https://example.com' with the base URL of your website. You can also customize other options as needed.To build the sitemaps, you need to add a postbuild script in your package.json file. Open the package.json file and add the following script:This script tells Next.js to run the next-sitemap command after the build process is complete.If you want to use a custom config file instead of the default next-sitemap.config.js, you can specify it when running the build command. For example:This allows you to have different configuration files for different environments or purposes.If you're using the pnpm package manager, you need to create a .npmrc file in the root of your project to enable the postbuild step. Add the following line to the .npmrc file:This ensures that pnpm runs the postbuild script defined in your package.json.Starting from version 2.x of next-sitemap, the sitemap.xml file will be the Index Sitemap, which contains URLs of all other generated sitemap endpoints. If you have a small or hobby site that doesn't require an index sitemap, you can turn off index sitemap generation by setting generateIndexSitemap: false in your next-sitemap config file.If your sitemap becomes too large, you can split it into multiple files for better organization. To do this, define the sitemapSize property in your next-sitemap.config.js file.For example:In this example, when the number of URLs in a sitemap exceeds 7000, next-sitemap will create separate sitemap files (e.g., sitemap-0.xml, sitemap-1.xml) and an index file (e.g., sitemap.xml).Here are the available configuration options that you can use in your next-sitemap.config.js file:Please refer to the next-sitemap documentation for more details on each configuration option.The transform option allows you to define a custom transformation function that runs for each relative path in the sitemap. This function can add, remove, or exclude paths or properties from the URL set. Here's an example:In this example, the custom transformation function checks if a path should be ignored or if it requires a limited set of properties. It returns null to exclude a specific path or returns an object with properties for other cases.The additionalPaths function allows you to dynamically add additional paths to the generated sitemap list. It is useful when you have a large list of pages but don't want to render them all. The function should return an array of objects, where each object represents an additional path. Here's an example:In this example, the additionalPaths function adds three additional paths to the sitemap, each with different properties. You can customize this function based on your specific requirements.Here's an example of a next-sitemap.config.js configuration file with all available options:Feel free to adjust the values based on your specific needs.The next-sitemap package also provides APIs to generate server-side sitemaps. This is useful when you need to generate sitemaps dynamically from a content management system (CMS) or a custom data source.There are two APIs available:getServerSideSitemapIndex: Generates index sitemaps based on the provided URLs and returns an application/xml response. Supports Next.js route files (e.g., route.ts, route.js) starting from Next.js 13+.getServerSideSitemap: Generates a sitemap based on field entries and returns an application/xml response. Supports Next.js route files (e.g., route.ts, route.js) starting from Next.js 13+.To use these APIs, you can import them into your Next.js application and configure them according to your needs. For more information and examples, please refer to the next-sitemap documentation.If you're using TypeScript, you can enhance your development experience by adding the following line of code in your next-sitemap.config.js file:This line provides TypeScript autocomplete and type checking for the configuration options.That's it! You're now equipped with the knowledge to use the next-sitemap npm package to generate sitemaps for your Next.js website. Happy coding and optimizing your website for search engines!Subscribe or follow me on Twitter for more content like this!Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Jasmin Virdi - May 26 Syed Sadiq ali - Jun 2 Erin Bensinger - Jun 6 Derick Zihalirwa - Jun 9 Once suspended, mikeyoung44 will not be able to comment or publish posts until their suspension is removed. Once unsuspended, mikeyoung44 will be able to comment and publish posts again. Once unpublished, all posts by mikeyoung44 will become hidden and only accessible to themselves. If mikeyoung44 is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Mike Young. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag mikeyoung44: mikeyoung44 consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging mikeyoung44 will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.