Dynamic Sitemaps in Next.js
One of the best parts of working with a full stack framework like Next.js is how much of the architectural heavy lifting it handles for you. From its directory-based routing to the dynamic route segments that pass parameters as props, I’ve really appreciated the built-in structure and clarity it brings to development.
As I was putting the final touches on my portfolio site, I decided to explore some of the SEO-focused tools Next.js provides. Improving SEO was one of the main reasons I transitioned from React to Next.js in the first place, and once I started exploring, it was clear that the decision paid off.
Here are a few features I used to optimize the site’s visibility and maintainability:
generateStaticParams: Pre-generates pages for dynamic routes at build time
generateMetadata: Adds route-specific metadata like titles and descriptions
opengraph-image.tsx: Uses the Satori integration to generate SVG images from HTML using dynamic route data
sitemap.tsx: Dynamically builds a sitemap that includes all relevant dynamic routes
In my case, I used local arrays for projects, blog posts, and pages, but if this data lived in a remote database, it could just as easily be fetched at build time. The end result is a complete and searchable sitemap.xml that keeps up with the content and structure of the site automatically.
