Example for Redirects (Custom routes) (#15411)

This PR adds example for #15073 
> - [ ] `redirects` For [docs/api-reference/next.config.js/redirects.md](https://github.com/vercel/next.js/blob/canary/docs/api-reference/next.config.js/redirects.md)

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.
 
+<details open>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/vercel/next.js/tree/canary/examples/redirects">Redirects</a></li>
+  </ul>
+</details>
+
 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.

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

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)).

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,
+      },
+    ]
+  },
+}

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"
+  }
+}

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 (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1>About Page</h1>
+        <hr className={styles.hr} />
+        <Link href="/">
+          <a> &larr; Back home</a>
+        </Link>
+      </div>
+    </div>
+  )
+}

examples/redirects/pages/index.js

@@ -0,0 +1,55 @@
+import styles from '../styles.module.css'
+import Link from 'next/link'
+
+const Code = (p) => <code className={styles.inlineCode} {...p} />
+
+const Index = () => (
+  <div className={styles.container}>
+    <div className={styles.card}>
+      <h1>Redirects with Next.js</h1>
+      <hr className={styles.hr} />
+      <p>
+        The links below are{' '}
+        <a href="https://nextjs.org/docs/api-reference/next.config.js/redirects">
+          custom <Code>redirects</Code>
+        </a>{' '}
+        that redirect an incoming request path to a different destination path.
+      </p>
+      <nav>
+        <ul className={styles.list}>
+          <li>
+            <Link href="/team">
+              <a>Visit /team (redirects to /about)</a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/old-blog/hello-world">
+              <a>
+                Visit /old-blog/hello-world (redirects to /news/hello-world)
+              </a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/blog/a/b/hello-world">
+              <a>
+                Visit /blog/a/b/hello-world (redirects to /news/a/b/hello-world)
+              </a>
+            </Link>
+          </li>
+          <li>
+            <Link href="/post/123">
+              <a>Visit /post/123 (redirects to /news/123)</a>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+      <p>
+        Open <Code>next.config.js</Code> to learn more about the redirects that
+        match the links above.
+      </p>
+      <hr className={styles.hr} />
+    </div>
+  </div>
+)
+
+export default Index

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) => <code className={styles.inlineCode} {...p} />
+
+const News = ({ props }) => {
+  const { asPath, route, query } = useRouter()
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <h1>Path: {asPath}</h1>
+        <hr className={styles.hr} />
+        <p>
+          This page was rendered by <Code>{`pages${route}.js`}</Code>.
+        </p>
+        <p>
+          The query <Code>slug</Code> for this page is:{' '}
+          <Code>{JSON.stringify(query.slug)}</Code>
+        </p>
+        <Link href="/">
+          <a> &larr; Back home</a>
+        </Link>
+      </div>
+    </div>
+  )
+}
+
+export default News

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;
+}

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*',

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"
   },