NextJs Dynamic Pages

Guides lead a user through a specific task they want to accomplish, often with a sequence of steps. Writing a good guide requires thinking about what your users are trying to do.

force-dynamic export

It will force the page to re-render on every request.

export const dynamic = "force-dynamic";

revalidate export value

It will re-render on every request

export const revalidate = 0;

Setting the value something other than zero (0) will make the page static and nextjs will rebuild that page after specified interval.

export const revalidate = 10; // It will rebuild the page every 10 seconds

Make a component dynamic

Force dynamic and revalidate only works on page levels. But if we want to make a component dynamic without specifying in the page level we can use the unstable_noStore() function in the component.

import { unstable_noStore } from "next/cache";

export const Component = () => {
  unstable_noStore();

  return <div>Dynamic Component</div>;
};