reading-notes

Dynamic Routes

Reading

Notes

Summary

Dynamic routes in Next.js allow you to define routes with a dynamic URL structure, which can be determined at runtime, based on the incoming request. Dynamic routes make it possible to create pages with URL patterns that contain variables or dynamic segments.

You should use dynamic routes when you need to display content that is specific to a particular item or set of items, and that content is best accessed by a unique URL.

By “content that is specific to a particular item or set of items,” I mean information or data that belongs to a unique item or group of items. For example, if you have a list of blog posts on a website, each post would have its own specific content, such as a title, body, and author.

By “best accessed by a unique URL,” I mean that it is easier for users to access and identify a specific item if it has its own URL. For example, having a URL for each blog post, such as “/posts/{post-id}” makes it easy for users to access and share a specific post.

For example, you might want to create a blog website where each blog post has its own URL, such as /posts/{post-id}. The post-id part of the URL would be a dynamic segment, and it would determine which blog post to display.

So, in general, you should use dynamic routes when you want to provide users with a way to access specific items on your website through unique URLs. This makes it easier for users to find and share the content they’re looking for, and provides a better user experience overall.

Dynamic Routes Summary

Syntax

getStaticProps

getStaticProps is a Next.js function that allows you to fetch data for a specific page and make it available as a prop to the component that represents that page. This function is used to create static pages in Next.js, which are pre-rendered at build time and can be served directly from a CDN, providing fast loading times for the user.

The getStaticProps function is called on the server at build time and is used to fetch data for the page. The data is then passed as a prop to the component that represents the page. The function takes a single argument, which is an object that contains information about the current request. This object can be used to access the URL parameters and other information about the request.

// pages/posts/[id].js

export default function Post({ post }) { // {post} is the data returned as props
  return <h1>{post.title}</h1>;
}

export async function getStaticProps({ params }) {
  // get the post data from the database or API based on the id from the URL
  const post = await getPost(params.id);

  // return the post data as a prop
  return { props: { post } };
}

getStaticPaths

getStaticPaths is a Next.js function that is used to generate the set of static paths for a dynamic route. It is called during the build process to generate the necessary HTML files for the dynamic routes, and its return value determines the set of paths that will be pre-rendered as static pages.

Example:

export async function getStaticPaths() {
  const posts = await getPosts();
  const paths = posts.map((post) => ({
    params: { id: post.id.toString() },
  }));

  return { paths, fallback: false };
}

In this example, getStaticPaths is used to fetch a list of blog posts and generate the set of static paths for each post. The function returns an object with two properties:

The paths array is used to generate the static HTML files for each dynamic route, so that each blog post is accessible at a unique URL. The fallback value of false indicates that there is no fallback to client-side rendering, which means that if a user tries to access a path that doesn’t exist, they will receive a 404 error.

In summary, getStaticPaths is used to generate the set of static paths for a dynamic route and to determine the set of paths that will be pre-rendered as static pages.

Link accepts the following props: