The following js sitemap is a fairly simple concept. In short, a sitemap is a file that contains a data representation of each page on your website, along with any other content deemed important enough to provide to search engines like Google.
Sitemap entries can include videos,Photos, PDF and, of course, the web pages themselves. The most common format for a sitemap file is XML, and while Google supports other formats, such as RSS and text, we'll focus on the XML format due to its widespread use.
TL; RD: quick links
- NextJs and next-sitemap quick reference
- Generation of sitemap.xml files
- dynamic sitemaps
- Creating a custom sitemap generator
- How next-sitemap creates dynamic sitemaps
Sitemap Maintenance | Keep URLs up to date
Maintaining a sitemap manually can be a very tedious endeavor. Every time a new page or content is added to a site, or a URL is changed, the sitemap file must also be updated. This can be tricky, especially when managing medium to large websites.
For this reason, frameworks usually provide some tools to facilitate the task of managing sitemaps. Typically, this is a sitemap generator that allows the developer or maintainer to generate sitemaps automatically or on demand on updates.
Next Free JS SEO Training
Hey! I'm Scott and I've been working with Javascript and highly technical websites for almost 10 years. Sign up for my free training and...
- Learn how to fix Next JS crawling and SEO issues
- How We Develop Websites From Zero Visitors To Millions
- A set of javascript SEO tips and tricks you won't find anywhere else
do the training
NextJs | Sitemap Generator vs Dynamic Sitemap
The difference between these two techniques is subtle but important to understand. Each technique may or may not be greatNext SEOdepending on your particular situation.
Using NextJs, a sitemap generator creates an actual sitemap file that is served from the /public directory as a static file.
A dynamic sitemap, on the other hand, uses a page component to generate an object containing the live sitemap schema and adds it to the response body. Essentially, a NextJs component is used to mimic a real sitemap file.
next site map | Suitable for both occasions.
Next Sitemap Module can act as a sitemap generator or as a tool to create dynamic sitemaps. We'll see under the hood how this works later. But first, let's look at a simple implementation using the following sitemap.
Generating sitemap.xml files with next-sitemap
Once you have a working NextJs project, go ahead and install the following sitemap with the following command:
npm and following sitemapThe Next Sitemap module requires a configuration file. Then in the root of your project create a file callednext-sitemap.config.jsand add the following code:
const config = { siteUrl : ' https://yoursite.com ' , generateRobotsTxt : true , // ( Optional parameter to createrobots.txtfile) // Other available options.. } module.exports = config;Let's proceed with our installed module and configuration file and run a build for our project.
npm-Run-CreateThe NextJs documentation recommends adding a "postscript" to the "package.json" file. So let's go ahead and follow his example by adding this code to package.json:
"postbuild": "next sitemap"Now we are ready to create our sitemaps! Run the following command and see what happens:
Run npm post buildAssuming this command runs without errors, you should see output indicating that your two sitemap files have been created: sitemap.xml and sitemap-0.xml
But why two sitemaps? sitemap.xml acts as a reference for all other sitemaps. So, if you have a site with many pages (in the thousands, if not millions), you can split your sitemaps into several smaller files that can be loaded and crawled more efficiently.
Here's a look at the sitemap.xml we just generated:
<?xml version="1.0" encoding="UTF-8"?><sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <sitemap> <loc>https://ejemplo .com/sitemap-0.xml</loc> </sitemap></sitemapindex>As you can see, this file simply points to the sitemap-0.xml file that contains our actual pages. Search engines easily crawl this sitemap setup, and on modern websites, this method of splitting sitemaps into multiple files is widely used.
Dynamic Sitemaps with Next-Sitemap
Next Free JS SEO Training
Hey! I'm Scott and I've been working with Javascript and highly technical websites for almost 10 years. Sign up for my free training and...
- Learn how to fix Next JS crawling and SEO issues
- How We Develop Websites From Zero Visitors To Millions
- A set of javascript SEO tips and tricks you won't find anywhere else
do the training
Using the following sitemap for dynamic sitemaps isn't as easy as generating sitemap files, but the process is still greatly simplified. Basically, all the pages of a NextJs site are served in the /pages directory. So we created a sitemap page component that "acts" like a sitemap.xml file.
We need to import the getServerSideSitemap method of the following sitemap module and create a page component that does not return JSX. Instead, the page component executes the code inside the `getServerSideProps` Method.
Here's a look at a basic sitemap component that can accomplish this:
import { getServerSideSitemap } from 'next-sitemap'; function GenSitemap() {} export async function getServerSideProps({ ctx }) { // We could put code here that pulls pages from a CMS to create a dynamic sitemap. return getServerSideSitemap(ctx, [ { loc: 'https://example.com', lastmod: new Date().toISOString(), changefreq: "monthly", priority: "1" }, { loc: 'https:/ /example.com/dynamic-path-2', lastmod: new Date().toISOString(), changefreq: "monthly", priority: "1" }, ]) } export default GenSitemap;As seen in the code above, we return our `getServerSideSitemap` method imported from `getServerSideProps` and pass it an array containing all the data related to the creation of our sitemap.
And that's it, the following sitemap does the rest behind the scenes!
Building a custom sitemap generator with NextJs
The process of creating your sitemap files is summarized in the following sitemap module. This makes implementing sitemaps with NextJs a very simple process.
However, it's a good idea to understand how things work, so let's look at a simple example of how we can generate sitemap files using the NodeJs platform, which resides on the Next framework.
The typical sitemap schema
Our goal here is to generate asitemap.xmlArchive. So what does a sitemap file look like? A typical schema for a sitemap XML file looks something like this:
<url> <loc>http://example.com/blog</loc> <lastmod>Creation Date</lastmod> <changefreq>Weekly</changefreq> <priority>1.0</priority></url>Let's see how we can create a file containing this schema using the backend JavaScript code while adjusting the webpack configuration.
Modify NextJs config file to run sitemap script
NextJs uses Webpack to group and/or order modules that we can access using our NextJs configuration file. Let's modify the NextJs configuration file to require a script that creates a sitemap file on the server every time it runs. We can change our `next.config.js` as follows:
module.exports = {... webpack: (config, { isServer }) => { if (isServer) { require(./server-scripts/sitemap-generator"); } return configuration; },};Webpack runs twice, once on the server and once on the client. The isServer parameter allows us to run a script only when the webpack is running on the server. So our sitemap generator script will be executed whenever our scripts wrap during a request.
Creating a server-side NextJs sitemap script
Using NextJsnot serverit allows us to use features within NodeJs, such as B. the native `fs` module used to change the filesystem. Using the `fs` module, we can iterate over the /pages directory and generate a sitemap file based on its content. A simple example could be like this:
sitemap-generator.js
const fs = require('fs');function genSiteMap() { const archivos = fs.readdirSync('/pages'); url const = proceso.env.WEBSITE_URL; let sitemap = `<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`; for (var i = 0; i < archivos.longitud; i++) { let fileName = archivos[i]); let formattedFileName = fileName.replace(/\.[^/.]+$/, ""); sitemap = sitemap + `<loc>${url}${formattedFileName}</loc>` + `<lastmod>${new Date().toISOString()</lastmod>` + '<changefreq>semanal</changefreq >' + '<Prioridad>1.0</Prioridad>'; }; sitemap = sitemap + ‘</urlset>’ fs.writeFileSync('public/sitemap.xml', sitemap)}genSiteMap();This sample code walks through all the files in /pages and fills a formatted variable with all the schemas needed for our sitemap.xml file. We then use this variable as a parameter to the writeFileSync method to create the actual file and place it in the /public directory for NextJs to output as a static file.
This code is very basic, but it serves as a good example of how to use NodeJs functionality within NextJs to create sitemap files on the fly.
How does next-sitemap create dynamic sitemaps?
Next Free JS SEO Training
Hey! I'm Scott and I've been working with Javascript and highly technical websites for almost 10 years. Sign up for my free training and...
- Learn how to fix Next JS crawling and SEO issues
- How We Develop Websites From Zero Visitors To Millions
- A set of javascript SEO tips and tricks you won't find anywhere else
do the training
Without going too deep, it's worth taking a look at how next-sitemap can generate these dynamic sitemaps from a regular NextJs page component. The answer lies in the fact that NextJs can spawn components on the server, which means we can hijack some resources from NodeJs.
Every request to a website built on the NodeJs platform requires Node to create a response object. This response object can be modified as needed, and is used by next-sitemap to insert our sitemap data into the response body.
Here's a basic overview of how the response object can be modified inside a NextJs component:
function GenSitemap() {} asynchronous export function getServerSideProps({ res }) { // the code to create the sitemap content would go here. const sitemapContent = MethodToBuildSitemap(); res.setHeader('Content type', 'text/xml'); res.write(sitemap content); send again(); return { props: {} }}As you can see, we could simply pass the response object to the getServerSideProps method, and then put some sitemap data in the response body. Great, every time this page is requested, a dynamic sitemap can be created in no time.
NextJs and Next Sitemap | Summary and final considerations
NextJs can be used to generate sitemap files or to create dynamic sitemaps that are rendered each time a page component is requested. The Next Sitemap module is designed to streamline this process and can be integrated into any NextJs application using your favorite package manager.
While using Next-Sitemap takes much of the technical difficulty out of creating sitemaps for your Next app, it's still a good idea to understand how the process works behind the scenes. That's why we took a quick look at how NextJs can handle any form of sitemap generation.
If you're interested in creating high-performance SEO with the NextJs framework, having a good grasp of your sitemap situation is essential. This article was created to provide guidance and understanding in this area and we recommend building a NextJs application and testing it yourself.