NextJs
How to Add a sitemap for Static Site Generation (SSG) in the next.js app?
You can add a sitemap for Static Site Generation (SSG), Server-side Rendering (SSR), and Dynamic routing #part One.
In nextjs, you can add a sitemap with different methods. There are tons of articles written by developers. All the article is correct. You can add the sitemap in nextjs use of that code and Idea.
In the article, I’m using the npm package to add a sitemap in your nextjs app. npm package comes with lots of functionality and copy-paste code support.
Demo code Github here
Online website here
Generate sitemap in nextjs with npm package.
- Static-site generation (SSG)
- Server-side Rendering (SSR) and Dynamic routing
Static Site Generation (SSG)
In this article, we discuss only Static Site Generation (SSG), and in the second article, we focus on Server-side Rendering (SSR) and Dynamic routing.
Steps:
- Install NPM Package
- Config NPM package
- Config NPM Script
- Create Sitemap
Note:
We skip the nextjs installation part. Instead, I hope you know the basic understanding of creating an app in nextjs and basic knowledge of npm and nextjs.
Install NPM Package
In the First step, you install the next-sitemap npm package in your project as dev dependencies.
npm i next-sitemap -DConfig NPM package
In the second step, we config the next-sitemapnpm package in the project. For configuration, we create a next-sitemap.js file inside the project folder.
next-sitemap.jsPaste the following code in the next-sitemap.js file.
/** @type {import('next-sitemap').IConfig} */// Default code you can customize according to your requirements.module.exports = {siteUrl: process.env.SITE_URL || 'https://example.com',generateRobotsTxt: true, // (optional)// REST CODE READ DOCS ...}
Config NPM Script
In the third step, you should add(copy and paste) one more npm script in your package.json file.
"postbuild": "next-sitemap"If you use the npx create-next-app command to create your new nextjs app. Then your package.json scripts sections look like this.
"scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "postbuild": "next-sitemap"},
Create Sitemap
In the last step, you should run the next build command to generate the sitemap.xml file for your project.
npm run build— output of build command
> officialstaticblog@0.1.0 build
> next build
info - Loaded env from /home/rajdeepsingh/Downloads/officialstaticblog/.env
info - Checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
[ ] info - Generating static pages (0/88)[]
[]
info - Generating static pages (88/88)
info - Finalizing page optimizationPage Size First Load JS
┌ ● / (679 ms) 3.02 kB 82.5 kB
├ /_app 0 B 79.4 kB
├ ○ /404 192 B 79.6 kB
├ λ /api/hello 0 B 79.4 kB
├ ● /blog/[slug] (1690 ms) 1 kB 91.6 kB
├ ├ /blog/how-is-npm-install-command
├ ├ /blog/how-to-add-css-in-next-js
├ ├ /blog/how-to-capture-screenshots-in-raspberry-pi-4
├ └ [+7 more paths]
├ ● /category/[slug] (3444 ms) 903 B 91.5 kB
├ ├ /category/npm (446 ms)
├ ├ /category/npmcli
├ ├ /category/npm-install-command
├ ├ /category/nextjs
├ ├ /category/next
├ ├ /category/nextjs-framework
├ ├ /category/nextjs-tutorial
├ └ [+29 more paths]
├ ○ /Search (543 ms) 2.58 kB 82 kB
└ ● /tag/[slug] (3619 ms) 896 B 91.5 kB
├ /tag/npm
├ /tag/npmcli
├ /tag/npm-install-command
└ [+35 more paths]
+ First Load JS shared by all 79.4 kB
├ chunks/framework-fc97f3f1282ce3ed.js 44.9 kB
├ chunks/main-551bef8982a15171.js 28.2 kB
├ chunks/pages/_app-817c4c49804bf4a7.js 5.65 kB
├ chunks/webpack-fd82975a6094609f.js 727 B
└ css/98ed866367cddfc5.css 299 Bλ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)> officialstaticblog@0.1.0 postbuild
> next-sitemapLoaded env from /home/rajdeepsingh/Downloads/officialstaticblog/.env
✅ [next-sitemap] Generated index sitemap and 1 sitemap(s)
○ http://localhost:3000/sitemap.xml (index)
○ http://localhost:3000/sitemap-0.xml
In the end, you see the next-sitemap the package generates two sitemap files. sitemap.xml is the main index file, and sitemap-0.xml is the subfile. You can change the index and sub-index file name. for name change docs here.
For additional configuration read docs
Note:
Do not run the sitemap generate npm run postbuild command directly in the nextjs app. Then you face an error. Firstly run the next build command, then run the npm run postbuild command. But postbuild command is an optional command. next-sitemap npm package automatically generates a sitemap with next build a command.
Other or Another method
- https://enlear.academy/how-to-create-sitemaps-with-nextjs-668da9601a03
- https://cheatcode.co/tutorials/how-to-generate-a-dynamic-sitemap-with-next-js
- https://blog.logrocket.com/build-sitemap-generator-nextjs/
Conclusion
Other methods are also excellent, but another technique comes with less functionality. With next-sitemap npm package, we config lots of things like generating sitemaps and robots.txt for Static Site Generation (SSG), Server-side Rendering (SSR) and Dynamic routing.
You can follow me on Twitter and tweet with me.
https://twitter.com/@Official_R_deep
Suppose you like more articles about Linux, Ubuntu, and Raspberry pi 4. Then you visit my website.
https://officialrajdeepsingh.dev/
Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.
