From 57f72eac9eefb04d415f2df6692947644f63ee48 Mon Sep 17 00:00:00 2001 From: Luis Alvarez D Date: Mon, 27 Jan 2020 13:29:05 -0500 Subject: [PATCH] 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 Co-authored-by: Joe Haddad --- docs/routing/dynamic-routes.md | 7 +++ examples/catch-all-routes/README.md | 55 +++++++++++++++++++ .../catch-all-routes/components/header.js | 36 ++++++++++++ examples/catch-all-routes/package.json | 15 +++++ examples/catch-all-routes/pages/about.js | 10 ++++ examples/catch-all-routes/pages/index.js | 10 ++++ .../catch-all-routes/pages/post/[...slug].js | 16 ++++++ examples/dynamic-routing/README.md | 4 +- 8 files changed, 150 insertions(+), 3 deletions(-) create mode 100644 examples/catch-all-routes/README.md create mode 100644 examples/catch-all-routes/components/header.js create mode 100644 examples/catch-all-routes/package.json create mode 100644 examples/catch-all-routes/pages/about.js create mode 100644 examples/catch-all-routes/pages/index.js create mode 100644 examples/catch-all-routes/pages/post/[...slug].js diff --git a/docs/routing/dynamic-routes.md b/docs/routing/dynamic-routes.md index 483de9d173..0be3069dac 100644 --- a/docs/routing/dynamic-routes.md +++ b/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 +
+ Examples + +
+ 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. diff --git a/examples/catch-all-routes/README.md b/examples/catch-all-routes/README.md new file mode 100644 index 0000000000..b26d655e71 --- /dev/null +++ b/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 +``` diff --git a/examples/catch-all-routes/components/header.js b/examples/catch-all-routes/components/header.js new file mode 100644 index 0000000000..bfc1981ffb --- /dev/null +++ b/examples/catch-all-routes/components/header.js @@ -0,0 +1,36 @@ +import Link from 'next/link' + +const Header = () => ( +
+ +
+) + +export default Header diff --git a/examples/catch-all-routes/package.json b/examples/catch-all-routes/package.json new file mode 100644 index 0000000000..fd3227483d --- /dev/null +++ b/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" + } +} diff --git a/examples/catch-all-routes/pages/about.js b/examples/catch-all-routes/pages/about.js new file mode 100644 index 0000000000..255d0764b4 --- /dev/null +++ b/examples/catch-all-routes/pages/about.js @@ -0,0 +1,10 @@ +import Header from '../components/header' + +const About = () => ( + <> +
+

About page

+ +) + +export default About diff --git a/examples/catch-all-routes/pages/index.js b/examples/catch-all-routes/pages/index.js new file mode 100644 index 0000000000..0f56525ada --- /dev/null +++ b/examples/catch-all-routes/pages/index.js @@ -0,0 +1,10 @@ +import Header from '../components/header' + +const Home = () => ( + <> +
+

Hello World!

+ +) + +export default Home diff --git a/examples/catch-all-routes/pages/post/[...slug].js b/examples/catch-all-routes/pages/post/[...slug].js new file mode 100644 index 0000000000..d75fe94900 --- /dev/null +++ b/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 ( + <> +
+

Slug: {slug.join('/')}

+ + ) +} + +export default Comment diff --git a/examples/dynamic-routing/README.md b/examples/dynamic-routing/README.md index 9d791190e9..e5611c521f 100644 --- a/examples/dynamic-routing/README.md +++ b/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`) -- GitLab