How I added a sitemap to Next.js website (next-sitemap)

In order to improve the SEO ranking of a new website I had built using Next.js I decided I needed to add the automatic generation of a sitemap xml and robots.txt to the build process.
The website is statically exported from Next and then hosted on an S3 bucket in AWS.
This video documents me attempting to achieve the above
props to this NPM module www.npmjs.com/...
#nextjs
Senior web developer focusing on Javascript, React and Node.
🎨 My Editor Settings
Visual studio code
Afterglow
support me - magic.freetrad...
Code examples used in videos are uploaded here: github.com/mic...
Visit the channel here: / @caleycodelab
Say hello on instagram here: / caleyinbriefs

[@in3135]

Good video ! I like how you struggle, it is cool to see that we are not alone :)

[@kristiyanivanov7414]

yes, tbh this :D

[@RizaHariati]

Same!

[@joostschuur]

I took a shot everytime you said sitemap and now I'm too drunk to code. Best time ever.

[@caleyCodeLab]

🤣

[@abdulrahmanelheyb]

Wow, I tried search how can solve this problem but I not found, after when find your video I solved thank you so much 🥰

[@BigPerm73]

😆Please keep making tutorials. I enjoyed this and you helped a ton.

[@caleyCodeLab]

Thank you! Working on one right now 🍻

[@Fullflexno]

Supercool video buddy! Love your snarky and humourus comments, keep posting pleas!=)

[@A-Miracle000]

wow the way you explain is just fantastic keep it up

[@gabrielmoraes4516]

Awesome video! I can so relate to 4:24 LOL!

[@caleyCodeLab]

🙏

[@testrandom1852]

Love the way you teach.

[@hackneythugg]

4:30 LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOL - Only a develper would understand!

[@RizaHariati]

Thank for the tutorial man... 😁😁

[@ErkanYuksel111]

Greetings from Türkiye love that video :)

[@nickwong1652]

It's cool bro~ very useful

[@billardmelissa4608]

Thanks to you for that , very helpful 😉

[@shawnlee5956]

thx for sharing ~ you look very enjoying coding ~

[@tochukwungene]

I totally agree at 4:36. Never! It's frustrating!

[@adityashrivastava8352]

Thanx bro. It helped a lot.

[@kristiyanivanov7414]

nice, you put some emotion into it and that's good to see - people these days seem robotic :)

[@pbhalshankar5]

i really love your reaction on error ....Its never straight forward...never like that......😂😅

[@ngocthienvu7903]

i love it, it's so funny

[@wixet17]

POG, thank u!!!

[@ayodejiatanda6197]

thank you! they need to fix their documentation 😂

[@TonicCantaloupe]

Whats the process now in 2024, with the latest version of NextJS? Has anything changed?

[@burakozcan4472]

for those who have problems yarn next export and cd out run npx http-server

[@patitorodri]

thanks mate, you are funny

[@adarshrathi8265]

excellent excellent love from india har har mahadev

[@arewabookspublishers]

Thank you for the Video, But i'm getting that error even when run build. please what should I should do? my node version is 16.14.0 while the npm 8.3.1

[@caleyCodeLab]

If you're on windows you need to rename the config file. The issue is documented on their npm page. Your node version should be fine. But you should consider using NVM so you're flexible

[@anjurawat9274]

I have one doubt why did you install in dev dependency?

[@caleyCodeLab]

It's a dev dependency because I only need the package at build time. You only want to add a package to none dev dependencies if it's required to execute once built

[@anjurawat9274]

@@caleyCodeLab got it. Thanks

[@MrWalrusxD]

Really nice video! I'm new to React/Next, can someone explain me what the /out is? Is that something like a live server? Can't find it on the web :)

[@caleyCodeLab]

/out is a folder next generates when you statically export a website

[@JunoYu-z3w]

R u walton raiders?

[@taranpreetsingh6135]

npm install next-sitemap --save-dev gives me an error found incompatible module. Please help

[@caleyCodeLab]

What version of node are you running?

[@taranpreetsingh6135]

@@caleyCodeLab I got v14.18.1

[@caleyCodeLab]

If you throw up a repo I'll take a look when I get a chance 🏋️

[@taranpreetsingh6135]

@@caleyCodeLab Please tell how to update node version. I have tried the command but it wasn't updating

[@TK-kw2pg]

Why is it that mine dont generate a robots.txt and xml

[@mariusnjikenjike3119]

Hey man, I'm having an error after running . SyntaxError: Unexpected token 'export' could you please suggest any idea on how to solve it?? Thank you for the video.

[@caleyCodeLab]

Have you successfully exported and are able to run it as a static site? Sounds like config but very difficult to say

[@martineboulanger]

Explanations are good, but please if you explain something and you want to use you webcam too, face the webcam when you speak. It is just weird to look at your side profile

[@alanhettinger4051]

Why did you create a "sitemap" script rather than using the "postbuild" script as suggested in the docs?

[@caleyCodeLab]

Because sitemap is just one post build operation. Postbuild is too generic

[@Its_nirbhay_gupta_]

How are you so cool dude😅

[@caleyCodeLab]

I'm going to assume this is some dry sarcasm

[@imkir4n]

getting 404 when i go to route sitemap!!! why

[@caleyCodeLab]

Difficult to say unless you sling a repo

[@imkir4n]

@@caleyCodeLab i managed to fix that, thank you

[@caleyCodeLab]

Good man!

[@ardibandilli6437]

@@imkir4n how you fixed that?

[@imkir4n]

@@ardibandilli6437 you need to place that sitemap.xml file inside public folder

[@biglmnztv]

just subbed man, do you collaborate on projects for fun? seeking a mentor 🍋

[@caleyCodeLab]

Hey thanks 🤲 at the moment no due to my actual job being really busy. I like the idea of it in the future though !

[@jennysquesttowellness]

mate why are all our pages in sitemap-0.xml and not on sitemap.xml? isn't this confusing?

[@caleyCodeLab]

Just a bit of config with the sitemap package. You can change it, but I've had my sites successfully crawled with it as default

[@jennysquesttowellness]

@@caleyCodeLab thanks so google will understand that your pages are listed in sitemap-0.xml and not on sitemap.xml, correct?

[@gilmar770]

@@jennysquesttowellness Man, i have this doubt too...

[@caleyCodeLab]

The tool you can use to check whether your sitemap has been indexed properly is called 'google search console'. There's a tab called sitemap where it gives you all the information they have collected from you

[@NikitaPant-tl8gw]

any solution, how to change this ?