I am currently facing a challenge with implementing dynamic routes in the directory structure of my NextJs application

Struggling to create a static path in NextJs v14. The dynamic route keeps giving a 404 error, while a similar non-dynamic route is working fine.

The dynamic route is accessed via localhost:3000/product/categoryProduct/a

Code path: app/(common)/product/categoryProduct[id]

export default function Page({ params }: { params: { slug: string } }) {
return <h1>My Page</h1>;

}

Non-Dynamic route accessed through localhost:3000/product/categoryProduct

Path: app/(common)/product/categoryProduct

export default function Page({ params }: { params: { id: number } }) {
return <div>My Post: {params.id}</div>;

}

Having trouble pinpointing the issue with this basic case.

Answer №1

The problem lies in the directory arrangement where the dynamic identifier should be within a subdirectory, not integrated into the primary directory name.

Proper directory layout: app/(common)/product/categoryProduct/[id]/page.tsx

Improper directory layout: app/(common)/product/categoryProduct[id]/page.tsx

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to deploying a Next.js static export using Nginx: Troubleshooting deep link issues

After exporting my Next.js project to the out folder, I noticed a specific folder structure: out index.html terms.html privacy.html To serve these files using nginx, I configured it as follows: server { root /var/www/myproject/out; index index.h ...

Is there a way to determine the compatible browser version for Next.js 12.3?

I am looking to develop a Next.js 12.3 project that is compatible with specific browser versions as indicated in the image below. While I have referred to https://nextjs.org/docs/architecture/supported-browsers, it seems to be focused on Next.js 13. Here ...

Misplacing a cookie while trying to request it from one subdomain to another subdomain

Recently, I've been encountering a strange issue involving the disappearance of cookies. In the past, I utilized AWS for both my frontend and backend infrastructure. View previous setup Due to deployment complications (specifically prolonged fronte ...

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

Setting a const value (true or false) based on the size of the window - a step-by-step guide

While studying, I encountered a challenge: In the code below, I need to dynamically set useState(false) based on the screen size. If the screen is larger than 947px, for instance, it should automatically be changed to true. The issue arises because sett ...

Ways to incorporate a language switcher with next-intl

"use client"; import { useLocale } from "next-intl"; import { locales, localeNames } from "../../i18nconfig"; import { useRouter } from "next/router"; import Link from 'next/link'; import { Fragment } from ...

The function res.status is not defined

Currently, I am in the process of integrating my upcoming app with Google Sheets. I have relocated the function that manages the post request to "app/api/sheets" as per the recommended documentation. import type { NextApiRequest, NextApiResponse } from &ap ...

Encountered a PrismaClientValidationError in NextJS 13 when making a request

I am currently working on a school project using NextJS 13 and attempting to establish a connection to a MYSQL database using Prisma with PlanetScale. However, when trying to register a user, I encounter the following error: Request error PrismaClientValid ...

Ways to retrieve the currently selected id from the router within the next 14 steps

I'm currently trying to extract the ID that is selected (#about, #home, #blog) or the full path (http://localhost:3000/#about, http://localhost:3000/#home) from the router. I am working with Next.js version 14.0.3 This is my approach: My current URL ...

How can getStaticPaths be used to define routes?

Imagine you have these 3 route paths stored in an array: const routes = ["route1", "route2", "route3"]; To set up these paths, you would do the following: export async function getStaticPaths() { const routes = ["route1", "route2", "route3"]; const ...

Issue with PrimeReact dropdown component not recognizing an array in TypeScript

Trying to incorporate the PrimeReact Dropdown component in a NextJs app with TypeScript. Encountering an error when attempting to select options from the dropdown list: "Objects are not valid as a React child (found: object with keys {name, code})" The b ...

Can the color scheme be customized for both light and dark themes in Ant Design version 5?

After creating a hook that successfully toggles between light and dark modes in Chrome's Rendering panel, I noticed that the values in the ConfigProvider remain unchanged when switching themes. Can anyone suggest a workaround to modify the design toke ...

Leveraging both the value from getStaticProps and the parameter in the component within NextJS

With this code snippet, I am attempting to load markdown files from a specific directory and pass them to a component that will display one of the markdown files based on a specified parameter. However, I am encountering an error when trying to use the com ...

Error: Incorrect format detected. Expected a numerical value, but received: "t". This issue occurred when attempting to provide a slug URL to the GraphQL query function within a Next.js application

Encountering an error while attempting to retrieve content based on the URL. Here is the query function being used: const getSlugQuery = (slug) => { const SLUG_QUERY = gql` query ($slug: String!) { postCollection(where:{slug:${slug}}) { ...

error message indicating that a static file could not be found following deployment as it is not located within the root directory

When deploying my Next.js web app in a directory other than the root, such as '/next' instead of '/', the static files in the public folder cannot be found. This is because the requested URL is not http://example.com/next/a.png, but rat ...

Can Next.js be integrated with Docker and Nginx for a seamless development environment?

I have a nextjs project that I want to run using Docker and nginx. The setup requires nginx to connect to nextjs behind the scenes, with only nginx being able to communicate with nextjs (users must talk to nginx to access nextjs). Given the typical nextjs ...

Embed the getServerSideProps function within a helper method

I have multiple pages that require protection using firebase admin methods: const getServerSideProps = async (ctx: GetServerSidePropsContext) => { try { const cookies = nookies.get(ctx); const token = await firebaseAdmin.auth().verifyIdToken(c ...

Redirect middleware for Next.js

I am currently working on implementing a log-in/log-out feature in my project using nextjs, redux-saga, and mui libraries. // middleware.ts import { NextRequest, NextResponse } from 'next/server'; import { RequestCookies } from 'next/dist/c ...

Having trouble loading environment variables in NextJS on Heroku?

I am currently utilizing NextJS and deploying my application on Heroku. When the page initially loads, I am able to retrieve data through getInitialProps without any issues. However, when trying to access this data in a regular function, I encounter an er ...

Why do I keep receiving a code parameter in the URL when using NextAuth with Patreon?

When using NextAuth with Patreon, I encountered an issue where after allowing access, I was redirected back to my URL with the "code" added as a parameter in the URL. From my understanding, NextAuth should handle this process automatically by passing the c ...