Next.js Discord

Discord Forum

Sitemaps with App Directory - async and statically generated?

Answered
Leafcutting bee posted this in #help-forum
Open in Discord
Leafcutting beeOP
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Following the above docs I am trying to create a sitemap.ts file in my app directory.

Will this statically generate my sitemap?
Is there any way to make this an async function?

Thanks
Answered by Ray
it is static generate by default. you can use route segment config to set it dynamic
export const dynamic = 'force-dynamic'
View full answer

96 Replies

Answer
@Ray it is static generate by default. you can use route segment config to set it dynamic `export const dynamic = 'force-dynamic'`
Atlantic mackerel
I have to tell you that your answers on this topic in many thread are really unhelpful.
I don't want to be too mean but you did wasted a few minutes of my life.
@Atlantic mackerel I have to tell you that your answers on this topic in many thread are really unhelpful. I don't want to be too mean but you did wasted a few minutes of my life.
joulev
sitemap.ts file is static by default. so the answer to "Will this statically generate my sitemap?" is yes.

it can be export default function sitemap() or export default async function sitemap(), both work fine. so the answer to "Is there any way to make this an async function?" is yes.
Ray answered the question accurately and concisely. Why would his answer be unhelpful? I honestly don't see anything else to add to his answer
Atlantic mackerel
The docs doesn't provide a valid and production level solution to generate sitemap though we all know that we definitely can do that but just need some work on it.
joulev
Everything in nextjs, you can export async or non-async
that's not even nextjs related that's just normal javascript
I do keep getting TypeErrors when I try and make it async but that’s definitely user error
joulev
can you give us some code?
this should work:
import { MetadataRoute } from 'next'
 
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  return [
    {
      url: 'https://acme.com',
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 1,
    },
    {
      url: 'https://acme.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: 'https://acme.com/blog',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.5,
    },
  ]
}
Sorry about this, should’ve marked this thread solved yesterday
And thank you for solving my async problem
joulev
oh indeed. async functions return promises so the return type should be a promise
@Atlantic mackerel that's why you just made me speechless...
joulev
i literally took the exact code in the documentation page, add async and change the return type. which required no nextjs knowledge at all, only basic js and ts knowledge
if you use js you are expected to know how to do that
@Atlantic mackerel if I have 500 pages, do I have to maintain these 500 sitemap entries by hand?
Leafcutting beeOP
The docs actually cover this really well
Thats the whole point of the function
If you're maintaining it by hand then why write the function?
@Leafcutting bee The docs actually cover this really well
Atlantic mackerel
if you mean the database query part, then no.
Leafcutting beeOP
Thats because database querying is not a part of next.js
You can do a database query within the sitemap function but thats on the user to work out, Next,js doesn't care what you do inside the function, as long as you return an array of properly formed objects
Atlantic mackerel
we are not on the same page.
I'm talking about 500 static page.tsx files
Leafcutting beeOP
Why do you have that many page.tsx files?
But yeah, you could probably programatically generate that
Atlantic mackerel
why not?
@Leafcutting bee But yeah, you could probably programatically generate that
Atlantic mackerel
and that will need some work
either by scanning the static source code directory or find an internal API from Nextj.js to collect all these urls
@Atlantic mackerel if I have 500 pages, do I have to maintain these 500 sitemap entries by hand?
joulev
1. that has nothing to do with the original question, so why did you criticise Ray for an answer that he never wrote with the intention to answer this unrelated question?
2. you programmatically get all 500 paths in the sitemap.ts file.
@Atlantic mackerel and that will need some work
Leafcutting beeOP
Yes but you could always build it as you build your site
joulev
yeah you could choose not to talk, that doesn't grant you the right to criticise someone's message that wasn't intended to answer your question which differs significantly from the original question
Atlantic mackerel
so any solution to avoid 500 sitemap.ts files?
@Atlantic mackerel so any solution to avoid 500 `sitemap.ts` files?
Leafcutting beeOP
Read the docs, you only ever need a single sitemap.ts file
I personally would build a function that can parse the app directory into a list of routes
and then build that into an array of sitemap objects
But also ask the question, why 500 individual page.tsx files:
I can see it being the case only when your site is absolutely colossal, but surely there is some reusability that can be implemented there?
@Leafcutting bee I personally would build a function that can parse the `app` directory into a list of routes
Atlantic mackerel
that will work but I'd prefer a build time package to do that for me. say if there's an empty page.tsx file then 404
Leafcutting beeOP
WHy would you have an empty page.tsx file?
Dude, think about your use case and then open your own thread. I'd probably include a detailed description of the structure and edge cases in your app, as it seems fairly unique, and describe exactly what you're trying to achieve
@Leafcutting bee I can see it being the case only when your site is absolutely colossal, but surely there is some reusability that can be implemented there?
Atlantic mackerel
that's a long story but basically I'm writing a blog system for my self, so most of pages are static .tsx files
Leafcutting beeOP
But this thread will be buried soon so you'll not get any answers here
@Atlantic mackerel so any solution to avoid 500 `sitemap.ts` files?
joulev
one single app/sitemap.ts file that returns an array of 500 elements
@joulev one single app/sitemap.ts file that returns an array of 500 elements
Atlantic mackerel
I don't want to maintain that array so it would be better if a package that generate sitemap for me during build phase.
@Atlantic mackerel that's a long story but basically I'm writing a blog system for my self, so most of pages are static `.tsx` files
Leafcutting beeOP
https://github.com/alexrusselldev/portfolio-site-template

