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

In Nextjs 13 (app router), how to use generateStaticParams with Firebase (Firestore) to generate dynamic pages?

I have build a listing page that lists down all the firestore docs (coffeeplaces) from the firestore database, and when I click on one of them, I want to show an indiviual page with information about that specific place. But I have some difficulties…
Bart
  • 149
  • 1
  • 16
2
votes
1 answer

How can the cookie value not be the same in the dynamic route?

I implemented a program with next js , i want to use cookies on dynamic pages , the problem is that the cookie value is inherited in other pages , this happens while each page should have its own cookie. I want to have a button to set cookie and a…
Pouriya Sedaghat
  • 31
  • 4
2
votes
0 answers

Await navigation with router from next/navigation

With the old pages router, I could await router.push. I used this to keep a button disabled while we are in the process of navigating to another page: async function onSubmit(input: CreatePostFormData) { try { await…
Florian Walther
  • 6,237
  • 5
  • 46
  • 104
2
votes
0 answers

In Nextjs 13.3 Parallel Routes, @slot use parent loading.tsx and error.tsx instead of own

I have a Nextjs 13.3 app and use new Parallel Routes feature. I've created multiple slots, each having it own loading.tsx and error.tsx. But they ignore own states and use parent's. Tried including default.tsx, but no difference. The folder…
Bekzhan Satarov
  • 23
  • 6
2
votes
0 answers

Next.js Failed to load static props (with react-query)

I saw in sentry that many users experience the error "Failed to load static props" but I don't know why, if I try to go to the same url it always works for me, Also the for the users I can see in the replay that the page seems to load with all the…
Caus
  • 21
  • 1
2
votes
2 answers

What is the use of NextJS API feature

I have seen Next JS API feature, it provides you the API folder where you can create API for frontend. But I am still confuse about few things. Does it replace the need of backend e.g database and file handling etc Is this for just sending you the…
Tariq
  • 21
  • 2
2
votes
0 answers

Next js Redirect to other domains Not Working

I can redirect to the path in same domain but enable to redirect if domain is different. This error only occurs on firebase hosting and is working fine on localhost with yarn dev. code: const router =…
Abdullah Qureshi
  • 161
  • 8
2
votes
1 answer

How to make a Next.js route with /users/:id/verify/:token

I am trying to create a component that renders in a Next.js app at path /users/:id/verify/:token. I understand how to create a route for /users/:id But I cant seem to understand how to add another /verify/:token onto the end of that route and show…
KingJoeffrey
  • 303
  • 5
  • 16
2
votes
2 answers

nextjs-ts-user-management, how to handle redirect to login page using @supabase/auth-helpers-nextjs?

TLDR: I'm leveraging https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management to build basically a TODO/hello world app and it's amazing. But you will notice that the way they handle loginpage/protected…
Jar
  • 1,766
  • 1
  • 21
  • 27
2
votes
1 answer

Nextjs: Module not found: Can't resolve 'next-router'

I am trying to import use Router from next-router, but I am obtaining this error: Module not found: Can't resolve 'next-router' I have installed last version of next 13.0.6 package.json: { "name": "frontend", "version": "1.0.0", "private":…
hrd
  • 23
  • 3
2
votes
0 answers

NextJS - 404 page re-compiled every time

I'm working with NextJS, I'm using context and useEffect to keep track of login session. I'm noticing that when I navigate from a page to another existing page (ex: Home -> About), Next doesn't re-compile my pages and only does a client-side…
mvkv
  • 41
  • 3
2
votes
1 answer

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. When using next/router

I have a specific scenario where I need to redirect to specific page using next/router But this error occurred: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. All my code in index.tsx are: import {…
user18209107
2
votes
0 answers

NextJS - Incremental Static Regeneration on Vercel constantly times out (on a pro plan - 60s time-out limit)

I'm having issues with a NextJS project hosted on a Vercel pro plan. Routes that are set up with ISR just keep timing out. I have revalidate set to 120s currently but I've tried it with 60s, 30s, and 6000s too just in case I was calling it too…
poncho
  • 1,100
  • 2
  • 15
  • 38
2
votes
3 answers

how to add dash(-) between name of dynamic route Nextjs in url

I create a dynamic route pages/post/[postname].tsx . and when I send name to the dynamic route the url shows name with url-encode (%20,%E2,...) I want to show name of the url with dash between words. like below…
Hasan Cheraghi
  • 867
  • 2
  • 11
  • 26
2
votes
0 answers

Nested Layouts in Next.js

I want to create a nested layout in next.js. I have also a parent layout that contains Header and Footer components. I am using that Layout in the _app.js file. _app.js file import Layout from "../components/Layouts/Layout"; import…
Mehdi Saqlen
  • 129
  • 1
  • 3
  • 13
1
2
3
…
12 13