Learn how to configure own, Vercel-like CDN setup, maximazing Next.js performance in a self-host environment on Cloudflare, Fastly or any other CDN.

Oleg Proskurin

Vercel

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

This post provides a guide on how to configure CDN caching for self-hosted Next.js websites. It covers examples from common CDN options like Cloudflare, Fastly, and Amazon CloudFront. The post also discusses the default cache headers in Next.js and provides solutions for caching different types of Next.js pages.

Configure CDN Caching for self-hosted Next.js websites

Beware of weak caching defaults for assets in the public folder ​

Configuring Cloudflare CDN for the Next.js app ​

Configuring Fastly CDN for the Next.js app ​

Caching for different Next.js page types and data-fetching strategies ​

Some other things to note with self-host CDN ​

That’s exactly what I’m looking for.

What about client side navigation and adding _rsc=hash by next/link? I have a project which is e-commerce web app hosted in Europe but all users are from Middle East (client requirement). We want to cache everything what we can on CDN (Akamai). But the problem is that dynamic RSC hash in URL floods cache and make it useless.
Next.js team told me that it’s intentional behaviour <a href="https://x.com/timneutkens/status/1913116417316040955" target="_blank" rel="noopener nofollow">https://x.com/timneutkens/status/1913116417316040955</a>