This content originally appeared on DEV Community and was authored by Jesse Price
Next.js 14 provided us with a simple way to take advantage of server side rendering and server actions. While this is one of my favorite additions to the modern framework, it does come with some adjustments that need to be made in the typical workflow. Thankfully, adding a dynamic sitemap is quite simple.
You may be asking why we aren't using the suggested method to dynamic sitemaps from Next.js. Well, If you are using server actions and the page where you are showing the blog post is using server side rendering, when you go to submit your sitemap to the google search console, you will find that google will not be able to fetch it. This is due to the sitemap being exclusive to the server. Furthermore, if you check on your deployed applications route for your sitemap, you may again find that your sitemap isn't showing like it does in your development environment. This is how I solved this issue.
Modern web applications built with Next.js require a dynamic approach to sitemaps. A sitemap helps search engines understand the structure and importance of your site's pages. While small applications with few pages might manage with a manual sitemap, larger applications with frequently updated content, like this website, require a programmatic solution to keep the sitemap updated.
First, install Next-sitemap.
npm i next-sitemap
Next, in your Next.js app create a new file app/server-sitemap.xml/route.ts:
import { getAllPosts } from '@/actions/actions'
import { getServerSideSitemap } from 'next-sitemap'
export async function GET(request: Request) {
// Method to source urls from cms
const urls = await getAllPosts()
const post = urls?.map((post:any) =>{
return{
loc: `https://www.example.com/blog/${post?.slug}`,
lastmod: post?.updatedAt.toISOString()
}
})
return getServerSideSitemap([
{
loc: `https://example.com`,
lastmod: new Date().toISOString(),
// changefreq
// priority
},
...post
])
}
I have a server action set up
getAllPosts()
that returns all of the blog posts. This could be your pictures or products, really whatever you want. You could also grab this from your api if you aren't using server actions.
Then we just map over each post, and add the url of each post and when it was last modified to an array I named post.
Finally we return the sitemap with the base url, then we spread each of the post objects in with it.
Now, if your project is running, head to
http://localhost:3000/server-sitemap.xml
and you should see your sitemap.
Conclusion
Writing web applications in Next.js with server side rendering paired with server actions will be my approach to development for the near future. Given the dynamic approach to using really any framework, it's important to keep in mind that solving problems like adding a sitemap may require a little bit more effort than using built-in features.
If you are interested in learning more aspects of SEO like keyword metadata, more reading is available on adding SEO to a Next.js project.
This content originally appeared on DEV Community and was authored by Jesse Price
Jesse Price | Sciencx (2024-08-30T02:00:28+00:00) Adding Dynamic Sitemaps to Next.js App Router Projects.. Retrieved from https://www.scien.cx/2024/08/30/adding-dynamic-sitemaps-to-next-js-app-router-projects/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.