Trigger client-side reload in next.js

Didn't see an answer that was really what I was looking for,

this worked for me:

import Router from 'next/router'

Router.reload(window.location.pathname);

Assume, a user is on the

http://www.example.com/profile

the user has edited the profile and for some reason, you need to reload the same page.

If your case is similar to this, you could use Router.reload();

Remember, you must import Router object like this import Router from "next/router";

For more information: https://nextjs.org/docs/api-reference/next/router#routerreload


A better option is to use router.replace(router.asPath)

replace does not create a new history item so Back button works as expected

Details explained in this article https://www.joshwcomeau.com/nextjs/refreshing-server-side-props/