Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 9, 2020 06:02 pm GMT

Sitemap with Nextjs after 9.4 update

Nextjs have done some changes since last post that I wrote. Since then was getStaticProps, getStaticPaths and getServerSidedProps introduced(You can read more about that here: https://nextjs.org/blog/next-9-4)

One way to generate a sitemap with nextjs after the update on SSG and SSR with a dynamic output based on the pages the application have is to create an API route that fetches data and return it as XML which could be used to read what pages you have on your application.

Create the code that generate the XML feed:

// import functions from the packageimport { SitemapStream, streamToPromise } from "sitemap";// Fetch data from a source which will be used to render the sitemap.const { posts } = await graphlqlFetch(`    query getSitemapData {      projects: allWorks {        slug {          current        }        publishedAt      }    }  `);// Create the a stream to write to with a hostname which will be used for all links// Your are able to add more settings to the stream. I recommend to look a the npm package for more information.const smStream = new SitemapStream({  hostname: "https://priver.dev",});// Add frontpagesmStream.write({  url: "/",});// Add a static url to ex: about pagesmStream.write({  url: "/about",});// add all dynamic url to the sitemap which is fetched from a source.posts.forEach((element) => {  smStream.write({    url: `/${element.slug.current}`,    lastmod: element.publishedAt,  });});// tell sitemap that there is nothing more to add to the sitemapsmStream.end();// generate a sitemap and add the XML feed to a url which will be used later on.const sitemap = await streamToPromise(smStream).then((sm) => sm.toString());

They way I generated my sitemap is with a package named "sitemap" which is an awesome package to generate a sitemap with.

The generation of the sitemap looked like this:

// import functions from the packageimport { SitemapStream, streamToPromise } from "sitemap";// Fetch data from a source which will be used to render the sitemap.const { posts } = await graphlqlFetch(`    query getSitemapData {      projects: allWorks {        slug {          current        }        publishedAt      }    }  `);// Create the a stream to write to with a hostname which will be used for all links// Your are able to add more settings to the stream. I recommend to look a the npm package for more information.const smStream = new SitemapStream({  hostname: "https://priver.dev",});// Add frontpagesmStream.write({  url: "/",});// Add a static url to ex: about pagesmStream.write({  url: "/about",});// add all dynamic url to the sitemap which is fetched from a source.posts.forEach((element) => {  smStream.write({    url: `/${element.slug.current}`,    lastmod: element.publishedAt,  });});// tell sitemap that there is nothing more to add to the sitemapsmStream.end();// generate a sitemap and add the XML feed to a url which will be used later on.const sitemap = await streamToPromise(smStream).then((sm) => sm.toString());

But this is only the code that generates the sitemap.
They sitemap const will later on be used to send data to the user or an service which want to read the sitemap/xml feed.

Send the sitemap to the user:
Nextjs have a build in way to return data to a user or service when an api route is generated. Which means we dont need any external packages like express.

They way I returned data to the user or service when using an api route is this code:

export default async (req, res) => {  // here is the generation of the sitemap happening  // tell the output that we will output XML  res.setHeader("Content-Type", "text/xml");  // write the generate sitemap to the output  res.write(sitemap);  // end and send the data to the user or service.  res.end();};

Now the user will have a sitemap that is dynamic generated and outputed in a way that a service like Goole Search Engine is able to read it.

The full code:

This is the whole code I used to generate a dynamic sitemap:

// import functions from the packageimport { SitemapStream, streamToPromise } from "sitemap";// A custom function I use to fetch data from a backend. I will keep the import to make it more clear why "graphlqlFetch" is used in the codeimport graphlqlFetch from "lib/apollo"export default async (req, res) => {  // Fetch data from a source which will be used to render the sitemap.  const { posts } = await graphlqlFetch(`    query getSitemapData {      projects: allWorks {        slug {          current        }        publishedAt      }    }  `);  // Create the a stream to write to with a hostname which will be used for all links  // Your are able to add more settings to the stream. I recommend to look a the npm package for more information.  const smStream = new SitemapStream({    hostname: "https://priver.dev",  });  // Add frontpage  smStream.write({    url: "/",  });  // Add a static url to ex: about page  smStream.write({    url: "/about",  });  // add all dynamic url to the sitemap which is fetched from a source.  posts.forEach((element) => {    smStream.write({      url: `/${element.slug.current}`,      lastmod: element.publishedAt,    });  });  // tell sitemap that there is nothing more to add to the sitemap  smStream.end();  // generate a sitemap and add the XML feed to a url which will be used later on.  const sitemap = await streamToPromise(smStream).then((sm) => sm.toString());  // here is the generation of the sitemap happening  // tell the output that we will output XML  res.setHeader("Content-Type", "text/xml");  // write the generate sitemap to the output  res.write(sitemap);  // end and send the data to the user or service.  res.end();};

Github gist with the same code: https://gist.github.com/emilpriver/d037fa56ddb3f450132ba6efe7b0c217

Hope this help you to generate a dynamic sitemap for your Nextjs application.

Twitter if anything: https://twitter.com/emil_priver


Original Link: https://dev.to/emil_priver/sitemap-with-nextjs-after-9-4-update-2bfl

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To