Force Reload Next.js Pages

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.

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.