rsnext/examples/dynamic-routing
James Mosier 75b25901d0
Update examples React to 16.13.1 (#14899)
Fast Refresh doesn't appear to work with older version (16.8.x) versions of React. I was able to reproduce this via this issue https://github.com/vercel/next.js/issues/14895

I updated all examples I found of React `16.8.x` to `^16.13.1` so that future installs will auto bump to the latest minor version. Previously the pinned version was causing the lock of version.
2020-07-07 03:58:13 +00:00
..
components Improve linting rules to catch more errors (#9374) 2019-11-10 19:24:53 -08:00
pages Improve linting rules to catch more errors (#9374) 2019-11-10 19:24:53 -08:00
package.json Update examples React to 16.13.1 (#14899) 2020-07-07 03:58:13 +00:00
README.md Suggest npx over npm init (#13637) 2020-06-01 17:36:57 +00:00

Dynamic Routing example

This example shows how to do dynamic routing in Next.js. It contains two dynamic routes:

  1. pages/post/[id]/index.js
    • e.g. matches /post/my-example (/post/:id)
  2. pages/post/[id]/[comment].js
    • e.g. matches /post/my-example/a-comment (/post/:id/:comment)

These routes are automatically matched by the server. You can use next/link as displayed in this example to route to these pages client side.

Deploy your own

Deploy the example using Vercel:

Deploy with Vercel

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example dynamic-routing dynamic-routing-app
# or
yarn create next-app --example dynamic-routing dynamic-routing-app

Download manually

Download the example:

curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/dynamic-routing
cd dynamic-routing

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).