This is my repo, I'm doing a similar thing but with MDX

Have a look through and see if there's anything useful for you in there
Atlantic mackerel
I have been using wordpress and ghost blog system for many years but what I really need is full power of html+css+js, so I write my blog in WebStorm.
@Atlantic mackerel I have been using wordpress and ghost blog system for many years but what I really need is full power of html+css+js, so I write my blog in WebStorm.
Leafcutting beeOP
mdx also allows you to write jsx in your markdown content, it might actually be perfect for what you need
Leafcutting beeOP
haha wow thank you, its nowhere near finished yet
@Leafcutting bee mdx also allows you to write jsx in your markdown content, it might actually be perfect for what you need
Atlantic mackerel
I did follow the MDX tutorial dating back to previous Next.js version but... Markdown is not enough.
let me give you any example:
I've been planning on writing comment for Linux kernel source code for many years. A good UI design is to show code on the left and comments on the right, so it will be a two-panel component.
MD does not support two-panel style
@Atlantic mackerel MD does not support two-panel style
Leafcutting beeOP
MDX could support that
You could write a custom two panel jsx component and use it in your mdx files
@Leafcutting bee You could write a custom two panel jsx component and use it in your mdx files
Atlantic mackerel
I then will be struggling with code-comment alignment problem.
@Atlantic mackerel I then will be struggling with code-comment alignment problem.
Leafcutting beeOP
<TwoPanel>
  <CodePanel>
     Code block here
  </CodePanel>
  <CommentPanel>
    Some comments here
  </CommentPanel>
</TwoPanel>
idk how to escape backticks
@Atlantic mackerel https://libgit2.org/libgit2/ex/v1.7.1/init.html
Atlantic mackerel
this is probably one of the best solutions I have found.
Leafcutting beeOP
Ahhhh ok I see
Inspect their page! They have a really elegant solution!
You could definitely implement that with a custom re-usable JSX component
Leafcutting beeOP
That's true, but I wrote that before I saw the page you linked
@Leafcutting bee Inspect their page! They have a really elegant solution!
Atlantic mackerel
I did. It was generated by another tool.
Leafcutting beeOP
Yeah so each of their code sections is paired with a comment section and then rendered as a table row
So you just need a component that can take an unspecified amount of these "pairs" and render them out
Atlantic mackerel
html table, tr, td ugly but works like a charm
@Leafcutting bee So you just need a component that can take an unspecified amount of these "pairs" and render them out
Atlantic mackerel
the real hard part is how I write the original comments
Leafcutting beeOP
How is that?
Atlantic mackerel
if I write in-code comments, it will break git history so I'll have to maintain a fork project.
then I have to write a parser to extract my comments from original codebase.
If I want to add more features such as href shrink/expand etc, the parser will soon be very complex.
back to this topic: I'll have many page.tsx files, LOL
@Atlantic mackerel back to this topic: I'll have many `page.tsx` files, LOL
Leafcutting beeOP
Check out how I read my content directory
I do it in sitemap.tsx and in various page.tsx files
@Leafcutting bee Check out how I read my content directory
Atlantic mackerel
🍻
tree | grep "page.tsx"
:meow_pizza:
Leafcutting beeOP
Oh I just use the builtin node fs functions
You're a lot more linuxey than me 😂
Atlantic mackerel
find . -name page.tsx will be better.
@Ray could you show some link of the thread?
Atlantic mackerel
I apologize and withdraw what I said. Sorry.
@Leafcutting bee You're a lot more linuxey than me 😂
Atlantic mackerel
Thx