feat: added better custom header support #1358

nickytonline · 2022-05-24T19:28:16Z

Summary

Improves support for Next.js custom headers. Currently the headers() function in next.config.js only works for SSR/ISR. Headers in netlify.toml or a _headers file are completely ignored for SSR/ISR. For SSG pages, only the headers defined in netlify.toml or a _headers file are recognized and headers defined in headers() in next.config.js are ignored.

Previously, you had to manually copy from the headers() function to netlify.toml or vice-versa so all headers were applied. Now all that is required is defining custom headers in the headers() function of next.config.js. The build plugin will update the Netlify configuration at build time with all the custom headers defined in the headers() function of next.config.js.

You can still add headers in netlify.toml or _headers, but those additional headers will only apply to SSG pages.

@KyleBlankRollins, we'll need a documentation update for this as well. Happy to write this up, just not sure how we usually work with the documentation team.

Note that ISR and SSR are not affected by this plugin fix.

Test plan

The source code for test site can be found at https://github.com/nickytonline/next-plugin-issue-1346

Note that unless you load a page explicitly from the browser address bar, Next.js client-side routing will kick in so as you navigate to a new page, from the first-page load, you will not see the custom headers in subsequent pages that load from the client-side as the browser is not refreshing. You will need to refresh the browser to see the headers.

If you want to test the fix locally, you'll need to build the fix locally and run npm link, then in the test site repository, you'll need to run npm link @netlify/plugin-nextjs. Just a reminder that the fix can only be tested in a site that was deployed to Netlify using the plugin fix. There is no way to test this locally.

This is the configuration being used in the sites deployed in the test scenarios, https://github.com/nickytonline/next-plugin-issue-1346/blob/96471d10bb7be58287859e1e62af227eacf9e127/next.config.js

First check with the existing plugin that headers aren't being served. Navigate to https://62991c0c8fa1390082a46ace--the-awesome-nick-taylor-site-69bab.netlify.app/some-base-path/.
If you inspect the network tab for the request of the page rendered, you'll notice none of the custom headers I created are there, e.g. the x-all-pages-header header
Navigate to the deployed site that used the plugin fix, https://629984ea303dfb0ed76ba332--the-awesome-nick-taylor-site-69bab.netlify.app/some-base-path/.
Open the Network tab and you should see the following headers:

x-all-pages-header: all pages header value
x-all-pages-header2: all pages header value2
x-header-for-root-of-site: this is the header for the root of the site
x-header-for-root-of-site2: this is another the header for the root of the site

Navigate to https://629984ea303dfb0ed76ba332--the-awesome-nick-taylor-site-69bab.netlify.app/some-base-path/en/some-path/yolo
Open the Network tab and you should see the following headers:

x-all-locales-header-some-path: all locales header some path value
x-all-pages-header: all pages header value
x-all-pages-header2: all pages header value2
x-en-locale-specific-yolo-header: en locale specific yolo header value

Navigate to https://629984ea303dfb0ed76ba332--the-awesome-nick-taylor-site-69bab.netlify.app/some-base-path/en/some-path and https://629984ea303dfb0ed76ba332--the-awesome-nick-taylor-site-69bab.netlify.app/some-base-path/es/some-path
Open the Network tab and you should see the following headers for each of those pages:

x-all-locales-header-some-path: all locales header some path value
x-all-pages-header: all pages header value
x-all-pages-header2: all pages header value2

Relevant links (GitHub issues, Notion docs, etc.) or a picture of cute animal

Closes #1346

Standard checks:

Check the Deploy Preview's Demo site for your PR's functionality
Add docs when necessary

🧪 Once merged, make sure to update the version if needed and that it was published correctly.

netlify · 2022-05-24T19:28:21Z