DEV Community

Preet Suthar
Preet Suthar

Posted on • Originally published at preetsuthar.me

Force refresh page in Next.js

#nextjs #programming #webdev #beginners

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
dotallio profile image
Dotallio •

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

Collapse
 
preetsuthar17 profile image
Preet Suthar •

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