Adding Caching Headers to Videos Hosted in Public Folder
Answered
Siamese posted this in #help-forum
SiameseOP
Hello everyone,
I'm currently working on a Next.js application where I have a video hosted from the public folder. I've noticed that it doesn't seem to get caching headers, and I've been having difficulty finding comprehensive information about this online.
From what I understand, the Next.js team perhaps doesn't intend for this to be a feature in Next.js as they expect users won't typically host large static assets such as videos from the public folder. However, in my case, I have a pull-based CDN (Cloudflare) in front of the application in production. If I could add caching headers, these assets would be effectively cached on the CDN.
I'm trying to figure out the best course of action here. I'd prefer not to resort to hacky solutions like creating an API endpoint that serves the video with headers.
Has anyone else encountered this issue and found a clean solution? Any advice would be greatly appreciated.
Thanks in advance!
I'm currently working on a Next.js application where I have a video hosted from the public folder. I've noticed that it doesn't seem to get caching headers, and I've been having difficulty finding comprehensive information about this online.
From what I understand, the Next.js team perhaps doesn't intend for this to be a feature in Next.js as they expect users won't typically host large static assets such as videos from the public folder. However, in my case, I have a pull-based CDN (Cloudflare) in front of the application in production. If I could add caching headers, these assets would be effectively cached on the CDN.
I'm trying to figure out the best course of action here. I'd prefer not to resort to hacky solutions like creating an API endpoint that serves the video with headers.
Has anyone else encountered this issue and found a clean solution? Any advice would be greatly appreciated.
Thanks in advance!
Answered by joulev
you can try using middleware then https://nextjs.org/docs/app/building-your-application/routing/middleware#setting-headers
6 Replies
SiameseOP
It is hosted as a docker instance if it has any relevance 🙂
@Siamese Hello everyone,
I'm currently working on a Next.js application where I have a video hosted from the public folder. I've noticed that it doesn't seem to get caching headers, and I've been having difficulty finding comprehensive information about this online.
From what I understand, the Next.js team perhaps doesn't intend for this to be a feature in Next.js as they expect users won't typically host large static assets such as videos from the public folder. However, in my case, I have a pull-based CDN (Cloudflare) in front of the application in production. If I could add caching headers, these assets would be effectively cached on the CDN.
I'm trying to figure out the best course of action here. I'd prefer not to resort to hacky solutions like creating an API endpoint that serves the video with headers.
Has anyone else encountered this issue and found a clean solution? Any advice would be greatly appreciated.
Thanks in advance!
have you tried this? https://nextjs.org/docs/app/api-reference/next-config-js/headers
SiameseOP
Yes I have. But they get overwritten in production:
"You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively."
"You cannot set Cache-Control headers in next.config.js file as these will be overwritten in production to ensure that API Routes and static assets are cached effectively."
interesting, i didnt know that
you can try using middleware then https://nextjs.org/docs/app/building-your-application/routing/middleware#setting-headers
Answer
SiameseOP
Thank you, I got it working using middleware! 🙂