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.

293 questions
10
votes
5 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
  • 26,684
  • 35
  • 115
  • 170
10
votes
2 answers

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
  • 2,207
  • 12
  • 42
  • 71
9
votes
5 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
  • 794
  • 1
  • 9
  • 17
8
votes
2 answers

How to force default locale in the URL when clicking a link in Next.js

For the SEO purposes I need to set up English as default language -> mynextapp.com/ when user enters the website, he/she can choose between ENGLISH or FRENCH, if English is selected the url will change to mynextapp.com/en, if the French will be…
user15030566
7
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
  • 115
  • 1
  • 6
6
votes
2 answers

NextJs router push unknown key passed via urlObject

I have nextjs / react app in which I am using next router to add some queries to my URL. The chrome dev console gives me alot of warnings using this function: const putTargetsToQueryParams = (targets: IFragranceNote[]) => { const data =…
juhend23d
  • 103
  • 1
  • 6
6
votes
2 answers

How to trigger hard refresh when redirecting to a different page in Next.js?

I have a to a certain page on my Next.js website. Upon clicking it, I want the webpage to hard reload after it redirects to the destination page (whether it reloads before or after the redirect is not important). I have tried using…
Niranjan Rajesh
  • 85
  • 1
  • 1
  • 4
6
votes
1 answer

storybook + nextjs router: NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider

I'm really fighting to get storybook, and nextjs router to play together. I'm getting the following error: NextContext.Provider is undefined, please add it to parameters.nextRouter.Provider I've setup a nextjs + storybook project. Now I have a…
TheSoul
  • 4,906
  • 13
  • 44
  • 74
6
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
  • 121
  • 1
  • 8
5
votes
2 answers

How to pass data with next router without showing it in the URL?

I am using next router and I want to pass data to another page but I don't want the data to be shown in the URL I have a button once clicked it redirects to another page and pass an object myObject to it. const router = useRouter(); const myObject =…
Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
5
votes
3 answers

Next.js : router.push not refreshing the page

I'm building a next.js page /page/data/[dataId] (this page is navigated when A user clicks on a link from page /page/data , I fetch the list of items through an API ). When user clicks on a button , I call an API to delete this item from DB . Once…
programoholic
  • 4,830
  • 5
  • 20
  • 59
5
votes
3 answers

Add multiple query params with the same key with next/router

I'm filtering results from an API utilizing query parameters in my Next.js app. I want to use useRouter() to push multiple different filters with the same key, so my query params could look like: ?page=1&skill=html&skill=css&skill=js And I can pass…
Jesse Winton
  • 568
  • 10
  • 33
5
votes
2 answers

How to apply a layout to all routes in a /pages' subfolder?

I created some routes in the /pages (next.js) folder and a subfolder /account. I want to apply a layout to all pages located in /account subfolder. How can I do that easily without applying the layout to every single page in /account ? Example I…
ETNs
  • 103
  • 1
  • 8
5
votes
2 answers

router.query not updated after router.push in next/router

I have an issue I need to get query params after they are updated. In this example when I make the console.log the router.query is reset to an empty object (and the route is been updated). Why? What am I missing? When I make router.push(/foo?page=1)…
loan
  • 65
  • 1
  • 6
5
votes
2 answers

How to get Clean Image URLs in Next.js using next/image component

I would like to know how I can get clean image url's with next/image component in Next.js. Current URL Example below: https://www.example.com/_next/image?url=%2Fimages%2Fhome%2FDog-image-1.jpg&w=384&q=100 Is it possible to change the above URL every…
Adam Hill
  • 315
  • 3
  • 8
1
2
3
…
19 20