Force refresh page in Next.js

If you’re inside a React component, grab the router instance with the useRouter hook:

import { useRouter } from "next/router";

function MyComponent() {
  const router = useRouter();

  // reload the current page
  router.reload(window.location.pathname);
}

If you need to trigger a reload from outside a component—for example, in a plain utility module—just import the singleton Router instead:

import Router from "next/router";

// reload the current page
Router.reload(window.location.pathname);

Comments

[Dotallio]

Really useful breakdown, especially covering both cases! Have you run into any SEO or state issues from doing hard reloads like this?

[Preet Suthar]

I don't really use force refresh that much so I haven't noticed many issues