From ee184a11d8ef5f60f1be0551f3d64fca596fdaba Mon Sep 17 00:00:00 2001 From: Flavio Wuensche Date: Fri, 5 Feb 2021 16:07:22 +0100 Subject: [PATCH] Add example for headers and link in the docs (#21821) --- docs/api-reference/next.config.js/headers.md | 7 +++ examples/headers/.gitignore | 34 +++++++++++++ examples/headers/README.md | 23 +++++++++ examples/headers/next.config.js | 24 +++++++++ examples/headers/package.json | 15 ++++++ examples/headers/pages/about.js | 27 +++++++++++ examples/headers/pages/index.js | 40 +++++++++++++++ examples/headers/pages/news/[...slug].js | 31 ++++++++++++ examples/headers/styles.module.css | 51 ++++++++++++++++++++ 9 files changed, 252 insertions(+) create mode 100644 examples/headers/.gitignore create mode 100644 examples/headers/README.md create mode 100644 examples/headers/next.config.js create mode 100644 examples/headers/package.json create mode 100644 examples/headers/pages/about.js create mode 100644 examples/headers/pages/index.js create mode 100644 examples/headers/pages/news/[...slug].js create mode 100644 examples/headers/styles.module.css diff --git a/docs/api-reference/next.config.js/headers.md b/docs/api-reference/next.config.js/headers.md index ce3bfb9376..73623b08a2 100644 --- a/docs/api-reference/next.config.js/headers.md +++ b/docs/api-reference/next.config.js/headers.md @@ -6,6 +6,13 @@ description: Add custom HTTP headers to your Next.js app. > This feature was introduced in [Next.js 9.5](https://nextjs.org/blog/next-9-5) and up. If you’re using older versions of Next.js, please upgrade before trying it out. +
+ Examples + +
+ Headers allow you to set custom HTTP headers for an incoming request path. To set custom HTTP headers you can use the `headers` key in `next.config.js`: diff --git a/examples/headers/.gitignore b/examples/headers/.gitignore new file mode 100644 index 0000000000..1437c53f70 --- /dev/null +++ b/examples/headers/.gitignore @@ -0,0 +1,34 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/headers/README.md b/examples/headers/README.md new file mode 100644 index 0000000000..168f3c0650 --- /dev/null +++ b/examples/headers/README.md @@ -0,0 +1,23 @@ +# Headers Example + +This example shows how to use [headers in Next.js](https://nextjs.org/docs/api-reference/next.config.js/headers) to add custom HTTP headers into your Next.js app. + +The index page ([`pages/index.js`](pages/index.js)) has a list of links to pages with custom headers set up in [`next.config.js`](next.config.js). Run or deploy the app to see how it works! + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/headers&project-name=headers&repository-name=headers) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example headers headers-app +# or +yarn create next-app --example headers headers-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/headers/next.config.js b/examples/headers/next.config.js new file mode 100644 index 0000000000..d19c985079 --- /dev/null +++ b/examples/headers/next.config.js @@ -0,0 +1,24 @@ +module.exports = { + async headers() { + return [ + { + source: '/about', + headers: [ + { + key: 'X-About-Custom-Header', + value: 'about_header_value', + }, + ], + }, + { + source: '/news/:id', + headers: [ + { + key: 'X-News-Custom-Header', + value: 'news_header_value', + }, + ], + }, + ] + }, +} diff --git a/examples/headers/package.json b/examples/headers/package.json new file mode 100644 index 0000000000..765e2c306e --- /dev/null +++ b/examples/headers/package.json @@ -0,0 +1,15 @@ +{ + "name": "headers", + "version": "1.0.0", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "^16.13.1", + "react-dom": "^16.13.1" + }, + "license": "MIT" +} diff --git a/examples/headers/pages/about.js b/examples/headers/pages/about.js new file mode 100644 index 0000000000..0ab2726d59 --- /dev/null +++ b/examples/headers/pages/about.js @@ -0,0 +1,27 @@ +import Link from 'next/link' +import styles from '../styles.module.css' + +const Code = (p) => + +export default function About() { + return ( +
+
+

Path: /about

+
+

+ The response contains a custom header{' '} + X-About-Custom-Header : about_header_value. +

+

+ To check the response headers of this page, open the Network tab + inside your browser inspector. +

+ + + ← Back home + +
+
+ ) +} diff --git a/examples/headers/pages/index.js b/examples/headers/pages/index.js new file mode 100644 index 0000000000..2fc7dddf38 --- /dev/null +++ b/examples/headers/pages/index.js @@ -0,0 +1,40 @@ +import styles from '../styles.module.css' + +const Code = (p) => + +const Index = () => ( +
+
+

Headers with Next.js

+
+

+ The links below are examples of{' '} + + custom headers + {' '} + added to your Next.js app. +

+ +

+ Open next.config.js to learn more about the headers that + match the links above. +

+
+
+
+) + +export default Index diff --git a/examples/headers/pages/news/[...slug].js b/examples/headers/pages/news/[...slug].js new file mode 100644 index 0000000000..bee7a1bdba --- /dev/null +++ b/examples/headers/pages/news/[...slug].js @@ -0,0 +1,31 @@ +import { useRouter } from 'next/router' +import Link from 'next/link' +import styles from '../../styles.module.css' + +const Code = (p) => + +const News = ({ props }) => { + const { asPath } = useRouter() + + return ( +
+
+

Path: {asPath}

+
+

+ The response contains a custom header{' '} + X-News-Custom-Header : news_header_value. +

+

+ To check the response headers of this page, open the Network tab + inside your browser inspector. +

+ + ← Back home + +
+
+ ) +} + +export default News diff --git a/examples/headers/styles.module.css b/examples/headers/styles.module.css new file mode 100644 index 0000000000..cd7bec9b86 --- /dev/null +++ b/examples/headers/styles.module.css @@ -0,0 +1,51 @@ +.container { + padding: 4rem 1rem; + font-family: -apple-system, BlinkMacSystemFont, sans-serif; +} + +.container p { + margin: 1.5rem 0; +} + +.card { + max-width: 50rem; + box-shadow: -10px 10px 80px rgba(0, 0, 0, 0.12); + border: 1px solid #eee; + border-radius: 8px; + padding: 2rem; + margin: 0 auto; +} + +.inlineCode { + color: #be00ff; + font-size: 16px; + white-space: pre-wrap; +} + +.inlineCode::before, +.inlineCode::after { + content: '`'; +} + +.hr { + border: 0; + border-top: 1px solid #eaeaea; + margin: 1.5rem 0; +} + +.list { + padding-left: 1.5rem; + margin: 1.25rem 0; + list-style-type: none; +} + +.list li { + margin-bottom: 0.75rem; +} + +.list li:before { + content: '-'; + color: #999999; + position: absolute; + margin-left: -1rem; +}