Questions tagged [nextjs-dynamic-routing]

I am currently working on a NextJS project with multiple sites employing the use of getStaticProps() along with revalidate. After building the pages, they are regenerated within the specified time interval as expected (confirmed using a REST client). How ...

I'm trying to add an active class to the current page, but I seem to be missing something. <Link href={`/projects/${project.id}`}> <a className={`${ router.pathname === `/projects/${projects.id}` ? "active" ...

I am encountering an issue with setting title and other meta tags on a dynamically routed page. Although the title and metas display correctly when the page is loaded in the browser, they do not appear in the raw HTML code fetched using wget. I have exper ...

Currently, I'm in the process of developing a blog using the next.js 14 App router. I have encountered an issue regarding dynamically rendering the index page. Below is the code snippet: app/blog/page.tsx import BlogItem from "@/componen ...

When attempting to import Router from next-router, I encountered the following error message: Module not found: Can't resolve 'next-router' I have the latest version of Next.js installed (13.0.6) package.json: { "name": " ...

After attempting to retrieve the most recent liked items from a server component in next, I noticed that the data only displays when manually refreshing the page. Even when I navigate away and return, the data is not refetched automatically - however, usin ...

I've encountered a problem with dynamic routes. Here is the file structure I'm working with: app members [memberID] page.tsx When I run: % npm run dev And visit this URL in my browser: http://localhost:3000/members/AA66 ...

I've recently launched a new Next.js project and I'm currently working on implementing client-side navigation. However, I am facing an issue where I am unable to navigate to routes other than "/". Layout.js : import "../styles/globals.css&q ...

I am currently working on implementing a scenario where there are two separate navigation bars - views-nav with links "results" and "statistics", and schools-nav with links "school-a", "school-b", "school-c". When a user first lands, the URL would appear a ...

In order to ensure that I have access to the same data in both the Page and the generateMetadata function, I need to cache my API function on this page. Since I am using Axios instead of fetch, automatic deduplication does not occur. As a result, I must w ...

Currently, I am immersing myself in the world of Next.js with the help of the book "Building React Apps using server-side rendering". As part of my learning process, I am constructing a basic react application that consists of an index page linking to an ...

Hey there, I'm currently utilizing the App router from nextjs 13 along with typescript. My aim is to create dynamic pages and generate their paths using generateStaticParams(). While the generateStaticParams() function appears to be functioning corre ...

Below is the outline of my folder structure: app ├── (app1) │ └── ekko │ ├── layout.tsx │ ├── not-found.tsx │ └── page.tsx │ └── (admin) │ └── admin │ ├── layout.t ...

