Next.js: [Feature Request] native static sitemaps

Created on 30 Apr 2020  路  2Comments  路  Source: vercel/next.js

Feature request

Provide a static sitemap feature out of the box.

Is your feature request related to a problem? Please describe.

For some listings(e.g. google for jobs) sitemaps are essential or at least a boost.
In pre next 9 a lot of users resorted to using an api route or custom server to generate the sitemap on the fly.

Describe the solution you'd like

For pages utilizing SSG the sitemap could be generated alongside/or in a post build (it more or less already is in the console output) step. Not sure if that makes sense for mixed (lambda + ssg) sites, but for full-static i imagine this could be relatively low effort high impact feature.

Describe alternatives you've considered

One could implement this in userland, by just iterating trough the build output folder as an externalized post build step.

Additional context

Not trying to start a flame war on pricing here, but i guess it belongs into context :sweat_smile:!
In recent history vercel/now pricing/api limits were altered limiting the amount of lambdas one project is allowed to have(12) pushing a lot of users into the server side generation.
I'm currently migrating some hobby projects to SSG and am trying to drop as many function calls as possible, but while 12 sounds like a lot you'll quickly max them out when providing endpoints for push notifications/email-subscription/sitemap/...
Sitemaps seem like an easy thing to do less dynamically especially with the beauty of SSG and periodic/triggered invalidation.

feature request

Most helpful comment

I would really love to see this integrated into Next. Just to note鈥擨f [RFC] Plugins lands, this could be solved in user land.

As far as DX goes, I would like to see a solution where sitemap builds on top of getStaticProps and getServerSideProps.

export async function getStaticProps({ params }) {
  const response = await fetch(`https://example.com/post/${params.id}`)
  const post = await response.json();

  return {
    props: post,
    // see https://www.sitemaps.org/protocol.html#xmlTagDefinitions
    sitemap: {
     lastmod: new Date('2020-05-06'), // optional, defaults to `new Date()` if not included
     changefreq: 'weekly', // optional
     priority: 0.5 // optional
    }
  }
}

Next would already be aware of each route's path, so could automatically generate the necessary loc field. If deployed to Vercel, the loc's origin could be automatically supplied via process.env.VERCEL_URL. Otherwise, users would need some mechanism to provide an origin, likely via next.config.js.

For SSR pages, changefreq could automatically default to always.

To exclude a SSG/SSR page from the sitemap, users could return sitemap: false.

All 2 comments

I would really love to see this integrated into Next. Just to note鈥擨f [RFC] Plugins lands, this could be solved in user land.

As far as DX goes, I would like to see a solution where sitemap builds on top of getStaticProps and getServerSideProps.

export async function getStaticProps({ params }) {
  const response = await fetch(`https://example.com/post/${params.id}`)
  const post = await response.json();

  return {
    props: post,
    // see https://www.sitemaps.org/protocol.html#xmlTagDefinitions
    sitemap: {
     lastmod: new Date('2020-05-06'), // optional, defaults to `new Date()` if not included
     changefreq: 'weekly', // optional
     priority: 0.5 // optional
    }
  }
}

Next would already be aware of each route's path, so could automatically generate the necessary loc field. If deployed to Vercel, the loc's origin could be automatically supplied via process.env.VERCEL_URL. Otherwise, users would need some mechanism to provide an origin, likely via next.config.js.

For SSR pages, changefreq could automatically default to always.

To exclude a SSG/SSR page from the sitemap, users could return sitemap: false.

@natemoo-re I like that option, it seems to make sense. Although it kinda feels like getStaticProps() (because of its name) shouldn't do anything besides getting the props to the page. Maybe a better place would be getStaticPaths()? This one is actually building the sitemap, quite literally.

Also, while this is not implemented into next, do you guys know of an automated solution that scrapes the build output and generates the file? Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rauchg picture rauchg  路  208Comments

matthewmueller picture matthewmueller  路  102Comments

tomaswitek picture tomaswitek  路  73Comments

nickredmark picture nickredmark  路  60Comments

Knaackee picture Knaackee  路  122Comments