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
2
votes
3 answers
Dynamic nested routes in Next.js
I am building an e-commerce web app in Next.js and I got stuck on product filtering. Let's say there are 3 possible filtering options:
by category - dioptric / sunglasses
by sex - men / women
by brand - rayban / gucci
Now, the filters should work…
tomasxboda
- 539
- 3
- 15
2
votes
2 answers
how to handle useRouter()s async problem in nextJS
When I click the Link in PublicMyTeam.js
it passes query(=el.group_name) using router.
// PublicMyTeam.js
{el.group_name}
But because of async problem…
hgJang
- 83
- 2
- 6
2
votes
0 answers
React Next JS : How to decide when to get query parameters server-side vs client-side?
I am new to NextJS, can someone explain to me the use case when I need to get the URL query parameters from server-side or client side ? or both?
I am using ssr (Server Side Rendering) because SEO is important to me, and I have a…
yeln
- 462
- 2
- 10
- 23
2
votes
0 answers
How to resolve unhandled runtime error while using next router
I am facing the below error while using useRouter from next/router.
TypeError: Cannot read property 'getBoundingClientRect' of null
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
function ActiveLink({…
Rudar Daman Singla
- 19
- 2
2
votes
1 answer
How to change url without refreshing to the next page using Next Js useRouter?
I am using Next.js and I want to know how to change the url on the same page without refresh it. I am using shallow=true but it still render to the next page.
This is my code:
William
- 89
- 1
- 14
2
votes
2 answers
How to pass multiple queries in next router
I am working in next.js and next-router
I have 2 data parameters that I want to pass
One is entity_id and the other is url_key.
data={
entity_id: 5,
url_key: 'canada/ontario/store_five'
}
Currently I am able to pass one url_key:
…
Ryuk
- 362
- 1
- 6
- 21
2
votes
1 answer
Pass data from page to another
I recently started working with next.js, although I already have some experience with react, I have the following folder structure:
/segments
-index.js
-[slug].js
Scenario: On page [url] / segments I get the list of segments by making a call…
Thiago Viana Enge
- 21
- 1
- 1
- 5
1
vote
0 answers
NextJS if router.back() has no history to route to, route to home
I'm using NextJS (v.13.4.15) app directory
I'm using a react-native webview to display a website inside of a mobile app, so a back button is critical for navigation (I cannot access the browser's back button)
I want something like
'use client' for…
ascentryan
- 21
- 3
1
vote
0 answers
Nextjs router.push with anchor does not work
Do anyone have an idea of why adding an anchor does not necessary work ?
I have a page /contracts with a list of items.
Within each item (div) I put an unique ID
(example:
Fabien
- 11
- 2
1
vote
0 answers
NextJS always hard refreshing when behind Cloud Front CDN
I have a NextJS application that used router.push(newRoute) to change page.
Locally, pages change without any refresh, that is what I expect (on next documentation this is called "soft navigation").
Using AWS Amplify, I have deployed this…
Francesco Meli
- 2,484
- 2
- 21
- 52
1
vote
1 answer
How to access query parameters in Next.js 13.4 with the new app router?
I'm using the latest version of Next.js (13.4) with the new app router.
In my application, I have a Link component with a button inside a ../components/products.tsx file.
Each product has a "details" button that navigates to a dynamic route using…
Andrej Capin
- 13
- 4
1
vote
1 answer
Next-connect error : unable to use next-connect for routing in my next.js project with javascript
My next version is 13.4.5 (latest)
My next-connect version is 1.0.0 (latest)
In pages>api>auth>signup.js :
import { createRouter } from "next-connect"
const handler = createRouter()
handler.post(async (req, res) => {
res.send("Welcome from the…
Riyan Ali
- 11
- 2
1
vote
1 answer
Should I await a Router.push in NextJS
I am using NextJS and import Router from 'next/router'; The method that I use to navigate between pages is Router.push('/some-page'); This method is async, yet, it works without me adding an await Router.push('/some-page'); Am I using it correctly?…
Mike M
- 4,879
- 5
- 38
- 58
1
vote
0 answers
router.push() waits for getServerSideProps() before performing the navigation
I'm currently using Next.js 13.1 with the pages directory (not using React Server components yet). In my application, when I use router.push() to navigate from page A to page B, I've noticed that the router waits for the getServerSideProps() of the…
toioski
- 1,094
- 10
- 21
1
vote
0 answers
Next.js prevent router.back() from roting back to another site
On my web app I have a blog. On each post there are a back button, not the browser back button, which should lead the user back to where they came from. Since the blog post can be linked from multiple routes I can't have a static back path.…
Webbunderhallare
- 21
- 4