I am currently working with Jest and testing library to conduct unit tests on my NextJS application. I am facing difficulties in rendering a page on a dynamic path. Here is the code for my page/component: export default async function MyPage({ params }: { ...

I have developed search functionality that navigates to "/search/xxxx", but it is located in the header. Every time I perform a search, the route gets repeated and becomes "/search/search/xxx". Could you suggest any way other than usin ...

Upon upgrading my Next.JS version to Next 11.1.2, I encountered an issue where my HomePage is redirecting me to a 404 not found error. Strangely, all other routes are functioning correctly. I have checked my app.js file and cannot find anything that would ...

Looking for help deploying my Next.js application in cPanel. Having trouble with dynamic routes not working after deployment, both on cPanel and npm build version. Any suggestions or solutions would be much appreciated. Interestingly, it works perfectly ...

I'm working on a dynamic route called pages/post/[postname].tsx. However, when I provide a name to the dynamic route, the URL displays the name encoded with characters like %20 and %E2. What I'd like is for the name to show in the URL with dashes ...

In my current project, I am utilizing Next.js as a full-stack framework with API route handlers in the backend. One issue I have encountered is related to storing images under the /uploads directory using the fs.writeFile method and only saving the path to ...

After integrating next-i18next into my Next.js project using the official guide, everything appeared to be functioning correctly. However, I encountered a 404 error when switching from the default language (Italian) to English and navigating to the detail ...

I am currently working on a project using Next.js version 13.4.6. In this project, I have implemented a dynamic route /product/[id]. Now, my goal is to revalidate the data for a specific product, like /product/123, whenever its content changes. I know abo ...

Below is the middleware file I've implemented: import { NextResponse } from "next/server"; import { NextRequest } from "next/server"; import { getApiAuth } from "./app/middleware/api/auth"; const validateApi = (req: Requ ...

I am in the process of implementing product filtering features similar to this: filter product image. Once the filter is applied, I need to allow users to easily clear it, as shown in this example: clear filter image. Any real-world ideas with additional ...

Imagine you have a server-side component located in the app directory called page.js, which represents a person: export default async function Person({ params }) { const person = await getPerson(params.id); return ( <h1> {person. ...

Summary: I'm using the template from https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management to create a simple TODO/hello world application, and it's been fantastic. However, I've encountered an i ...

In my NextJS App Router API, I aim to have the code execute on each page request made from a browser. When utilizing API Routes with the Page Router, the following code runs upon every request in production mode. /pages/api/route1.ts export async function ...

Currently, I am in the process of setting up a blog structure that includes two levels of nested routes. You can access the posts at example.com/blogs/[chapterID]/[postID], and these static posts are saved as markdown files outside the app folder. https:/ ...

My project includes an API route that fetches data from my DataBase. This particular API route is triggered by a CRON job set up in Vercel. After each build of the project, new data gets added to the database. I suspect this might be due to NextJS pre-exe ...

In the directory structure, I have a blog page located at app/[locale]/home/blog/page.tsx. import glob from 'fast-glob' import path from 'path' const BlogPage = async () => { let pages = await glob('**/*.mdx', { cwd: ...

While using Next.js, I encountered an issue where opening a new page would maintain the scroll position from the previous page. For instance, if I had scrolled to the bottom of a product listing page and clicked on a specific product, the product details p ...

Recently, I encountered a situation where I needed the project ID to be dynamic. For example, when accessing /management/123, it should take me to the dashboard of that specific project showing stats. However, I also need to display the feature and issues ...

Is it possible to statically render a page with a server component that loads on demand? In this scenario, I want the Home page to be rendered statically during build time for cached document requests, while keeping the ServerComponent dynamic and loaded ...

One scenario: a blog with an extensive library of content cataloged by Google. Every piece is accessible via www.site.com/post1. When migrating this blog to NextJS, the posts are now located at www.site.com/blog/post1. Redirects using 301 have successful ...

Seeking assistance with understanding the intricacies of the app router, particularly when dealing with deeply nested dynamic routes. Imagine running an ecommerce platform with multiple stores offering various shopping modes like pickup and delivery. How ...

Currently, I am working on a mdx blog within the NextJS framework. To achieve this, I have implemented a function called getPostDataByCategory(category) in posts.js located under lib. This function is responsible for filtering posts based on categories. ge ...

Has anyone successfully integrated Google Analytics 4 (gtag) in a NextJS 13 app directory? In my previous Vanilla JS / EJS applications, I simply added the following code to each page. My understanding is that this code sends a page_view event to Google An ...

I am currently working on implementing dynamic routes in my Next.js project to render pages based on user input. I have set up a route that should display the page content along with the id extracted from the URL using the useRouter() hook. Everything is f ...

Is there a way to pass data between routes using the router.push method in the useRouter() API from next/navigation? Additionally, are there any techniques for performing URL masking in the router.push method from next/navigation like we could do with nex ...

The current functionality I have: I currently have a Server Component that fetches data which is then passed into a Client Component. This process takes place within a dynamic route (app/.../[username]), with the username also included in the POST request ...

I've been putting in a substantial amount of time on this project. I'm encountering some 404 errors on my dynamic pages, even though they work perfectly fine on localhost. I've tried using revalidate and playing around with fallback: true an ...

Whenever I click on an item, it redirects to the dynamic route "http://localhost:3000/products/{id}" but instead of displaying the data, I get an error. Here is my file structure: app components Product.js pages Products [id].js layou ...

Can Nextjs 13 App Router be used to efficiently pass previewData from MainComponent.jsx to Preview.jsx as a State, without involving query parameters or props? I want to transfer the data as state from MainComponent.jsx, then navigate to the Result.jsx com ...

Currently, I am using the next-usequerystate library with Next Js 13. However, I have encountered an issue where the state on the URL is lost when I refresh the page. The initial URL looks like this: localhost:3000/?page=1&genres=tree But upon refres ...

I am in the process of developing a NextJS 13.4.7 application that utilizes dynamic routes and a Headless CMS powered by Contentful. All routes are accessible, as shown in the screenshot below. Our goal is to fetch data from the CMS. If there is no data a ...

After implementing a program with next js, I encountered an issue related to using cookies on dynamic pages. The problem is that the cookie value seems to be shared across different pages, when in fact each page should have its own unique cookie. My goal ...

DISCLAIMER: I raised this issue on the Next.js GitHub repository, but it was closed without recognition. The solution provided did not resolve my problem, leading me to seek help here. The Issue at Hand I have created a demo app (accessible here) on Code ...

This code snippet demonstrates how to use Pages Router in React import { useRouter } from "next/router"; import React from "react"; function ShowroomListings({}) { const router = useRouter(); const { listingId } = router.query as ...

My approach has been to encapsulate the entire application within a middleware, based on what the documentation states: export const config = { matcher: [ /* * Match all request paths except for the ones starting with: * - api (API routes) ...

SOLVED At the beginning of my project, I was considering using internationalization for translating the pages. In the next.config.js file, there are some configurations for internationalization like the one below that caused issues: //next.config.js const ...

Looking to pass props to the Layout component for dynamic routes in my project structure: /app -/(site) --/layout.tsx --/page.tsx --/[slug]/page.tsx --/[slug]/layout.tsx In the site layout: export default async function IndexRoute({ children }: { chil ...

In the content of my website, there is a collection of objects named stories that are displayed as an array. Additionally, I have a section where each individual story is showcased in detail. I intend to enable users to click on any story link within the ...

I'm looking for alternatives to the any type when creating a GET handler using the latest experimental routing API in Next.js 13. Check out my code snippet below: export async function GET(request: any, {params}: any) { function getRandomInt(min: n ...

Hey everyone, I could really use some help here. I've been working on integrating Firebase into my Next.js app for the API. Everything works well when I build and run locally, but once I deploy to Vercel for production, I encounter a 500 - Internal S ...

Can we redirect visitors conditionally based on their referrer? I am interested in directing users to a specific domain (or any subdomains) if they come from certain sources. If there is no referrer or if the domain does not match, I do not want any redir ...

Currently, I am working on a fascinating NextJS project that showcases a series of interactive blocks. As the user navigates through the app, these blocks dynamically adjust their size and position on the screen. To achieve this effect, I'm leveragin ...

When I try to pass data from one component to another using query, I encounter an issue where the data is undefined or { params: {}, searchParams: {} }. However, in the ProductData component, the data is received correctly. Can you help me identify what I ...

On standard pages, you can see the logo and the floating logo on the card. However, in dynamic routing, you will notice a difference with the logo and the card's floating logo. If I add a forward slash before the image name, it will work locally but ...

I am looking to establish a dynamic route hierarchy for my next.js project, where the primary directory is named countries and will contain multiple country subdirectories. www.mysite.com/countries www.mysite.com/countries/united-states www.mysite.com/coun ...

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/ca ...

Query 1: I am in the process of updating our custom application from version 11.1.4 to 12.2.0 of Next.js, but encountering an issue as follows: Error - ./node_modules/@internationalized/date/dist/import.mjs:1:0 Module not found: Can't resolve ' ...

Previously, with the legacy pages router, I was able to use await on router.push. This allowed me to keep a button disabled while waiting for navigation to another page: async function onSubmit(input: CreatePostFormData) { try { awai ...

One aspect I'm curious about is the Link component from 'next-Link'. If I need to pass sensitive data, such as a category_id, how can I securely transmit it for use in the getServerSideProps() function without relying on query strings? ...

In my Next.js 13 app, I use the app router to redirect users to the login page if they are not logged in. This redirection is done in the layout.tsx file located in a page folder. Essentially, I want to determine if the user is logged in before rendering o ...

It appears that I am currently using the most recent version of Nextjs, which is 13.2.4v, and I am not utilizing the app or src directory. The issue arises when hovering over the Link Next component, as it triggers a server request leading to decreased per ...

Currently, I am facing an issue with implementing dynamic routes in my NextJS 13 project. The goal is to have a URI structure like blogs/id/, where the id part should be dynamic. Unfortunately, it seems that this setup is not working as expected, and inste ...

Utilizing nextjs dynamic routing, I have implemented a card that, when clicked, redirects to an individual card component based on its id. However, upon clicking the card, it results in a 404 page not found error. The folder structure I am using is located ...

My issue involves a dynamic page route following another dynamic page route. Interestingly, I am encountering a warning only for the second dynamic page route. Warning: The prop `href` does not match. Server: "/books/category/[category]/filter/[filter ...

Recently diving into the realm of professional web development, I embarked on a project to craft a website. This website was built using Next JS v13.5.3 with App Router, generating dynamic routes and mostly composed of components that pull data from a jso ...

Check out this code snippet for fetching data from a local Mock Data : export default function Blog({ params }: Props) { const blog_id = params.blog; const blog = blogsData.find((blog) => blog.id === blog_id); if (!blog) { return (<div>Blog N ...

I'm in the process of developing a website with Next.js, using the Next.js App router. I've successfully implemented NextAuth for managing logins, and so far, user creation and login functions are operating smoothly. However, I've run into ...

Exploring nested children components in Next.js as a React JS developer. In React, I used the outlet to nest child components, but I am unsure how to achieve this in Next.js. Folder Structure: https://example.com/folder-structure.png Index.js: https:// ...

My challenge lies in sending data via router.push to a page with dynamic room id (src/pages/editor/[roomid].tsx) in Next.js. I want the URL to stay clean so users can easily edit their username in the URL if needed. When initially loaded, router.query suc ...

I am in the process of developing a website that showcases a list of restaurant cards on the main page I attempted to create a folder named "detail" with [id].jsx file. Below is the code for [id].jsx: export const getStaticPaths = async () => { const ...

I have a large number of references on my website that I am in the process of migrating to NextJS. Many of these references start with capital letters, like this: (note the capital 'P' in Presenter) I would like all of them to be rewritten as: ...