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
0 answers

Access Dynamic Page Props outside App Component

I am currently learning Next JS and I am using Next JS 13.4 with the new App Route. I have a Route like this: /user/[id]. My Problem is that I need to access this Prop in a custom Component I have created for the User. I cannot pass down the User Id…
Simagdo
  • 87
  • 8
0
votes
1 answer

NextJS 13 server component fetch not hitting my API endpoint

I am using NextJS 13 with the app router. This is the file structure of my project. File Structure Screenshot async function fetchForm(id: string) { const endpoint = `${process.env.NEXT_PUBLIC_URL}/api/paymo/${id}` console.log("endpoint: ",…
Brian Lee
  • 1
  • 1
0
votes
0 answers

First load in nextJs

i create a website for my client ,it works fast and response time is to good in my local mechine , but when i deploy it on the aws ec2 sever , the response time is to slow and first load is about >10s , https://www.bookyourgift.in/. , anyone…
0
votes
0 answers

NEXTJS : Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

page.tsx i tried removing the generateStaticParams but that did not solve the problem import { Community } from "@/atoms/communitiesAtom"; import Header from "@/components/community/Header"; import { firestore } from…
0
votes
1 answer

dynamic routes not working in cpanel deployment

I want to deploy my next js application in cpanel but on deploying the dynamic routes are not working any solution or suggestion would be great and also not working in npm build version as well I tried in vercel it's working fine
0
votes
1 answer

Dynamic routes in NextJS 13 not working as expected. How to make it work?

I am trying to use dynamic routes such that the URI has blogs/id/ n NextJS 13 project where the id part is supposed to be dynamic, however it seems like it is not working. It seems to always show the page corresponding to blogs. I have am using the…
0
votes
0 answers

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'param1')

I'm completely new to Next.js and still trying to wrap my head round it kinda! I have the backend (node/express/mysql) running on port 5000 while i fetch data to server the client side. Here is app/page.js "use client"; import axios from…
0
votes
0 answers

Nextjs | getStaticPaths | Error: Call retries were exceeded

Got "Call retries were exceeded" error when i got to dynamic slug page, as per the discussion github i downgraded my project from 13 to 12 version, but still getting same issue. let me share my error screenshot first then i will share my code…
0
votes
1 answer

Handling dynamic routes with Next.JS on Firebase (server side)

I am facing an issue with dynamic routes. This is the file structure that I have set for the relevant part of my problem: app members [memberID] page.tsx After running: % npm run dev And pointing my web browser to this…
Michel
  • 10,303
  • 17
  • 82
  • 179
0
votes
0 answers

how to fix 404 page in next js 13.3

404 page is working in my local but when i upload nextjs app to nginx i have a error {"statusCode":404,"message":"Cannot GET /login/aaaa","error":"Not Found"} login/aaaa must show 404 i have not-found.js and this is my nextjs config: /** @type…
0
votes
1 answer

How can I dedupe/cache requests without getting stale data?

On this page, I need to cache my API function because I need the same data in both the Page, as well as in the generateMetadata function. Since I'm using Axios, and not fetch, the deduplication doesn't happen automatically and I have to wrap my API…
Florian Walther
  • 6,237
  • 5
  • 46
  • 104
0
votes
0 answers

NextJs - Compute base for Link href based on folder structure

I'm creating an app using the App Router pattern in Nextjs. I have a folder structure that looks like this: From inside the level-1 page, I would like to link to level-1/level-2. Obviously I can do this by hardcoding href to level-1/level-2.…
0
votes
1 answer

Next.js nested dynamic routes with specific settings page for each route

I have a web app built with Next.js and TypeScript. This app can show an unlimited number of nested paths, such…
Jay
  • 21
  • 7
0
votes
2 answers

How to use multiple query parameters in next.js 13?

I am trying to create a route that looks like this /property1=value1&property2=value2 and then I need to access the values of property1 and property2. I created a file named [property1]&[property2].js in the root of pages folder. I am trying to…
Rifky Niyas
  • 1,737
  • 10
  • 25
0
votes
0 answers

Next Js dynamic routing for url, based on hypens ex. /slug-page1 and /slug-page2

Hi I am new to Next Js also first time posting a question on stackoverflow so please ignore the mistakes. Not much idea of Next JS works. I have a requirement where I need to use dynamic routing but the route is based on slug content. For example i…