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

NextJS Multi-tenant app with different page routes

So, just an overview of how I want things to work first so you understand the problem I'm facing. NextJS is acting as the frontend to a multi-tenant SaaS app with Django and GraphQL as the backend. Depending on whether they access the site at the…
0
votes
1 answer

How do I statically render the first few pages at build time and the rest in real time in Nextjs?

There's a requirement wherein I'm supposed to render a few paginated pages. The problem is, I need to render the first 3 pages during build time and the remaining in real time, i.e if a user clicks on page 4, it should then fetch the data for page…
0
votes
0 answers

Why does id not come through from params to context? NextJS

Could someone please explain why id will only populate as {ev.id} from data, as per console.log(context)? Should be pulling names from params. See below code and console.log(context) const EventPage = ({ data }) => { console.log(data); return…
0
votes
0 answers

Inconsistent behaviour of Next.js router.query

I am building a image search website using nextjs. In which there is route /search/photos/[slug], based on slug images are fetched from unsplash api. const router = useRouter(); const {slug} = router.query; useEffect(() => { if(router.isReady &&…
0
votes
0 answers

optional catch-all route not catching '/', but won't let me create an index.js either

Since upgrading to NextJs 13, my root optional catch-all route [[...all]].js does not catch /. With fallback: false, the / route 404s, but my getStaticPaths has a route for / and one with an empty string in it: export async function…
MitchEff
  • 1,417
  • 14
  • 29
0
votes
0 answers

Problems with redirection on nextJS deploy server-side

I'm using nextjs, and when i'm testing locally, with 'npm run dev' I acess my route directly like localhost:3000/settings/account, and It works nicelly, but when I 'npm run build' and 'npm run export' and try to test in the server side with serve -s…
0
votes
1 answer

With Next.js 13 Routes API, what are TypeScript declarations for GET?

I'm trying to not use the any type when creating a GET handler with the new Next.js 13 experimental routing API. Here is my code: export async function GET(request: any, {params}: any) { function getRandomInt(min: number, max: number) { min =…
0
votes
2 answers

setup dynamic routes using next js

I'm trying to build a Next.js application that displays a catalog of products organized by categories and subcategories. The category and subcategory data is stored in an array of objects that looks like this: const categories = [ { id: 1, …
0
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…
0
votes
0 answers

Link Component Causes Full Page Refresh & CSS Overwriting Issues with Bootstrap in Next.js Deployment on Vercel

I am currently using the 13.2.5-canary.4 version of Next.js. While everything appears to be functioning properly in my local environment, I have encountered a number of issues when attempting to deploy my application on Vercel. The first issue is…
RL89
  • 1,866
  • 5
  • 22
  • 39
0
votes
1 answer

Is it possible to change the Route in nextjs

I've made search functionality that routes to "/search/xxxx" but it's in the header so when I search again, it repeats the route and makes "/search/search/xxx". Is there any way except react-router to solve this issue or could you give me…
eErgun
  • 31
  • 5
0
votes
1 answer

Rewrite regex multiple params included slash in NextJS 13

I'm using NextJS v13 and I found the rewrite feature I tough if possible to create dynamic URL's like the following example: /folder/:cond(cond1\|cond2\|cond3)/:city([a-z\-?]+\-ci)/:bld([a-zA-Z0-9\/\-]+) I have the file detail/index.js inside pages…
josotoru
  • 77
  • 1
  • 6
0
votes
1 answer

Nextjs 13.2.1 App Dir - Error: Page changed from static to dynamic at runtime

Bug Description I get an error when fetching data from Supabase using their ORM-like syntax. It first fetches the data, then the app crashes with the following error message. error - Error: Page changed from static to dynamic at runtime…
0
votes
0 answers

Nextjs data not loading for dynamic pages on refresh

I am getting my Data for Nextjs dynamic pages from a Local json file. Everything works fine when the page is loaded with getStaicPath and getStaticProps. But once i refresh the page the params value for getstaticProp is gone, and i am not able to…
0
votes
1 answer

SyntaxError: Unexpected token < in JSON at position 0 NEXTJS dynamic routing

I am getting this error and I am not able to figure out the cause. code: This is my code, please review Tried to do some dynamic routing, expected to get an output rather I got this error