Stack Overflow
Stack Overflow

Questions tagged [next-router]

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.

66 questions
6
votes
4 answers

Open a page in a Next.js website as an overlay

I have a website with a search on it. I'd like the user to be able to click on a search result and open the product in an overlay instead of reloading the whole page, however I would like the url in the url bar to be the correct product page so that…
jonhobbs
  • 21,469
  • 23
  • 94
  • 144
3
votes
1 answer

Redirect user after login with react redux?

I'm using react redux with Next.js and I want to redirect the user to a certain page if he matches the requirement. I added it in my useEffect and it works, but every time when I go back to the home page it redirects again to the same page. It works…
Anjula Samarasinghe
  • 63
  • 5
3
votes
4 answers

NEXT JS - How to remove Query Params?

How can I remove or update query params without refreshing the page in Next JS (React)? The user is on the URL /about?login=success&something=yes Click a button and removes ?login=success&something=yes from the URL without refreshing the page. The…
Alfrex92
  • 4,199
  • 4
  • 21
  • 37
3
votes
1 answer

import Router from 'next/router' is it ok?

Next.js documentation mentions two ways to access the router object: useRouter for functional components and withRouter for class-based components. However, it does not mention something I came across a few times which is the Router object accessed…
fredperk
  • 327
  • 1
  • 14
3
votes
2 answers

Pages are reloaded instead of routed in shopify next js app

I followed Shopify's guide, until the end of 4th step, to develop a Next JS app and I've setup two pages (embedded app navigation), Home and Page1. Now, when I click to open both pages, the app is doing a reload instead of routing... You can see…
Alexis
  • 59
  • 7
3
votes
3 answers

Next.js Router.push() reloads page automatically

Is there a way to execute a Router.push() without reloading the page using Next.js? I am using a [...all].js main file for a page that based on the url renders different components, but i want to be able to move between them without triggering a…
Francesco S
  • 1,735
  • 2
  • 12
  • 12
2
votes
1 answer

useRouter - query object is empty

i'm trying to learn routing in Next.JS but I can't manage to get the query object. File path: ./src/pages/[test]/index.tsx import { useRouter } from 'next/router'; export default function Test() { const router = useRouter(); …
Raphael Jayme
  • 23
  • 2
2
votes
1 answer

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
  • 21
  • 1
2
votes
1 answer

how to listen to page changes in nextjs

I want to reuse a menu I made in react with react-router-dom, but this time in nextjs. The goal is to change the state of the menu to 'false' and the menuName to 'menu' when I click on a link inside the menu. I use a useEffect function to listen…
Rom-888
  • 173
  • 9
2
votes
1 answer

How to server a ".html" at certain URL in a Next.js app?

I have an ".html" file that I need to serve in a certain route in my Next.js app, like this ... /pages/customr-route-name/my-html-file.html So if I go to my website and type http://example.com/custom-route-name/my-html-file.html I can see it How can…
Ruby
  • 1,492
  • 2
  • 26
  • 45
2
votes
2 answers

nextJS SSR useRouter() does not work when refresh page

I am using nextJS SSR in my project. Now when I try to use the following code to get page parameters then it shows undefined. function About() { const router = useRouter(); const { plan_id } = router.query; console.log(plan_id) } export…
Nitesh Malviya
  • 382
  • 3
  • 11
2
votes
1 answer

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
  • 333
  • 2
  • 14
2
votes
1 answer

How to use router.replace inside the client side of your app?

I'm trying to use Next.js router to redirect unauthorized users from accessing certain pages that are wrapped inside the AdminLayout component, but I got this error. Error: No router instance found. You should only use "next/router" inside the…
user10261767
2
votes
3 answers

How to get history and match in this.props in nextjs?

I want to get values of history and match in this.props. I am using next/router to import withRouter. I wanted to use this.props.match.params to get values in the url and history.push to redirect. How can get this in Next.js. Right now I am not…
Logeswari
  • 119
  • 2
  • 4
  • 7
1
vote
2 answers

Next.js routing: pushing a new route from a slug page doesn't route properly

Let's say I have 2 routes: /video and /products/[id], so my pages folder contains video.js and products/[id].js. When I use router.push or Link to navigate to /video from /products/[id], the URL gets updated to /products/video. Obviously this is not…
SkyPower
  • 93
  • 1
  • 11
1
2 3 4 5