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
1
vote
1 answer
Is it best practise to set a default state then overwrite with useEffect if default state is potentially unreachable
I'm working with Nextjs and Next-Router, I have a side bar which indicates where you are in the application. The highlighted key on the sider is set by setting defaultSelectedKey which is a state like so:
const [selectedMenuItem,…
max
- 37
- 7
1
vote
1 answer
using Router from next/router gives me an error
I'm using zustand in a project with Nextjs and have an issue with next/router. Currently with my zustand setup I cannot destructure router from useRouter so I'm importing the Router object directly to use Router.push after fetching some data. This…
frost2709
- 131
- 1
- 5
1
vote
2 answers
What's the alternative to pages/_app.js in app router in NextJS?
I am just starting with NextJS and there is a new router called app router. Now I have some tutorials using pages/_app.js from the NextJS page router. So, what's the corresponding file for that in the app router?
stefan.at.kotlin
- 15,347
- 38
- 147
- 270
1
vote
0 answers
custom 404 page in next 13 with dynamic routing
im using next13(with app dir) and trying to build a custom 404 page but i have dynamic routing that prevents the 404 page from showing up
and here is my code for home page
export default async function Home() {
const data = await…
Amir-H
- 53
- 4
1
vote
1 answer
Dynamic Routes Not Working When Publish NextJS Project
I use this code fore Dynamic Routes in my nextjs project it work fine on developer mode but not work when i published it on my server
...Object.fromEntries(fs.readdirSync('./public/assets/data/pages/').map(i => [`/ac/${i}`, { page: '/ac/[id]' }…
Mohammad
- 21
- 3
1
vote
0 answers
Add new path to history stack without navigating in Nextjs
Is there a way to programmatically add to the browser history stack such that next router will navigate to the newly added path on router.back()?
I have tried window.history.pushState({}, '', "/my_new_route") but it is not working correctly with…
Kevin Kreps
- 560
- 6
- 18
1
vote
1 answer
Daynamic routing page in not coming, when use browser back button in next js
In a Next.js project, I am coming across a situation where I get a new URL path from an API. And I have to update that URL path in the browser without reloading that page.
I am doing that with the help of…
Praveen Pal
- 17
- 3
1
vote
0 answers
How to show a preloader when LANDING on a NextJS page?
Yes, I know you can do it using the built in router of NextJS, but how do you make it so it shows a loader when you LAND (NOT WHEN CHANGING ROUTES) on the page? For example I perform a reload or I open a new tab and type localhost:3000 to visit the…
1
vote
1 answer
Router.push("/") not working inside pages/index.js
I am using Next JS next-auth/react lib and want to redirect users who have authenticated status to dashboard. This is my index.js -
import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from…
Anchal Gupta
- 53
- 7
1
vote
1 answer
Rendering a component (instead of a whole page) in react with next js
I am trying to learn how to use next.js to render a component inside a layout, when a link is clicked.
I have a layout as follows:
import * as React from "react"
import { Box } from "@chakra-ui/layout"
import { Limiter } from "./Limiter"
import {…
Mel
- 2,481
- 26
- 113
- 273
1
vote
1 answer
How to pass a big data object to another page with dynamic route in next js (without query params)?
I have a page where I fetch data and map through it.
In my map function I display a card component with some data like this:
pokemonsList?.map((pokemon, index) => {
return (
Myrmelo
- 83
- 9
1
vote
0 answers
How do I get param(or query) in wrapper.getServerSideProps(next-redux-wrapper)?
I used getServerSideProps on the wrapper.
And I printed out the param(query) and it was undefined.
How do I get params(query)?
const Home = () => {
const router = useRouter();
const { id } = router.query;
return
{id}
;
};
export…
Yoo Guk
- 21
- 1
1
vote
1 answer
React.JS - How to dynamically update the state of a Next.JS router component?
In my app, I have a togglable switch that is either checked or unchecked based on the dynamic URL of the app. For example, if the URL has a param called followType set to following (e.g. https://www.example.com/home?followType=following), I want the…
Gregory
- 25
- 5
1
vote
2 answers
Search Functionality on React and NextJS using Router
I'm working with a search functionality and getting the correct data from page1, which is 2 sets of Array of data (like what you can see on the photo), but the problem is when I pushed it my page2 using router, it showed only 1 data. Do I miss…
Whiz
- 33
- 6
1
vote
0 answers
How to create a dynamic basePath in Next.js config
I want to do three things in my application, but I’m not figuring out how I could do that using Next.js router.
The default URL of the application should be 'https://localhost:3000/en'
It should also be possible to have 'https://localhost:3000/es'…
Gian Grassi
- 11
- 1