Upgrade Next Js to version 12 or even push it further to version 13

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

'@swc/helpers/_/_class_private_field_init'

Import trace for the module requested is given below:

In some articles, it was suggested to upgrade directly to Next.js 13.

Query 2: When attempting to upgrade to Next.js 13, I encountered the error message:

req.on is not a function

If anyone has faced a similar issue or has suggestions for solutions, please do share them.

Thank you in advance! The decision on whether to upgrade to Next.js 12 or 13 is pending.

next.jsnext.js13nextjs-dynamic-routingnext.js14

Answer №1

Make sure to review and update all dependencies to ensure compatibility with Next.js 12.2.0 by running npm outdated.

To start fresh, delete your node_modules folder and package-lock.json file (rm -rf node_modules package-lock.json) before reinstalling dependencies with npm install.

If issues persist, consider upgrading to Next.js 13 as it might resolve any compatibility problems.

Update the version in your package.json file to "^13.0.0" for Next.js and then run npm install.

Common issue with Next.js 13 ("req.on is not a function"): This error typically occurs due to mishandling of API routes or custom server configurations in Next.js 13.

Review and modify your API routes or custom server setup following the guidelines provided in the Next.js 13 documentation. Identify and rework any middleware or server configurations that could be causing conflicts with the updated version. If you are using a custom server, contemplate switching to the built-in server features of Next.js 13 for better compatibility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the variance between Next.js and Create React App?

I've been curious about understanding the distinctions between Next.js and Create React App (CRA). Both aim to simplify our lives when developing front-end applications with React. While researching online, I came across a key difference: Next.js o ...

reactjstypescriptreduxnext.jscreate-react-app

I'm having trouble getting this text to align properly next to the image. Plus, I can't seem to achieve a horizontal screen alignment either

There seems to be an answer available, but I'm clearly not understanding it, so I've come here seeking further explanation and assistance. CSS can be quite complex, right? Here's a screenshot of my current project: https://i.stack.imgur.com/ ...

cssreactjsnext.js

Persisting state in NextJS using Zustand

Check out my latest Github repository: https://github.com/salmanfazal01/next-firebase-starter I'm currently working on a project that involves NextJS, Firebase, and Zustand as the global state manager. I'm facing an issue with persisting certai ...

reactjsnext.jszustand

There was a glitch encountered while constructing (Verifying type validity) with Prisma

There was an issue in the node_modules/@prisma/client/runtime/library.d.ts file on line 1161, specifically error TS1005 where a '?' was expected. 1161 | select: infer S extends object; | ^ 1162 | } & R ...

javascriptnpmnext.jsprisma

Error in NextJS group routing compilation: "Path is neither a posix nor a windows path"

Currently, I am learning Next.js by taking their online course at https://nextjs.org/learn/dashboard-app/streaming. During the process of creating a folder named (overview) within my project structure, I encountered an error while compiling: "Uncaugh ...

webpacknext.js

What causes errors when installing create next app with postcss?

Having trouble with the code in question? It's quite simple. There is an "app" folder containing a server directory inside. With a terminal open, I navigate to the app directory by using cd command. Then, I run the command npx create-next-app client w ...

reactjsnext.jsreact-domnpx

Utilizing NextJS to fetch JSON data from the public directory

I am having trouble importing a globe.json file from my public folder. When I try to import it, I get the error message Module not found: Can't resolve '/globe.json' This is how my files are structured currently: public globe.json src ...

jsonnext.jsnext.js13

What is causing this NextJS function to function correctly on a local server but not when deployed on AWS Lambda?

I've spent a lot of time testing and researching this issue, but I haven't been able to solve it. I have a function that runs perfectly fine on my local machine (no errors), but fails when deployed as an AWS Lambda. To demonstrate the problem, I ...

amazon-web-servicesaws-lambdanext.jsserverless-frameworkaws-serverless

Managing Flicker Effect by Implementing Theme Switching and Using Local Storage in Next.js with Ant Design

I've been working on a new feature to switch themes (light/dark) dynamically in a Next.js application using Ant Design. Successfully integrating the theme switch with a toggle switch and useState hook, I'm faced with the challenge of storing the ...

javascriptreactjsnext.jsantdserver-side-rendering

The Parallax effect reference hook does not seem to be functioning properly with components in NextJs

I'm attempting to implement the useParallax hook on an element within my JavaScript file. My setup involves NextJs, ReactJs, and styled components. Here is how I integrated the hook: Mainland.js import React, { useEffect, useRef } from 'react&ap ...

htmlreactjsreact-hooksnext.jsuse-ref

Maintaining the image's aspect ratio using the Next Image component

Currently, I am using Next's Image component to display a logo. Although the image itself is 1843x550 px, I have specified the width and height properties to adjust it to fit within a space of 83x24 px. However, due to a slightly different aspect rati ...

htmlcssreactjsimagenext.js

Navigating resolvedUrl with getServerSideProps in the newest version of NextJS - a comprehensive guide

Is there a way to obtain the pathname without using client-side rendering? I have been searching for information on how to utilize the getServerSideProps function, but so far with no luck. Initially, I attempted to employ usePathname; however, this result ...

typescriptnext.jsserver-side-renderingnext.js13getserversideprops

Encountering Thumbnail Type Error While Implementing Swiper in Next.js

When trying to integrate Swiper with Next.js, I ran into an issue concerning thumbnails. "onSwiper={setThumbsSwiper}" This line is causing a TypeScript error: swiper-react.d.ts(23, 3): The expected type comes from property 'onSwiper' w ...

typescriptnext.jsswiper.js

Convert TypeScript-specific statements into standard JavaScript code

For my nextjs frontend, I want to integrate authentication using a keycloak server. I came across this helpful example on how to implement it. The only issue is that the example is in typescript and I need to adapt it for my javascript application. Being u ...

javascriptreactjstypescriptnext.js

Breaking the CORS policy for images in Next.js can be achieved by implementing certain methods and

I am currently working on a project in nextjs where I am utilizing the <Image /> component from next/image. The images are being fetched from a CDN hosted on a digitalOcean server. However, there seems to be an issue with the CORS policy for the CDN ...

next.jscorsnextjs-image

Using conditional CSS in React/Next.js

While using Next.js, I have implemented conditional rendering on components successfully. However, I am facing an issue where the CSS styles differ between different components. Code 1: import React from "react"; import Profile from "../../ ...

javascriptcssreactjsnext.js

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Currently, I am utilizing Chakra UI to design a menu and here is what I have so far: <Menu> <MenuButton>hover over this</MenuButton> <MenuList> <Flex>To show/hide this</Flex> </MenuList> </ ...

javascriptcssreactjsnext.jschakra-ui

What is the best way to create individual clickable images that open up a modal window for each one?

Currently, I have created a function that is able to map images from an array in Next.js using react-bootstrap. The function is functioning as expected, however, my goal is to add an onClick function to each image so that when clicked, it opens up in a new ...

javascriptreactjsnext.js

Guide to storing publicUrl from product form in NextJS using Supabase

Seeking assistance as a newcomer to Supabase, I find myself struggling with certain concepts. My goal is to design a basic form where I can upload an image, input name, description, and price. Afterwards, the image should be saved in a bucket while the in ...

reactjsnext.jssupabase

Installation of Shadcn UI results in the disruption of Tailwind CSS

The Shadcn UI was performing well for a few weeks until yesterday. When I ran my NextJS app on my local host, the tailwind styling stopped working. To troubleshoot, I created a new NextJS 13 app in a different location, and everything worked fine - tailwin ...

next.jstailwind-css