Add catch all routes example and a link to it in docs (#10202)

* Added example

* Updated readme of the dynamic-routing example

* Updated catch all docs

* Simplified example

* Update examples/catch-all-routes/README.md

Co-Authored-By: Joe Haddad <joe.haddad@zeit.co>

Co-authored-by: Joe Haddad <timer150@gmail.com>

docs/routing/dynamic-routes.md

@@ -58,6 +58,13 @@ Client-side navigations to a dynamic route can be handled with [`next/link`](/do
 
 ### Catch all routes
 
+<details>
+  <summary><b>Examples</b></summary>
+  <ul>
+    <li><a href="https://github.com/zeit/next.js/tree/canary/examples/catch-all-routes">Catch All Routes</a></li>
+  </ul>
+</details>
+
 Dynamic routes can be extended to catch all paths by adding three dots (`...`) inside the brackets. For example:
 
 - `pages/post/[...slug].js` matches `/post/a`, but also `post/a/b`, `post/a/b/c` and so on.

examples/catch-all-routes/README.md

@@ -0,0 +1,55 @@
+# Catch All Routes Example
+
+This example shows how to use [Catch all routes](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes) in Next.js, which allows a dynamic route to catch all paths.
+
+The catch all page is in `pages/post/[...slug]`, it matches any path after `/post`, like the following:
+
+- `/post/first-post`,
+- `/post/2020/first-post`
+- `/post/2020/first-post/with/catch/all/routes`
+- Anything that matches the glob `/post/**`
+
+You can use `next/link` as displayed in this example to route to these pages client side.
+
+## Deploy your own
+
+Deploy the example using [ZEIT Now](https://zeit.co/now):
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/catch-all-routes)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/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
+npm init next-app --example catch-all-routes catch-all-routes-app
+# or
+yarn create next-app --example catch-all-routes catch-all-routes-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/catch-all-routes
+cd catch-all-routes
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Now](https://zeit.co/now) ([download](https://zeit.co/download)):
+
+```bash
+now
+```

examples/catch-all-routes/components/header.js

@@ -0,0 +1,36 @@
+import Link from 'next/link'
+
+const Header = () => (
+  <header>
+    <ul>
+      <li>
+        <Link href="/">
+          <a>Home</a>
+        </Link>
+      </li>
+      <li>
+        <Link href="/about">
+          <a>About</a>
+        </Link>
+      </li>
+      <li>
+        <Link
+          href="/post/[...slug]"
+          as="/post/2020/first-post/with/catch/all/routes"
+        >
+          <a>First Post</a>
+        </Link>
+      </li>
+      <li>
+        <Link
+          href="/post/[...slug]"
+          as="/post/2020/second-post/with/catch/all/routes"
+        >
+          <a>Second Post</a>
+        </Link>
+      </li>
+    </ul>
+  </header>
+)
+
+export default Header

examples/catch-all-routes/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "catch-all-routes",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  }
+}

examples/catch-all-routes/pages/about.js

@@ -0,0 +1,10 @@
+import Header from '../components/header'
+
+const About = () => (
+  <>
+    <Header />
+    <h1>About page</h1>
+  </>
+)
+
+export default About

examples/catch-all-routes/pages/index.js

@@ -0,0 +1,10 @@
+import Header from '../components/header'
+
+const Home = () => (
+  <>
+    <Header />
+    <h1>Hello World!</h1>
+  </>
+)
+
+export default Home

examples/catch-all-routes/pages/post/[...slug].js

@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router'
+import Header from '../../components/header'
+
+const Comment = () => {
+  const router = useRouter()
+  const slug = router.query.slug || []
+
+  return (
+    <>
+      <Header />
+      <h1>Slug: {slug.join('/')}</h1>
+    </>
+  )
+}
+
+export default Comment

examples/dynamic-routing/README.md

@@ -1,8 +1,6 @@
 # Dynamic Routing example
 
-This example shows usage of dynamic routing.
-
-This example contains two dynamic pages:
+This example shows how to do [dynamic routing](https://nextjs.org/docs/routing/dynamic-routes) in Next.js. It contains two dynamic routes:
 
 1. `pages/post/[id]/index.js`
    - e.g. matches `/post/my-example` (`/post/:id`)