Questions tagged [app-router]
116 questions
1
vote
0 answers
How to choose between Nextjs 13 (app router) server & client component patterns
In my opinion one of the most difficult things about nextjs 13 (app router) is figuring out when to utilize the vast number of different features offered (Am I alone here?). There's not a ton of information yet about best practices in real world…
Alfred Madere
- 21
- 4
1
vote
1 answer
Using apollo client with nextjs 13 with app router
I was planning to upgrade to nextJS 13 with app router. But I'm not able to make apollo client work with the latest version. Creating a single cache for server components will leads to data leaks as apollo was designed with single user in mind. I…
Ajith
- 45
- 1
- 7
1
vote
1 answer
Reset title to metadata value after changing it dynamically
In my Next.js project, I change the page title dynamically in reaction to an event:
if (unread_count === 0) {
document.title = "Flow Chat";
} else {
document.title = `Flow Chat - ${unread_count} unread messages`;
}
The default title of the page…
Florian Walther
- 6,237
- 5
- 46
- 104
1
vote
0 answers
How to use UI libraries that utilize Providers with NextJS app router, inside server-side components?
Most recent libraries like ChakraUI, Mantine, AndD, ... require you to wrap you entire application inside a Provider component. However, by doing so, all the content created by these libraries should be used inside client-side pages.
Now imagine a…
Amin Jafarlou
- 336
- 1
- 10
1
vote
2 answers
NextJs 13 App Router - Error occurred prerendering page. TypeError: fetch failed
My project (built on NextJs 13 App Router) crashed during production (deployment on Vercel via github) but it worked perfectly on development. The error i got is
Error: Failed to fetch data
at getData…
Olami Bells
- 21
- 5
1
vote
1 answer
Using NextJS revalidateTag with Prisma in App Router and Server Components
Is it possible in Next 13 with the App Router, to use revalidatePath without making a fetch call? I'm trying to avoid a full refresh with router.refresh() and rather just refresh on specific tags. I understand this is possible with fetch, but due to…
P Savva
- 309
- 1
- 5
1
vote
1 answer
MUI v5 make styles loads after initial render with NextJS App Router
I am having an issue where my makestyles loads after the initial page render of my nextjs application.
I am using the latest App Router with NextJS as well as the latest stable version of MUI (5.14)
I've copied the example from the MUI documentation…
Travis Delly
- 1,194
- 2
- 11
- 20
1
vote
1 answer
NextJS App Router - redirect() in useEffect hook
I'm currently working on a Next.js 13.4.9 project and I'm facing an issue with redirecting logged in users within a client component using the useEffect hook. I have tried a certain method, but it keeps throwing an error in the browser…
Jan Phillip Schwietzer
- 11
- 1
- 3
1
vote
0 answers
Why can I use useTranslations hooks from 'next-intl' package on server components?
I am trying to use next.js app router with next-intl package. On next-intl document, they show a example that use hooks on server components.
https://next-intl-docs.vercel.app/docs/environments/server-client-components
I have been known that I can't…
신원세
- 11
- 1
1
vote
1 answer
Next.js with App Router, server-side code failing to build with node.js deps when using Turborepo
I am migrating my existing Next.js projects to a Turborepo monorepo.
The Next.js projects use the newest App Router, and have server-side routes and components which previously all successfully built outside of Turborepo, but now fail to build…
Hacktisch
- 1,392
- 15
- 33
1
vote
0 answers
catch pressing back button in Next 13 app router
I would need to catch pressing back button in browser and show modal to alert user, that he has unsaved changes on page. Normally I would use window.onbeforeunload or in react with react-router i was using use_unstableBlocker. Has app router…
hridelvit
- 11
- 2
1
vote
1 answer
How to use Auth0 routing on Next.js App Router?
Auth0 provides a routing setup kit for the traditional Pages Router. Is there a way to use Auth0 routes on the new App Router?
App Router (Next.js): https://nextjs.org/docs/app
Add the dynamic API route (Auth0):…
Ginpei
- 2,958
- 5
- 15
- 25
1
vote
0 answers
How to re-render server component in nextjs 13.x using api routes?
I have a very basic project structure with just a root route. In my page.tsx, which is a server component, I fetch and show a list of countries from REST countries API endpoint.
I also have a client component search-bar.tsx which has a search input…
Ajitesh Chhatani
- 25
- 1
- 7
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…
Geery.S
- 121
- 2
- 10
1
vote
1 answer
Intercepting routes nextjs not rendering Modal
When trying to use the intercepting routes feature of nextjs' new app router to use it with a Modal, the Modal never gets rendered and only the url changes.
My project structure looks like…
Bottle
- 13
- 2