diff --git a/docs/api-reference/next.config.js/redirects.md b/docs/api-reference/next.config.js/redirects.md index d1eb3929e8500..02b9771af56e5 100644 --- a/docs/api-reference/next.config.js/redirects.md +++ b/docs/api-reference/next.config.js/redirects.md @@ -6,6 +6,13 @@ description: Add redirects 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 + +
+ Redirects allow you to redirect an incoming request path to a different destination path. Redirects are only available on the Node.js environment and do not affect client-side routing. diff --git a/examples/redirects/.gitignore b/examples/redirects/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ b/examples/redirects/.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/redirects/README.md b/examples/redirects/README.md new file mode 100644 index 0000000000000..bda006d6002d8 --- /dev/null +++ b/examples/redirects/README.md @@ -0,0 +1,23 @@ +# Redirects Example + +This example shows how to use [redirects in Next.js](https://nextjs.org/docs/api-reference/next.config.js/redirects) to redirect an incoming request path to a different destination path. + +The index page ([`pages/index.js`](pages/index.js)) has a list of links that match the redirects defined 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): + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/redirects) + +## 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 redirects redirects-app +# or +yarn create next-app --example redirects redirects-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/redirects/next.config.js b/examples/redirects/next.config.js new file mode 100644 index 0000000000000..acccfa8d7edf4 --- /dev/null +++ b/examples/redirects/next.config.js @@ -0,0 +1,34 @@ +module.exports = { + // Uncomment the line below to enable basePath, pages and + // redirects will then have a path prefix (`/app` in this case) + // + // basePath: '/app', + + async redirects() { + return [ + { + source: '/team', + destination: '/about', + permanent: false, + }, + // Path Matching - will match `/old-blog/a`, but not `/old-blog/a/b` + { + source: '/old-blog/:slug', + destination: '/news/:slug', + permanent: false, + }, + // Wildcard Path Matching - will match `/blog/a` and `/blog/a/b` + { + source: '/blog/:slug*', + destination: '/news/:slug*', + permanent: false, + }, + // Regex Path Matching - The regex below will match `/post/123` but not `/post/abc` + { + source: '/post/:slug*', + destination: '/news/:slug*', + permanent: false, + }, + ] + }, +} diff --git a/examples/redirects/package.json b/examples/redirects/package.json new file mode 100644 index 0000000000000..0d00e77f35f5d --- /dev/null +++ b/examples/redirects/package.json @@ -0,0 +1,14 @@ +{ + "name": "redirects", + "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" + } +} diff --git a/examples/redirects/pages/about.js b/examples/redirects/pages/about.js new file mode 100644 index 0000000000000..b58d38f59dfe1 --- /dev/null +++ b/examples/redirects/pages/about.js @@ -0,0 +1,16 @@ +import Link from 'next/link' +import styles from '../styles.module.css' + +export default function About() { + return ( +
+
+

About Page

+
+ + ← Back home + +
+
+ ) +} diff --git a/examples/redirects/pages/index.js b/examples/redirects/pages/index.js new file mode 100644 index 0000000000000..65869e02c032a --- /dev/null +++ b/examples/redirects/pages/index.js @@ -0,0 +1,55 @@ +import styles from '../styles.module.css' +import Link from 'next/link' + +const Code = (p) => + +const Index = () => ( +
+
+

Redirects with Next.js

+
+

+ The links below are{' '} + + custom redirects + {' '} + that redirect an incoming request path to a different destination path. +

+ +

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

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

Path: {asPath}

+
+

+ This page was rendered by {`pages${route}.js`}. +

+

+ The query slug for this page is:{' '} + {JSON.stringify(query.slug)} +

+ + ← Back home + +
+
+ ) +} + +export default News diff --git a/examples/redirects/styles.module.css b/examples/redirects/styles.module.css new file mode 100644 index 0000000000000..cd7bec9b86a9b --- /dev/null +++ b/examples/redirects/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; +} diff --git a/examples/rewrites/next.config.js b/examples/rewrites/next.config.js index be6f24b054da1..ade12e098a70d 100644 --- a/examples/rewrites/next.config.js +++ b/examples/rewrites/next.config.js @@ -14,7 +14,7 @@ module.exports = { source: '/post/:slug', destination: '/news/:slug', }, - // Wildcard Path Matching - will match `/news/a` and `/news/a/b` + // Wildcard Path Matching - will match `/blog/a` and `/blog/a/b` { source: '/blog/:slug*', destination: '/news/:slug*', diff --git a/examples/rewrites/package.json b/examples/rewrites/package.json index 460cf0fcad9ff..23c6c7e74db8e 100644 --- a/examples/rewrites/package.json +++ b/examples/rewrites/package.json @@ -7,7 +7,7 @@ "start": "next start" }, "dependencies": { - "next": "9.4.5-canary.43", + "next": "latest", "react": "^16.13.1", "react-dom": "^16.13.1" },