ProNextJS
    Professional Next.js Course
    Loading price
    30-Day Money-Back Guarantee
    lesson

    Dynamic Routes in Next.js

    Jack HerringtonJack Herrington
    Code

    Next.js offers several methods to define dynamic routes in your application.

    One way to signal a dynamic route is by directly accessing request objects within your route handler. For instance, you can fetch request headers or cookies from next/headers. Another option would be useSearchParams from next/navigation:

    import { cookies, headers } from 'next/headers';
import { useSearchParams } from 'next/navigation';

export default function Home() {
  headers();
  cookies();
  useSearchParams();

    These actions implicitly suggest to Next.js that the route relies on dynamic data.

    Using the dynamic Export

    For explicit control, Next.js allows you to export a dynamic constant within your route handler. This constant accepts different options to fine-tune the dynamic behavior.

    Setting dynamic to 'force-dynamic' ensures that Next.js treats the route as dynamic, even if it doesn't detect any dynamic data access:

    export const dynamic = 'force-dynamic';

    Other options for the dynamic constant include:

    • 'auto': The default setting, allowing Next.js to determine dynamic behavior automatically based on code analysis.
    • 'error': The route is considered dynamic if there's an error during data fetching.
    • 'force-static': Forces the route to be static, even if dynamic data access is detected.

    Revalidation for Static Content

    While dynamic routes offer flexibility, there are times when we desire the performance benefits of static generation but with occasional content updates. Next.js supports this with a feature we'll look at in the next lesson.

    Transcript

    All right. So one way that we can indicate the Next.js that this is a dynamic route is by doing things that are dynamic. So one of those is to access the request. So do that. There are a couple of different ways in an RSC.

    I can access the headers of the request. I use the headers function from next headers to access those headers. I can also access cookies. If I'm in a client component, I can also access the search params. So I use use search params, and that would indicate to Next.js that this is a dynamic route because we're going to be looking at the search params and making requests based on those search params.

    Let's go see if using either cookies or headers turns this into a dynamic route. We'll do build and start again. And If we look at the route table, we can see that slash is defined with the F, which means that it is a dynamic route. Another thing we can do is simply just tell Next.js that this is a dynamic route. To do that, we export a constant called dynamic, and we tell Next.js to force this to be dynamic by saying, force dynamic.

    This too gives us a dynamic route. The other options are auto. This is the auto detect behavior. It is the default. Next.js is going to look at what we do during our processing of the request to see if this is a dynamic route.

    There's also error. In error mode, it looks to see if anything you've done to get data has had an error, and if it has an error, then it becomes a dynamic route. Finally, if you want to go the other direction, that means that even if it finds that you're accessing the request, it would still mark this as static. So I'll keep that as force dynamic, but I'll just comment it out for the moment. Now there's quite a difference between static on one side and dynamic on the other side.

    Is there a way where we can have a static page that every so often or every time we think it needs to, we'll revalidate to get new static content? Well, it turns out that that is built into the framework as well. We'll check that out in the next video.