08 December 2023
Next.js makes it easy to generate a sitemap for your application. This guide will show you how to generate a sitemap in Next.js, both static and dynamic, with ease in the new /app directory. You will also learn how to generate dynamic sitemap using Contentful. Let's get started!
You should have at least the knowledge of the following:
Next.js - The folder structure and how /app directory works.
Contentful - You have an account and know what are models and entries.
Sitemap - Why it's important and how it can help your site's SEO performance.
Generating static sitemaps is a breeze. Just go to your app's root directory and create a file named sitemap.xml. To accelerate the URL creation process, you can utilize a sitemap generator, then simply paste the generated code into the file.
/sitemap.xml
To create a dynamic sitemap, create a sitemap.jsx or sitemap.tsx file in the root of the app directory. For this example, we will use a public API - pokeapi. We will create a mock URL for each Pokemon and use its name as a parameter.
/sitemap.tsx
The code above will generate this sitemap:
/sitemap.xml
For this case, you can use glob to retrieve an array of paths matching the provided pattern. You need to add more logic to handle the formatting of the static paths to your sitemap.
Let's start by creating our models. We will create two models as follows:
Page - The model for the actual page. This will be the parent model for the Sitemap model.
Sitemap - Similar to the SEO model, this will have the blueprint for the sitemap-related data of a page.
Below is the relationship we want for the two models.
Visual modeler of Contentful
This is a very basic model for a page but I think this is enough as an example. You can add more fields if you want and, of course, should always depend on your requirements. We will use the models and their fields as follows:
Model | Field | Sitemap URL |
|---|---|---|
Page | Slug | <loc> |
Component: Sitemap | Change Frequency | <changefreq> |
Component: Sitemap | Priority | <priority> |
We will set the value of the <lastmod> to new Date().
After creating the models and configuring their fields, we now have the data source we need to create the sitemap. The next step is to create the entries. Let's create an entry for the sitemap model first.
Creating an entry for the sitemap model
Now let's create an entry for the page model and reference the sitemap entry we just created.
An example entry for the page model
Add as many entries as you want. Just don't forget to reference a sitemap entry to a page entry.
Ok! We now have the entries we need to recreate the dynamic sitemap, but this time, the data is from Contentful.
/sitemap.jsx
The client is the same as what we implemented in this article. And now your sitemap should look like this:
/sitemap.xml
This is a basic way to generate a dynamic sitemap in Next.js v13 with Contentful. If you are using Compose in Contentful, you will need to modify the app-generated models to include additional fields that cater to the sitemap's needs. Another thing to consider is how you want your sitemap to be generated. Some sites require you to build the sitemap at build time, while others require it at request time.
Learn more