rsnext/examples/dynamic-routing
2022-10-30 21:00:45 +01:00
..
components Run next/link codemod for Next.js 13 on examples (#41913) 2022-10-30 21:00:45 +01:00
pages Run next/link codemod for Next.js 13 on examples (#41913) 2022-10-30 21:00:45 +01:00
.gitignore Update default gitignore templates (#39051) 2022-07-26 20:08:40 -05:00
package.json [docs] Migrate dynamic routing example to typescript (#39806) 2022-08-22 08:37:36 -05:00
README.md docs(examples): improve DX while copying command to create new project (#38410) 2022-07-26 21:57:48 -05:00
tsconfig.json [docs] Migrate dynamic routing example to typescript (#39806) 2022-08-22 08:37:36 -05: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 or preview live with StackBlitz

Deploy with Vercel

How to use

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

npx create-next-app --example dynamic-routing dynamic-routing-app
yarn create next-app --example dynamic-routing dynamic-routing-app
pnpm create next-app --example dynamic-routing dynamic-routing-app

Deploy it to the cloud with Vercel (Documentation).