Questions tagged [next.js13]

339 questions
16
votes
8 answers

Uncaught Error: invariant expected app router to be mounted

I've got an error while do migration to next 13 on my old project written in next 12. Console Error Log I can't find fault in my code for that errors. And I googled it but i can't find any solution for this. It don't explains any errors for my…
Evans Benedict
  • 276
  • 1
  • 1
  • 7
15
votes
2 answers

Next.js 13 - Fetch Failed Error. How do I resolve this?

I was trying the Next 13 beta version, and I faced a strange problem. What I am trying to do is, fetch data on the server side and display them on the page. However, the "fetch" operation fails on the server side. Below is the code for the Next.js…
Berk Cohadar
  • 151
  • 1
  • 5
8
votes
2 answers

Next.js 13 "window is not defined"

I wrote a component that looks like this: 'use client' export const HorizontalModule = (props: any) => { ... return ( {scrollPosition >= 0 && ( )} {scrollPosition >=…
H3lltronik
  • 562
  • 8
  • 26
7
votes
4 answers

Next 13.4 where is the api Folder?

I have a question regarding Next 13.4. Since today I can only use Next 13.4. I wonder where the api folder has gone. It is no longer created in this version. It still worked in 13.3. How can I now make a POST or GET request and the result with…
Captai-N
  • 1,124
  • 3
  • 15
  • 26
7
votes
6 answers

Module not found: Can't resolve '@swc/helpers/src/_class_private_field_init.mjs' using NextUI with Next.js 13

I´m trying to use NextUI with the latest version of Next.js 13. Following the official documentation of NextUI I have followed these steps: Install NextUI for Next.js npm i @nextui-org/react 2.Go to pages/_app.js and add this: // 1. import…
7
votes
1 answer

How to provide context to React Server Components (Next.js 13.2) ? (e.g. theme)

I’ve been playing with React Server Components for nearly 2 weeks now and this question has been making my brain hurt: how do you provide context to server components? Like for example, providing a theme (e.g dark | light mode) ? Ive checked the…
7
votes
2 answers

How to pipe to Next.js 13 api response?

Earlier, I was able to pipe the response of another api call to Next.js api response as follows export default async function (req, res) { // prevent same site/ obfuscate original API // some logic here fetch(req.body.url).then(r => { …
Mayank Kumar Chaudhari
  • 16,027
  • 10
  • 55
  • 122
7
votes
7 answers

Error: Invalid with child after updating to Next.js 13

After updating Next.js to version 13, I got this client error Contact
Chukwuemeka Maduekwe
  • 6,687
  • 5
  • 44
  • 67
6
votes
0 answers

Getting uncaughtException: Error: Cannot find module '...\.next\server\app\home\lib\worker.js' when trying to use pino.transport in Next.js

I have created a Next.js project with typescript using create-next-app. For logging of this particular project I have decided to use Pino logging library as it is recommended by Next.js itself. When I am using Pino without its transport…
6
votes
2 answers

Why internationalization is not working on NextJS 13 using a [locale] sub-folder on app/

How to get i18n working on Next 13 ? I have created a nested [locale]/ folder in app/ but it just gives a 404 See my next.config.js const nextConfig = { experimental: { appDir: true, }, i18n: { defaultLocale: 'fr, locales: ['fr',…
crg
  • 4,284
  • 2
  • 29
  • 57
5
votes
0 answers

How to prevent focus to the browser window on error when developing with Next.JS?

When developing with Next.JS, if the app throws an exception, you're redirected to the browser window rendering the error overlay. Can this behavior be changed? It can get quite annoying sometimes if you're doing multi-files editing, you're typing…
5
votes
2 answers

Load different css files based on environment with NextJS

I'm building a frontend app using NextJS v.13 and this will be a generic frontend codebase that will be used by multiple sites. I want to have: button.site1.css button.site2.css And when I build the codebase for site1 I want to somehow tell the…
Weblurk
  • 6,562
  • 18
  • 64
  • 120
4
votes
3 answers

Page refresh not working from within component

I have a protected dashboard page that contains a list of reviews. When a new review is added, I want to refresh the page. However, this does not work. Specifically, useRouter().refresh does nothing. I have an AddReview component that is displayed…
lost_in_the_source
  • 10,998
  • 9
  • 46
  • 75
4
votes
1 answer

How to handle error response in Next.js 13 Server Component?

So I'm trying to fetch data that needs token header for authorization in Server Component page.tsx. The data itself comes from external backend/API and it can response with different status code. If Unauthorized it will response with status 401, if…
gidgud
  • 71
  • 1
  • 6
4
votes
1 answer

How do I pass data from server component to client component in Next.js 13 app router?

How to pass data from the server component to the client component in Next.js 13 app router? I am calling an external API in page.tsx which gives the city of the person. I want to pass this city to the client component where this city can be…
1
2 3
22 23