This is a repo tracking (another) rebuild process for my personal website. Originally built using vanilla HTML, CSS and JavaScript in this mySiteVanilla repository, I later rebuilt the site in React in this mySiteReact repository, to get some practice in with an unfamiliar technology. For the sake of better routing and speed, I since rebuilt the site again in Next.js, which is the current version!
It's a really fun and useful learning exercise to try and accomplish similar goals in different technologies. For the next rebuild, I'm thinking about trying out some UI libraries, so that I can get a little bit more practice in with those, but we'll find out what happens when we get there!
This example shows how to do dynamic routing in Next.js. It contains two dynamic routes:
pages/post/[id]/index.js- e.g. matches
/post/my-example(/post/:id)
- e.g. matches
pages/post/[id]/[comment].js- e.g. matches
/post/my-example/a-comment(/post/:id/:comment)
- e.g. matches
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 the example using Vercel or preview live with StackBlitz
Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example dynamic-routing dynamic-routing-appyarn create next-app --example dynamic-routing dynamic-routing-apppnpm create next-app --example dynamic-routing dynamic-routing-appDeploy it to the cloud with Vercel (Documentation).