Force Reload Next.js Pages

Force Reload Next.js Pages

ยท

1 min read

In some circumstances, you might need to force refresh a page, maybe you have data that needs to be fetched from the server but aren't using a Stale While Revalidating method. For example a user profile page, where a user might update a password or email.

Prefer a video? Check below

When in a component

When you are in a component, Next.js has the useRouter hook that allows you to, well, hook into the router functionality. When using the hook you can do the following

import { useRouter } from 'next/router'

export default function myComponent() {

const router = useRouter()

router.reload()
}

When you aren't in a component

There are on occasion where you might be out of a component, such as a utility or something similar. You can still force the reload, but you can't use the hook to do this. Instead you can still use the router functionality:

import Router from 'next/router'

Router.reload()

This will force the reload but without the hook, allowing you to do it wherever you need it outside of component function.