next/router is a library provided by Next.js. Use this tag if you need help with the useRouter hook, the withRouter HOC, or with the extracted information from the router object.
Questions tagged [next-router]
293 questions
4
votes
2 answers
Next JS - Is it possible to scroll to an ID on the page without changing the URL?
I want to scroll to different parts of my page by clicking, but I don't want the URL to get updated in the address bar.
For example, I have an about section on my page, with the ID about:
By clicking a link on the page, I want to…
user2475306
- 334
- 4
- 12
4
votes
2 answers
Next.js: How to prevent flash of the Unauthorized route/page prior to redirect when implementing a private route?
Essentially I created a HOC for two pages in my Next.js app (i.e. profile and dashboard) two prevent users from accessing them if they're not authorized.
Example: pages/profile.js
import withAuth from "../components/AuthCheck/index";
function…
Antonio Pavicevac-Ortiz
- 7,239
- 17
- 68
- 141
4
votes
2 answers
How to make Next.js links dynamic based on current dynamic page?
I am building an LMS using Next.js. So far my project structure is localhost/courses/1. Every course will have 7 pages. Dashboard, Assignment, TestAndQuizzes, Gradebook, Resources, Announcements, and Roster. I have all the components and pages…
SSubedi
- 79
- 1
- 11
4
votes
1 answer
Next.js routing with "next-connect" for subroutes
In my Next.js project, I created an express like route->middleware->endpoint pattern using next-connect package.
I have this route pattern:
/api/tours
/api/tours/:id
/api/tours/top-5-cheap
/api/tours/stats
/api/tours/monthly-plan
...
In my…
ABDULLOKH MUKHAMMADJONOV
- 4,249
- 3
- 22
- 40
4
votes
3 answers
Next.js behavior on back button pressed
I have a page I am trying to fix in order to keep scroll position when user presses back button (browser). Let's say I have a component called list, where I show the user some products. To see all the products the user can scroll down the list…
Henry Peregrino
- 126
- 1
- 1
- 8
4
votes
1 answer
Rederict path, specified in 'next.config.js' file for one project, has been implemented for all projects
A bit of an odd one...
I've specified a redirect path for the root index page for one of my projects. It worked no problem and redirected me to the correct path, but now it redirects me to that same path for the root index page for all of my other…
Tom Hayton
- 73
- 5
4
votes
3 answers
How do I access the current route on a Next.JS custom 404 page?
I have a custom 404 page in my Next.JS app (404.js). On the page, I'd like to display a message like The route /not-a-route does not exist, however when using Next.js's useRouter() and router.pathname, the router thinks I'm on /404…
James Whiteley
- 3,363
- 1
- 19
- 46
4
votes
2 answers
Dynamic route not working on page refresh with Next.js
I'm used Next.js but i have an error with dynamic route.
In my application I use getStaticPaths, getStaticProps and this:
{offer.title}
When I click…
jean A
- 41
- 1
- 2
4
votes
2 answers
Typical differences between routers and links in NextJS
I am new to NextJS. I would like to know the typical variations and use cases between next/router and next/link.
Which one should I use in various scenarios? Which does what? For instance, if I want to load shared components or navigate among pages…
geobudex
- 536
- 1
- 8
- 24
4
votes
2 answers
next/router: Cannot read property 'pathname' of null (storybook)
I have an app which uses Next.js and MaterialUI. In order for Link component to work properly with MaterialUI I have a special Link component that looks like this:
function Link(props) {
const {
href,
activeClassName = 'active',
…
sinnerwithguts
- 573
- 7
- 20
3
votes
0 answers
I have to click 2 times to the link in mobile view of my Next JS application in order to change routes
I am building a Next JS application,
On the desktop view, there is no problem, but when it changes to the mobile view after a scroll event or changing routes when I want to click on a link/button, etc. I need to click two times on it. I am…
Semre
- 31
- 2
3
votes
0 answers
next.js update parent URL from Iframe with next/router
we are using next.js framework to serve our pages, and in one of the cases we are rendering a page inside an iframe rendered in modal in the original page,
and we are using next/router for routing,
The problem: using a router.push inside the iframe…
Abdul Fattah Boshi
- 333
- 1
- 4
- 18
3
votes
3 answers
How to force reload page when next.js router push the same route with different query?
I'm developing a product detail page with /proudct?id=xxx route, when user in /proudct?id=1 jump to /proudct?id=2, only state dependency router.query.id change, I want to force reload the whole page instead of update some state.
JayTam
- 209
- 2
- 11
3
votes
1 answer
I want to create a confirmation modal before route changes in Next.js
I have code block like this
const onRouteChangeStart = React.useCallback(() => {
if (formState.isDirty) {
if (window.confirm('Confirmation message')) {
return true;
}
NProgress.done();
throw "Abort route change by…
gungor
- 114
- 1
- 6
3
votes
1 answer
How to prevent getServerSideProps from running again when pushing query param?
I'm asking because I don't know exactly what to do. When my page is loaded, I have a table yield that I got from the API with getServerSideProps. Like this:
export const getServerSideProps: GetServerSideProps = async (
context
) => {
…
Winterard
- 33
- 4