Cache miss in cloudfront, whats the correct NextJS setup?

[simpel]

Hi!

We just released a new nextJS site and for every request we get at cache miss from cloudfront. We havn't really done anything to the headers being sent on the NextJS side. We just assumed things would work nice I guess. So any guidance on how to get the cloudfront cache to hit instead of miss? We compared our headers to the ones from nextjs.org and they're identical.

Is adding max-age really the way to go? Won't that disable the revalidation stuff? We currently have a revalidation endpoint that gets hit on every update in the CMS

This is what we get now:

Cache-Control: public, max-age=0, must-revalidate
Set-Cookie: country=se; Path=/
X-Powered-By: Next.js
X-Request-ID: -----------------------------------------------------------
Vary: Accept-Encoding,Accept-Encoding
X-Cache: Miss from cloudfront

[hmaesta]

Have you tried adding revalidate to your layout.tsx or page.tsx?

export const dynamic = 'force-static';
export const revalidate = 2592000;

More insights here.