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

How to handle dynamic routes at the same level for Static and SSR pages using Next.js

I'm facing the next situation, I'm using Next.js and I need to manage two different files that will use dynamic routes. The reason is that the site has static and SSR pages, the static ones use getStaticPath and getStaticProps functions and the SSR…
2
votes
1 answer

Next.js dynamic route template

I want to create a dynamic route structure for my next.js project, so the main directory would be countries and there will be many other countries under that…
Rain Man
  • 1,163
  • 2
  • 16
  • 49
2
votes
2 answers

Why is my nextjs router not return query params?

When I navigate to http://localhost:3000/users/123?foo=bar of my nextjs app I get the following when I print out router.query {id: "123"} What could be the reasons it is not adding foo: 'bar' to the query object?
grabury
  • 4,797
  • 14
  • 67
  • 125
1
vote
0 answers

Next.js 13 fetch by ID, but slug in url

In a Nextjs 13 project, using App router I have an API and it needs to fetch single posts by id. However, I want to have the name of the post in the slug instead of the id, but still access the id. Is it somehow possible? My project structure is…
1
vote
0 answers

Pass Data from in page to another in next js 13

I'm create Custom Storefront in Shopify. Want to pass the id from product page to cart page. 'use client' // import { useEffect, useState } from 'react'; import { useRouter } from 'next/router'; import { fetchShopifyAPI } from '@/shopify'; import…
1
vote
0 answers

Next JS Dynamic Routing with multiple urls and page designs, one repo

In my Next JS build, I have multiple website which have common Components and API's, they only differ in their design and layout. Each website has its own static hosting. Colors, logo etc can all be switched out by the static files. I would like to…
Craig P
  • 477
  • 6
  • 12
1
vote
0 answers

How to use revalidatePath on Nextjs13?

I'm studying nextJs13, I didn't understand how revalidatePath works. I don't understand how can I use revalidatePath, is a function ? Or is a GET endpoint ? I have two differnt page, when I try to modify the first page I need that this modify will…
1
vote
0 answers

Nextjs new slug page from cms strapi get 404 error

I have a site written in nextjs + cms stripi. There is a product catalog on the site, and when I add a new product, it appears in the list of products with all the necessary attributes, but when I follow the link to this product, I get a 404. In…
1
vote
0 answers

I am seeing this error in terminal "You cannot use different slug names for the same dynamic path" and also localhost:3000 is refusing to connect

I only have one dynamic path in my whole Next.js project, that is, app/api/auth/[...nextauth]/route.js But for some reason I'm seeing the mentioned error with a elaborated line, that is, You cannot use different slug names for the same dynamic path…
1
vote
3 answers

Getting undefined params in my compoment with generateStaticParams nextjs 13. How to pass them correctly?

I'm using the App router of nextjs 13, with typescript, and I'm trying to create dynamic pages and generate the paths for them with generateStaticParams(). The function generateStaticParams() seems to work, and it collects the correct information.…
Bart
  • 149
  • 1
  • 16
1
vote
1 answer

How to access query parameters in Next.js 13.4 with the new app router?

I'm using the latest version of Next.js (13.4) with the new app router. In my application, I have a Link component with a button inside a ../components/products.tsx file. Each product has a "details" button that navigates to a dynamic route using…
1
vote
0 answers

`loading` route in NextJs 13 now working properly while using parallel intercepted routes?

I am creating an app to learn about the new Nextjs features. My app directory is structured like this- -@modal -(.)blog -[title] -page.tsx -layout.tsx -loading.tsx -blog -[title] -page.tsx …
1
vote
3 answers

how to query items from useRouter() hock in case i'm using nextjs with App Router approach

This was the way to do it using Pages Router import { useRouter } from "next/router"; import React from "react"; function ShowroomListings({}) { const router = useRouter(); const { listingId } = router.query as { listingId: string }; return…
1
vote
0 answers

How to run an application based on App Router - src/app (next.js 13) using Passenger?

works without problems: router on pages (/pages) config on: Passenger, Node Js 18, Nextjs 13.2.3, React 17.0.2, React-dom 17.0.2. Problem: App Router (/src/app) config on Passenger, Nodejs 18, Nextjs 13.4.4, React 18.2.0, React-dom 18.2.0…
1
vote
1 answer

Why my API Routes are called when I build my NextJS project?

I have an API route that generates data in my DataBase, this API route is only called in my CRON job set in Vercel. However, every time I build the project, new data show in the database. I do believe it is because of the Nature of NextJS to…
1 2
3
12 13