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

NextJS Redirect - req.headers.referer is missing - How to get original URL?

I cannot figure out how to retrieve the original URL request from a Next.js redirect. Actually the code works as expected on my local server, but the information disappear on production. My next.config.ts includes: { source: '/user/:path*', …
6
votes
1 answer

Set Metadata Dynamically Without Duplicate Requests - NextJS 13

Consider the following server side component that's part of some page (page.js) in the app directory, representing a person: export default async function Person({ params }) { const person = await getPerson(params.id); return ( …
6
votes
1 answer

Unable to use aws-amplify with NextJS 13.4 api routes

I have successfully used pages/api routes in previous versions of NextJS to connect to AWS API Gateway. I'm trying to use new app router to do the same thing in app/api/route. But I'm unable to get the aws-amplify libraries working, i.e. const…
4
votes
0 answers

How to Revalidate a Specific Dynamic Segment (/product/123) in Next.js Without Revalidating All Segments (/product/[id])? - Next.js 13.4.6

I am working on a Next.js project version 13.4.6 and I have a dynamic route /product/[id]. I need to revalidate the data for a specific product, for example, /product/123, when its content changes. I am aware of the revalidatePath function, which…
4
votes
1 answer

Scroll-to-Top Behavior is not working in Next.js when opening a new page via Link component

In Next.js, I'm facing an issue where when I click on a link to open a new page, the new page opens at the same scroll position as the previous page. For example, if I'm on a product listing page and I have scrolled down to view the last product,…
Abidullah
  • 159
  • 3
  • 13
4
votes
1 answer

Failing to get quite simple i18n and dynamic routing to work with Next.js

First things first - I've read the Next.js docs, passed the tutorial, looked at a number of examples, but at the end of the day, I am still failing to achieve a very simple thing with Next.js. I have an application that has these locales: en and…
ric980
  • 159
  • 1
  • 2
  • 4
4
votes
0 answers

Next.js static export, routes, dynamic routes and .htaccess

TDLR; Any idea what would be the best way to achieve successful reload of dynamic routing in a static export of a next.js app (next build && next export) without getStaticPaths ? When I was working with create-react-app and react-router, I had to…
arnaudambro
  • 2,403
  • 3
  • 25
  • 51
4
votes
1 answer

Pass data from nextjs Link component and use it in getStaticProps

I have a dynamic route and I am trying to show the title in url and pass (hide) the id to my dynamic route and use id in getStaticProps. I have found that I can't pass data easily in nextjs as we used to pass with react router or other client…
Kaung Khant Zaw
  • 1,508
  • 3
  • 19
  • 31
3
votes
0 answers

Something not working with dynamic routes in Next.JS 13.4 on Firebase

I have been having a little issue for a while concerning dynamic routes in Next.JS. After seeing a few tutorials an reading some documentation, I have the feeling that what I experiment is not what I should expect. I hope this post will help me by…
Michel
  • 10,303
  • 17
  • 82
  • 179
3
votes
1 answer

How can you use Link navigation to navigate away from an intercepted route in Next.js 13?

DISCLAIMER: I originally filed this as a bug in the Next.js github repo, but it was not recognised as an issue and was promptly closed. The explanation/solution that was given did not work for me so this means I must be doing something wrong, ergo…
3
votes
1 answer

why nextjs link is prefetching on each hover?, how to disable it?

so it seems I'm using the latest version of Nextjs which is 13.2.4v, i also not using the app or src directory. the problem is when i hover on the Link Next component, it will send a request to the server, we know that will reduce the performance. i…
3
votes
0 answers

dynamic routes in app dir in nextjs13 not working after deploying to firebase hosting

I am using NextJs 13 with experimental feature of "appDir" while deploying to firebase hosting, dynamic routes become static path. for example : path app/[slug]/page.jsx become http://example.web.app/[slug] You can see [slug] is consider as static…
3
votes
0 answers

NextJS Different Layouts for nested Routes

I have different nested routes in my project for example: / (that means if it's not a nested route like / (index) or /about ) blog Profile And all these routes need a different layout (navbar/sidebar, and maybe head and body) But I don't know…
Blizii
  • 173
  • 11
3
votes
4 answers

Firestore/Firebase not working with Next.js

Hey y'all really struggling here. I am trying use firebase in my Next.js app, specifically for the api. It works fine when I build production locally, and on local development. But once I deploy to production on the vercel platform I get a 500 -…
3
votes
0 answers

NextJS pages is undefined

I've got a Shopify app that, on install and on load shows an error for a second or two before it loads okay. The error says "pages is undefined" and originates from NextJS code. This part to be exact: function resolveDynamicRoute(pathname, pages)…
Paul van den Dool
  • 3,020
  • 3
  • 20
  • 44
1
2 3
12 13