From a52bd712fe797b59cfd05ceaa4c33096a0c346ff Mon Sep 17 00:00:00 2001
From: Maedah Batool <me@MaedahBatool.com>
Date: Thu, 17 Feb 2022 15:17:26 -0800
Subject: [PATCH] Update details about Cache Control Headers (#34416)

We need to update details about adding Serverless Functions' `Cache-Control` headers to `next.config.js` files. And inform developers that these headers cannot be set in `next.config.js` files.

## Bug

- [x] [Slack Thread](https://vercel.slack.com/archives/C02F56A54LU/p1644993522741169)
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`


Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
---
 docs/api-reference/next.config.js/headers.md | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md
index 5905a0860dd9..3fb5be5578a3 100644
--- a/docs/api-reference/next.config.js/headers.md
+++ b/docs/api-reference/next.config.js/headers.md
@@ -376,7 +376,20 @@ module.exports = {
 
 ### Cache-Control
 
-Cache-Control headers set in next.config.js will be overwritten in production to ensure that static assets can be cached effectively. If you need to revalidate the cache of a page that has been [statically generated](https://nextjs.org/docs/basic-features/pages#static-generation-recommended), you can do so by setting `revalidate` in the page's [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) function.
+You can set the `Cache-Control` header in your [Next.js API Routes](/docs/api-routes/introduction.md) by using the `res.setHeader` method:
+
+```js
+// pages/api/user.js
+
+export default function handler(req, res) {
+  res.setHeader('Cache-Control', 's-maxage=86400')
+  res.status(200).json({ name: 'John Doe' })
+}
+```
+
+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.
+
+If you need to revalidate the cache of a page that has been [statically generated](/docs/basic-features/pages.md#static-generation-recommended), you can do so by setting the `revalidate` prop in the page's [`getStaticProps`](/docs/basic-features/data-fetching/get-static-props.md) function.
 
 ## Related