In NextJS, dynamic routes are created by adding square brackets `[]` to a page name inside the `pages` folder. For example, `pages/posts/[postId].js` would match `/posts/a` or `/posts/b`, where `a` and `b` would be the `postId`.
Inside your dynamic page, you can access the route parameters using the `useRouter` hook from `next/router`. This hook returns an object with a query field containing all the dynamic route parameters.
Page Generation in NextJS
NextJS supports multiple ways of generating pages, Static Generation (SG) and Server Side Rendering (SSR). They're both powerful strategies with their use cases.
Static Generation is the pre-rendering of a page at build time, meaning your page is generated at build time and will be reused on each request. It's ideal for pages that can be pre-rendered ahead of a user's request and don’t require unique data per request.
Server Side Rendering, on the other hand, is the process of generating the HTML of a page on each request. It is ideal for pages that show frequently updated data or require unique data per request.
Which one to choose depends on your application needs. However, NextJs provides the flexibility of allowing you to choose on a per-page basis. You can create a hybrid NextJS app with both Static Generation and Server Side Rendered pages.
In conclusion, dynamic routing and page generation are powerful features in NextJS that can save you time and make your applications more efficient.
Are you a developer looking for a fast and efficient way to launch your MVPs? Try PullTheCode, a NextJS boilerplate designed to streamline your development process by providing you with essential features like SEO & Blog integration, Stripe payments, SQL with Prisma, SSO with PassportJS, Google Analytics, and more. With PullTheCode, you can focus on developing your application's unique features while leaving the boilerplate to us. Plus, you'll get weekly updates and new modules like Scraping or Internalization (coming soon).