281 questions
2
votes
0
answers
45
views
next js dynamic page's dynamic meta not showing up in view source of the page
In my nextjs 15 project with app router. i am trying to add meta details into one of its dynamic route using genrateMetaData function. but somehow its not being rendered in the view source of the page ...
- 21
0
votes
0
answers
37
views
After browser back click, showing page content is still from previous route for 4 secs but url is correct. Its happening after upgrading nextjs 15.4.3
Issue Description:
After upgrading Next.js from 15.3.1 to 15.4.3 and sitecore-jss from 22.7.0 to 22.8.0 (as recommended to resolve a critical vulnerability reported by Wiz in the [email protected] ...
- 146
0
votes
1
answer
103
views
Getting error while deployment of next js app but it runs locally without error [closed]
I'm deploying a Next.js 15.3.3 app to Vercel and encountering a TypeScript error related to dynamic route parameters. The error says:
"Type '{ params: { questionId: string; questionSlug: string; }...
0
votes
0
answers
89
views
How to create a root-level catch-all dynamic route in Next.js App Router without conflicting with other dynamic or root routes?
I'm building an ecommerce app with Next.js App Router and have these routes:
/users/[id] for user profiles
A root-level catch-all route [...slug] to handle multi-level dynamic paths like:
/...
0
votes
1
answer
626
views
How to use output: 'export' without generateStaticParams() in Next.JS with 'use client';
I am migrating my client-side React website to next.js and want to keep everything as SSG but with next.js file-based routing capabilities.
I have this component on my React website, where I use a ...
- 762
0
votes
1
answer
47
views
Optional Router Parameter for NextJS App Router
I am trying to achieve the following routing in this with AppRouter in NextJS.
/company/activity
/company/:cid/activity
I cannot use Optional Catch-all segment, as I will have more pages with same ...
- 718
0
votes
1
answer
107
views
Dynamic routing with SSG build in NextJS app router [closed]
I am working on a SSG website using NEXTJS app router.
I have generated a static build (OUT).
I want dynamic path like localhost:3000/username
I created src/app/[username]/page.js and when i enter ...
- 23
0
votes
0
answers
176
views
Error "Catch-all must be the last part of the URL" with Parallel Routes and catch-all routes in Next.js
Problem
In Next.js (version 14+), I'm working with Parallel Routes using the @ prefix and catch-all routes [...category]. My file structure is:
app/
[...category]/
@view_category/
...
0
votes
0
answers
29
views
How to set up ISR for dynamic routes in Next.js
interface Post {
id: number;
title: string;
body: string;
userId: number;
tags: string[];
}
async function getPost(id: string) {
const response = await fetch(`https://dummyjson.com/posts/$...
- 3
2
votes
2
answers
321
views
How to automatically render nearby not-found.tsx in Next.js 15 App Router without conditional rendering?
I’m using Next.js 15 with the App Router and facing an issue with handling "Not Found" pages in nested routes /dashboard/somerandomtest.
I have a route /dashboard/user, and inside /...
- 21
0
votes
0
answers
42
views
Getting 404 Error Despite Correct Folder Structure
I'm learning Next.js and encountered a 404 error when implementing dynamic routing. I've followed the recommended folder structure and ensured my configuration is correct, yet I still face this issue. ...
0
votes
0
answers
28
views
NextJS fast refresh page.tsx on updating server side
I have three files, all in the folder 'test':
actions.ts
page.tsx
Test.tsx
The problem is that upon making a change in test.tsx (client side), I see [Fast Refresh] rebuilding for my page.tsx, and my ...
0
votes
1
answer
35
views
Dynamic getStaticPaths in Next.js SSG for unknown value
I’m working with Next.js Static Site Generation (SSG) and need to generate static paths for a route like /recovery-password/[token]. However, the token value is unknown in advance and changes every ...
0
votes
0
answers
15
views
Nextjs pass big data to dynamic route component
I have component InitiateQuiz where student can choose quiz options like timer, number of questions and topics to be quizzed with, when student clicks on Generate, function handleGenerate will be ...
0
votes
0
answers
87
views
Next.js App Router: Dynamic Route searchParams Undefined in Vercel Deployment
I am experiencing an issue with the dynamic route page structure in Next.js's App Router. Specifically, when I print the props data params and searchParams in my local environment, everything works ...
0
votes
2
answers
105
views
Browser back causing client rendering in nextjs
I have a next js project where I have a form using which I fetch some data from backend and display to the user. The displayed data is in the form of a table and the user can click on the table row ...
- 458
2
votes
0
answers
182
views
client-side exception has occured (only on production mode running in server) (NextJs 15.1.6)
I'm pretty new to Nextjs and I encountered this issue.
My project setup:
"next": "15.1.6",
"react": "19.0.0",
"tailwindcss": "3.3.2",
I'm ...
- 21
0
votes
0
answers
104
views
How to translate the not-found page in Next.JS
My website has translations, and I want to translate my error pages. But I translate my pages with a dynamic route (/app/[locale]) and not-found.tsx must be at the root (app/not-found.tsx). I don't ...
- 1
0
votes
1
answer
884
views
How to fix 'params is not a valid type' error in Next.js API route with TypeScript?
I am trying to deploy this project and i keep getting an error message:
app/api/invoice/markAsPaid/[invoiceId]/route.ts
Type error: Route "app/api/invoice/markAsPaid/[invoiceId]/route.ts" ...
0
votes
0
answers
23
views
Reuse data fetched in page inside generateMetadata
I’m using Next.js 15 and encountering an issue where the API is being called twice, once from the generateMetadata() function and once from the page component function. I also used React’s cache() and ...
- 11
0
votes
0
answers
78
views
Scroll-to-top not working when Link element opens new page
I've built several webapps in nextjs in exactly same way as current one and never had this issue.
After clicking Link element in product card it opens new dynamic page depending on product id, but ...
- 1
0
votes
1
answer
47
views
NextJS Wrap Link around NextJS Image - causes image to appear smaller
I want to wrap a Link tag around an image. However when doing so, the image appears much smaller than before (prior to adding the Link tag). How can I get the image back to its original size?
For ...
- 17
0
votes
0
answers
58
views
Next js returns a not found page, but returns a 200 ok response for that page when checked in the network tab
This is my app/exam/[category]/page.tsx route page.. which does some validation and returns notfound() when the response is not ok from the api.
This indeed returns a notFound page but returns a 200 ...
0
votes
1
answer
159
views
NextJS 14 app router dynamic route returns the 404 page but with 200 status code, how to set the status code to 404 without removing the loading.tsx?
Following this question, I have a scenario in which I am fetching my agent (product) data from API by the agent slug, where the slug is dynamic.
In NextJS 14 app router I am handling this with dynamic ...
0
votes
0
answers
48
views
How to Add a Dynamic URL Segment in Next.js (with a Fallback if the Database Field is Null)
I'm working on a Next.js application and need to implement a dynamic URL segment that comes right after the main domain—something like localhost:3000/accountName/.... The value accountName is stored ...
0
votes
1
answer
680
views
Next.js dynamic routing in client side page
I'm fairly new to Next.js and I've been trying to implement dynamic routing to one of my pages. Following the docs, it says to add the prop params to the page as a promise that returns the param like ...
- 1,511
1
vote
0
answers
157
views
Next js interception routes with dynamic parameters don't work on vercel production mode
This may be a duplicate of Next.js intercepting routes feature doesn't work in production mode. I'm facing the same problem, locally everything works as expected in dev and prod mode, but when I ...
- 10
1
vote
0
answers
244
views
Blog with Dynamic Routing via Content Collections in Astro (SSG Mode)
I'm having trouble with dynamic routing in Astro. I'm working with a Content Collection called "Articles" and then created a route: [slug].astro. However, the slug does not resolve to the ...
- 11
0
votes
2
answers
205
views
Next.js Dynamic Route Type Error in searchParams when Fetching Data for Client Component
After creating a dynamic route [id] it contains 2 pages, a server side component where the error is and a client side PolicyVerificationClient.tsx which takes the params Certificatenumber and id.
...
-1
votes
1
answer
91
views
I get a "Unhandled Runtime Error TypeError: network error" if i try to redirect (router.push) from the client
I am trying to redirect to the welcome page after successfully submitting the form in my handleFinish function. Since no errors are raised in the try/catch block, I mark the form as 'complete' and ...
- 11
0
votes
1
answer
108
views
NextJS static exports and using window.open() to open page on new tab results in 404 error in production
I have a NextJS (v.14) app that utilizes pages router and static exports and acts more or less like an SPA for most things:
/** @type {import('next').NextConfig} */
const nextConfig = {
output: '...
- 696
0
votes
1
answer
227
views
How to set the default language without /en in Next.js with next-i18next?
I have a Next.js application with internationalization, using next-i18next. Here’s an example app that demonstrates the setup:
Live Demo
GitHub Repository
Currently, when navigating to the root path, ...
0
votes
2
answers
521
views
Nextjs Link always replacing route instead of appending
I am facing issue with nextjs Link component. It is always replacing the url path with whatever is given in href field. For example: I have this folder structure for app routing:
-> profile
...
- 23
14
votes
13
answers
29k
views
`params` should be awaited
I have a get endpoint as follows:
import { NextResponse } from 'next/server';
import connection from '@config/db';
export async function GET(req: Request, context: { params: { providerId: number } }) ...
- 187
1
vote
1
answer
169
views
How can I get dynamic routing properties in a template.tsx file in NextJS?
I have a file architecture as follows:
projects
|
-page.tsx
-[id]
|
-template.tsx
-overview
|
-page.tsx
-settings
|
-page.tsx
I am using server-rendered pages.
I want ...
- 806
0
votes
1
answer
154
views
Adding search and pagination issue, financial dashboard tutorial, chapter 11
I've had to find different ways of getting through the tutorial, such as seeding my postgres database with my deployed app as opposed to through my local database, leaving me stuck having to code from ...
1
vote
0
answers
453
views
How to use Dynamic Subdomains in NextJS 14 with Clerk Auth
I have a NextJS 14 (app router) application with Clerk auth, but I want to add dynamic subdomains so each business will have a subdomain (e.g. thomas-bistro.mysite.app). Due to Clerk middleware this ...
- 13
1
vote
0
answers
69
views
Getting error in nextjs app with clerk plugin
NEXTJS VERSION : 14.2.5
"dependencies": {
"@clerk/backend": "1.6.2",
"@clerk/clerk-react": "5.4.0",
"@clerk/shared": "2.5....
- 1,549
0
votes
2
answers
74
views
conditional rendering a table in next js
I have a table of values with varying values of location. I am trying to filter the rows in the database by matching the location value. The code is
'use client';
import { useState, useEffect } from '...
1
vote
0
answers
158
views
NextJs build run Error: Export encountered errors on following paths: /page: /
When I use npm run build in terminal on my nextjs application, I get this error. I'm having trouble deploying but I can host it locally.
What does this path page: / refer to?
I also made following ...
- 11
0
votes
2
answers
43
views
Why is no parameter passed in link?
On my NextJs-project I have the following three documents.
page.tsx in src/app/[id]/dashboard:
import { Button } from 'components/ui/button';
import Link from 'next/link';
import { cookies } from '...
0
votes
0
answers
121
views
In deployed next.js app, my images are not displaying in the dynamic route pages. In the static ones, It works well. How can I fix it?
I have images under my public folder. I can see all images in the development but there is a problem in deployment. The path works well in the static rendered pages and I can see my images. However, ...
1
vote
2
answers
329
views
Learn Next.js: Dynamic route returns 404
I am working through the "Learn Next.js"-tutorial and I am stuck on this page, specifically on creating the page for editing an invoice. I keep getting the error "404 - Page not found&...
- 89
0
votes
1
answer
87
views
Cannot import file globals.scss for new layout.tsx
I have a problem when creating a new layout.tsx file in (auth) folder, when I import the globals.scss file I can't apply the styles to the whole web. Please let me know where the issue is. Thanks all.
...
- 11
1
vote
0
answers
220
views
Nextjs 14 generateStaticParams doesn't generate files
I'm on NextJS 14 with the App router, and I'm using output: "export" to generate static files for production. I'm using the generateStaticParams function inside /[id]/page.tsx to export ...
- 906
0
votes
1
answer
289
views
NextJS app router dynamic routes not working with any named HTTP methods
This is the code placed inside /app/api/password/reset/confirm/[userId]/[idToken].ts.
import { NextRequest, NextResponse } from 'next/server';
// Define and export the GET handler
export const GET = ...
0
votes
0
answers
332
views
How to improve call performance in a dynamic route in Next.js 14 with caching and revalidate?
I'm working with Next.js 14 and have a dynamic route with more than 10,000 products. The API calls made when a product is clicked and page load (found via a search bar) are slow. Unfortunately, I ...
- 109
0
votes
0
answers
234
views
Using generateStaticParams function in Next.js 14, I'm not able to cache to my page
I am using Next.js 14 and my folder is like this:
In page.tsx:
export const dynamicParams = true;
export const revalidate = 3600;
export function generateStaticParams() {
return [
{"...
- 32.3k
1
vote
1
answer
47
views
next js dynamic routing errorUnhandled Runtime Error
enter image description here
Problem Details
I encountered an error while using a Next.js application with TypeScript. Specifically, I created a component AboutPage that takes a prop named para, which ...
0
votes
0
answers
184
views
Not Getting Params in next js 14
Just started learning next js and ran into this problem. When I click on view profile i get a not found page and not the desired userDetailsPage. Not getting the params.
My folder structure is like ...
