reading-notes

Code Fellows 401

Day 41 Notes

Home

Reading

Next.js - Dynamic Routes

Next.js - Deployment

Videos

Optional: Next.js 10 is here

Bookmark and Review

Next.js - Static File Serving

Things I want to know more about

• Dynamic routes allow you to create pages with URLs that vary based on user input or data from an external source.
• In Next.js, you can create a dynamic route by creating a file with square brackets in the filename (e.g. pages/post/[id].js).
• The filename with square brackets determines the name of the route parameter (in this case, id), which can be accessed in your component via useRouter() and query.id.
• You can fetch data for a dynamic route using getStaticPaths() and getStaticProps(). getStaticPaths() generates a list of paths to pre-render based on data from an external source, while getStaticProps() fetches the data for a specific path.
• If you don’t know all the possible values for a dynamic route, you can use fallback: true in getStaticPaths() to generate fallback pages for unknown routes. These fallback pages will be generated on-demand the first time a user requests them.
• You can customize the loading state of fallback pages using fallback: { fallback: true, …} and a loading component.
• You can also use dynamic routes with server-side rendering (SSR) and client-side rendering (CSR) by using getServerSideProps() or getInitialProps().
• Finally, you can create nested dynamic routes by nesting square brackets in your filename (e.g. pages/post/[id]/[comment].js). The route parameters will be accessible via query.id and query.comment.