From d346e2e45425d3c5c18442ce47c8cfd0bae15290 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Wed, 22 Jan 2020 00:11:22 -0500 Subject: [PATCH 1/5] Added example --- 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 | 18 ++++++ 6 files changed, 144 insertions(+) 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/examples/catch-all-routes/README.md b/examples/catch-all-routes/README.md new file mode 100644 index 000000000000000..955af3e0a9e6437 --- /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), 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 000000000000000..bfc1981ffb2412d --- /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 000000000000000..fd3227483d8ce62 --- /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 000000000000000..255d0764b4467ac --- /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 000000000000000..0f56525ada213df --- /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 000000000000000..d4b01c790addf40 --- /dev/null +++ b/examples/catch-all-routes/pages/post/[...slug].js @@ -0,0 +1,18 @@ +import { useRouter } from 'next/router' +import Header from '../../components/header' + +const Comment = () => { + const router = useRouter() + const { slug = [] } = router.query + const [year, ...postSlug] = slug + + return ( + <> +
+

Year: {year}

+

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

+ + ) +} + +export default Comment From cd24385648ef6b7535cb5a3782a45004ff37b374 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Wed, 22 Jan 2020 01:06:38 -0500 Subject: [PATCH 2/5] Updated readme of the dynamic-routing example --- examples/catch-all-routes/README.md | 2 +- examples/dynamic-routing/README.md | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/catch-all-routes/README.md b/examples/catch-all-routes/README.md index 955af3e0a9e6437..5573ba675007987 100644 --- a/examples/catch-all-routes/README.md +++ b/examples/catch-all-routes/README.md @@ -1,6 +1,6 @@ # Catch All Routes Example -This example shows how to use [Catch all routes](https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes), which allows a dynamic route to catch all paths. +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: diff --git a/examples/dynamic-routing/README.md b/examples/dynamic-routing/README.md index 9d791190e9007bd..e5611c521fe48bd 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`) From a8ba27052630baeba21058718fc53d8319ee5854 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Wed, 22 Jan 2020 01:09:06 -0500 Subject: [PATCH 3/5] Updated catch all docs --- docs/routing/dynamic-routes.md | 9 ++++++++- docs/routing/introduction.md | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/routing/dynamic-routes.md b/docs/routing/dynamic-routes.md index b69af21ae98f8fe..0be3069dacd123a 100644 --- a/docs/routing/dynamic-routes.md +++ b/docs/routing/dynamic-routes.md @@ -58,9 +58,16 @@ 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]` matches `/post/a`, but also `post/a/b`, `post/a/b/c` and so on. +- `pages/post/[...slug].js` matches `/post/a`, but also `post/a/b`, `post/a/b/c` and so on. Matched parameters will be sent as a query parameter (`slug` in the example) to the page, and it will always be an array, so, the path `/post/a` will have the following `query` object: diff --git a/docs/routing/introduction.md b/docs/routing/introduction.md index 1b92f8337825349..4191ff1d4ece9c1 100644 --- a/docs/routing/introduction.md +++ b/docs/routing/introduction.md @@ -30,7 +30,7 @@ To match a dynamic segment you can use the bracket syntax. This allows you to ma - `pages/blog/[slug].js` → `/blog/:slug` (`/blog/hello-world`) - `pages/[username]/settings.js` → `/:username/settings` (`/foo/settings`) -- `pages/post/[...all]` → `/post/*` (`/post/2020/id/title`) +- `pages/post/[...all].js` → `/post/*` (`/post/2020/id/title`) ## Linking between pages From 28eb4052fdbb8ed597d52a992714d02b328cd0e4 Mon Sep 17 00:00:00 2001 From: Luis Alvarez Date: Wed, 22 Jan 2020 09:36:17 -0500 Subject: [PATCH 4/5] Simplified example --- examples/catch-all-routes/pages/post/[...slug].js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/catch-all-routes/pages/post/[...slug].js b/examples/catch-all-routes/pages/post/[...slug].js index d4b01c790addf40..d75fe949005d4ab 100644 --- a/examples/catch-all-routes/pages/post/[...slug].js +++ b/examples/catch-all-routes/pages/post/[...slug].js @@ -3,14 +3,12 @@ import Header from '../../components/header' const Comment = () => { const router = useRouter() - const { slug = [] } = router.query - const [year, ...postSlug] = slug + const slug = router.query.slug || [] return ( <>
-

Year: {year}

-

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

+

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

) } From 68c40e4ebe1c7e03d84a04bb67af9256160c8bd0 Mon Sep 17 00:00:00 2001 From: Luis Alvarez D Date: Mon, 27 Jan 2020 09:46:48 -0500 Subject: [PATCH 5/5] Update examples/catch-all-routes/README.md Co-Authored-By: Joe Haddad --- examples/catch-all-routes/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/catch-all-routes/README.md b/examples/catch-all-routes/README.md index 5573ba675007987..b26d655e71dd23f 100644 --- a/examples/catch-all-routes/README.md +++ b/examples/catch-all-routes/README.md @@ -7,7 +7,7 @@ The catch all page is in `pages/post/[...slug]`, it matches any path after `/pos - `/post/first-post`, - `/post/2020/first-post` - `/post/2020/first-post/with/catch/all/routes` -- Anything that matches the glob `/post/*` +- Anything that matches the glob `/post/**` You can use `next/link` as displayed in this example to route to these pages client side.