Stack Overflow
Stack Overflow

Questions tagged [nextjs-dynamic-routing]

In Next.js, dynamic routes are defined by placing the parameter inside square brackets ([]) in the page file name. For example, if you have a dynamic route for displaying a user's profile, you can create a file called [username].js. The username inside the brackets is the parameter that will be used to generate dynamic pages.

To handle dynamic routes, Next.js provides a special component called getServerSideProps or getStaticProps. These functions allow you to fetch data based on the dynamic parameter and pass it as props to the page component.

188 questions
0
votes
1 answer

How to fix Query parameters lost after reloading in Nextjs Router when keeping URL clean?

I'm trying to pass some data over router.push to a [roomid] page (src/pages/editor/[roomid].tsx) in Next.js using the following syntax, but want the URL to remain clear, as the user can just edit their username in the URL otherwise. On the first…
ransom
  • 173
  • 1
  • 9
0
votes
0 answers

Import server component with data fetched using dynamic in NextJS 13

I was trying to make a component which would dynamically load, fetching data on the server when being called. Unfortunately, I'm stuck with this error and don't know how to get around it. Here's what I've tried: Let's say we have a standard Server…
Vojin
  • 83
  • 7
0
votes
0 answers

Nextjs App Router: I want to make dynamic routes at root level in /app folder

I am working with below folder structure. /app [..slug] /about-us /a/b/c page.js ('/',homepage) My main problem is with generateMetadata, It is setting about-us metadata on Homepage. I just want to know, is this good way to add…
Mohinder singh
  • 112
  • 1
  • 6
0
votes
1 answer

Can I pass data from one page to another as a State using Nextjs 13 App directory

Using Nextjs 13 App Router, I want to pass previewData from MainComponent.jsx to Preview.jsx as a State. not through query or props. I Just want to pass data as a state from MainComponent.jsx and navigate to the Result.jsx receive the state data and…
Auvee
  • 95
  • 2
  • 15
0
votes
1 answer

Not getting the id of the clicked component in nextjs dynamic routing

As the name suggests, i cant seem to figure out dynamic routing in my project. I have a Home component(which is the main page of my project) where I've fetched the data from an external api and used map to display them. Basically, what i want to do…
Gaurav Tamang
  • 79
  • 1
  • 7
0
votes
2 answers

Conditional back button in nextjs

I have an page '/message/:id' with a back button on top left which routes back using router.back() function, Which works perfectly fine when i get routed to that page from any other screen. But now i'm also sending notification which on click routes…
Deep Shetye
  • 143
  • 1
  • 7
0
votes
1 answer

NextJS: link button with onClick handler to top-level dynamic route

How would one go about linking a button element to a top-level dynamic route, using: NextJS 13.4.9 (using App Router) React/dom 18.2.0 My directory structure is as follows: app/ - [division] - - page.tsx - - [team] - - - page.tsx - - - [player] -…
DomainSoil
  • 1
0
votes
1 answer

Fetching isn't done in production build, while it is done in development for Nextjs server component

SOLVED I was about to use internationalization for translating the pages at the very beginning of the project. There are some codes for configuring internationalization in next.config.js like the following, all I need to do to get rid of the problem…
Mithat Akbulut
  • 7
  • 1
  • 7
0
votes
3 answers

Passing data from one page to a dynamic route in Next.js 13 with app router

Problem Statement: In NextJS 13 with app router, I want to pass data from "/experimental" to dynamic route "/experimental/${id}". It gives me 'router.query' as it is undefined. Is there any better approach? I tried using 'next/navigation' in the…
Auvee
  • 95
  • 2
  • 15
0
votes
1 answer

NextJS 13 : Dynamic routing is not working in production

Here is a code snippet of how I fetch data from a local Mock Data : export default function Blog({ params }: Props) { const blog_id = params.blog; const blog = blogsData.find((blog) => blog.id === blog_id); if (!blog) { return (
Blog Bot…
ZAAM Oussama
  • 68
  • 10
0
votes
2 answers

Next js 13 dynamic routing giving 404 error

when I click on a item is goes to the dynamic route "http://localhost:3000/products/{id}" but gives error instead of displaying data so my file sturcture…
sam
  • 1
  • 1
0
votes
0 answers

Next.js - Passing props for dynamic router (App directory)

I am building an application using Next.js and the new app directory. I created a high level object that contains all problems' objects, after user clicks on a problem, 2 things should happen: Segment dynamically changes to the desired…
Asad
  • 106
  • 1
  • 11
0
votes
0 answers

Approach for Handling Dynamic Routes in Role-Based Authentication in NextJS

I am new to nextJS, and I want to build a nextJS application with role-based authentication, In order to do role-based authentication, I have used the Higher-Order Component that component checks whether the user has access to access the pages. In…
Gibson
  • 82
  • 7
0
votes
0 answers

NextJS catch all route structure

I have a Next.js website which gets news from Wordpress with WPGraphQl. User can filter posts with categories and goals. I'm trying to set a catch all route which will replace the current structure which I have here: Here are my current…
Čedomir Babić
  • 522
  • 4
  • 12
0
votes
0 answers

Error 404 with dynamic routing in production using the new Router App in NextJS

I'm facing an issue with my Next.js project. It works perfectly in my local environment if dont use next preview, but when I deploy the app to production using Vercel or Railway or I use npx next build and npx serve@latest out, I encounter a 404…
J.A.Doval
  • 1
1 2 3
…
12 13