Questions tagged [app-router]

116 questions
0
votes
1 answer

Chaining Multiple Middlewares in Next.js

I am using Next.js version 13.4.7 and have implemented a middleware that handles redirection based on a token. Now, I want to add a middleware for internationalization (i18n) using next-intl, but I am unsure how to chain multiple middlewares…
0
votes
1 answer

Set cookies on client from server side Nextjs 13

I have a server side component (nextjs 13 app router) import WidthWrapper from "@/components/WidthWrapper"; import { brandQuery } from "@/api/brand"; const BrandsContainer = async () => { const { data, status } = await brandQuery(); if…
0
votes
3 answers

Passing data from one page to a dynamic route in Next.js 13 with app router

Problem Statement: In NextJS 13 with app router, I want to pass data from "/experimental" to dynamic route "/experimental/${id}". It gives me 'router.query' as it is undefined. Is there any better approach? I tried using 'next/navigation' in the…
Auvee
  • 95
  • 2
  • 15
0
votes
0 answers

How to pass props between routes in Nextjs App router

I am using App router and I want to pass parameters as object without using useParams & useSearchParams If I were to have a object say person const person: Person = { name: "John Doe", age: 25, address: "123 Main St", }; I want to send person…
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
0
votes
1 answer

How to build a ProgressBar in Nextjs in the new App Router?

I've been trying to create a progress bar for project i'm working on but the ProgressBar Library from Npm seems to not work with the new App Router. Any Ideas on how to implement this ?
0
votes
1 answer

easier way to get page params in nested components in next.js app router

I have lots of nested components in my next.js application. And for getting translations i rely on the params.lang. Now i have drill this to every single component. I know there are hooks, but i want to render them as server components. Is there any…
Shreyas Jadhav
  • 2,363
  • 4
  • 10
  • 23
0
votes
0 answers

NEXTJS - How to create a function that has different behavior depending on the type of component it is

Here's my current function : export const t = (locale, nsKey) => { const dictionary = getDictionary(locale) return getNestedValue(dictionary, nsKey) } ^ This function intents are to reproduce i18n feature.. to be able to get text from a key…
Ninhache
  • 26
  • 3
0
votes
0 answers

Why does client side fetch cause render looping

I'm trying to fetch data on the client side - using 'use client' to an API route handler in NextJS. I've followed the example to use useEffect and useState to prevent looping the fetch request. Instead of rerendering with my unordered list of todos…
asafreedman
  • 572
  • 4
  • 10
0
votes
0 answers

Next.js app router server side render with Cache?

I am struggling to understand the caching mechanism in Next.js app router. According to the documentation, Next.js is supposed to cache everything statically by default, but this doesn't seem to apply when dealing with dynamic paths in my…
0
votes
0 answers

Next 13 mounting under a subpath on the server

I'm setting up a NextJS 13 app under a subpath (/my-app) on my host. But it seems that it only works partially, it also feels that I'm fixing one thing and then another thing pops up. I tried the following things: I tried setting the base path in…
Vince V.
  • 3,115
  • 3
  • 30
  • 45
0
votes
0 answers

New to Next.js: 500 Error When Handling Stripe Webhooks and Updating Supabase Database

I'm new to Next.js and I'm currently building an application where I'm trying to handle Stripe webhooks and update user subscription details in my Supabase database. I've set up my endpoint and I'm using the stripe.webhooks.constructEvent() function…
0
votes
1 answer

NextJs 13.4 React Query with dapr javascript sdk. Module not found error

I am working on a NextJs application that use App Router. I ran into some problems when we wanted to use React Query instead of fetching in server components. I have made a file in app/utils/api.ts. And I have client component which is going to use…
Sandra
  • 1
0
votes
0 answers

Nextjs app router Uncaught (in promise) DOMException: Failed to execute 'open' on 'CacheStorage': Unexpected internal error

I'm using Next.js V13+ app router and I came across this DOM error. 'open' is a state variable in one of the client components used to conditionally render JSX. I'm still not sure why this error would show up.
Ibra
  • 912
  • 1
  • 12
  • 31
0
votes
1 answer

App-Router: How to persist API-Header for next request

I currently struggle with the following issue: From an API-GET-Request I get an etag-Header I need to persist in the cache for a possible UPDATE?DELETE Request to be sent as If-Match-Header. I try to save it in a Server-Side-Cookie like this: //…
DotCoyote
  • 85
  • 2
  • 6
0
votes
1 answer

Next Js 13 routing

how I can add dynamicly and remove query parameter with Next Js useRouter from "next/navigation" with App Routing? I need add filter to query, such as add filters=219,213 with .../hotels?id=123&type=hotel I tried router replace to add new query…