Questions tagged [next.js13]

Introducing Next.js 13, the latest iteration of the remarkable JavaScript framework for web development. Marked by its release on October 26, 2022, this version unveils an impressive set of features including layout support, React Server Components, data fetching capabilities, seamless streaming, and the game-changing Turbopack – a revolutionary successor to Webpack built with Rust. Please employ this tag exclusively for inquiries pertaining to Next.js 13 and its distinctive attributes. For general queries regarding Next.js programming, kindly make use of the [next.js] tag.

Having trouble changing file names in a Next.js 13 project

I've been facing an issue ever since Next.Js 13 updated the `pages` folder to a new `app` folder. Whenever I try to rename the default "Pages.tsx" file to something like "Home.tsx" or "Information.tsx", it breaks and shows a 404 Page error. The first time ...

typescriptnext.jsnext.js13

The nextjs API route handler is experiencing an issue due to the absence of the Prisma Post request

Encountering a problem while sending a JSON content post request to Next.js API route handlers using Thunder Client. { "category_name": "Category Name" } Getting a 500 Internal Server Error when making a POST request via Thunder Clie ...

reactjsnext.jsjsxprismanext.js13

Error: The type '{ children: Element[]; className: string; }' cannot be assigned to the type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

My current setup involves using Next.js and TypeScript While working in Visual Studio Code, I encountered an error message stating Type error: Type '{ children: Element[]; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttribute ...

reactjstypescriptnext.jsnext.js13

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

When accessing my website through a hyperlink, NextJS displays that I am logged out

On the top right corner of my website, there is a user bar component that displays my username if I am logged in, or shows a "Sign In" link. However, every time I land on my website from an external site, it only shows the "Sign In" link instead of recogn ...

next.jsnext.js13

nextauth.js is experiencing issues with redirecting users after a successful login

Currently in the process of developing a next.js application, I am focusing on implementing the authentication layer by referencing this helpful documentation This is how my authentication configuration looks like : /myApp/auth.ts import { sql } from &q ...

reactjsnext.jsnext.js13next-auth

Upcoming Step 13: Load user preferences and data from localStorage

In my React component within Next.js, I have implemented a tabular structure that saves and restores user's column preferences using localStorage. It is important for the component to load these preferences before displaying any part of the table. Directl ...

reactjsnext.jslocal-storageserver-side-renderingnext.js13

What is the best way to determine the current vertical scroll position in JavaScript?

Take a look at this: const handleScroll = () => { console.log(window.scrollY) }; useEffect(() => { window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }); ...

reactjsnext.jsreact-hooksnext.js13

The API handler in NextJS13 is encountering a null request body in the API request

I have recently set up a new NextJs project running version 13.4.1. Within the path src>app>api, there is a file named route.js. Below is the code snippet from the route.js file: import { NextResponse } from "next/server"; export async fun ...

restnext.jsnext.js13

What are the potential disadvantages of relocating the login logic from the 'signIn()' function in NextAuth.js?

My experience with NextAuth.js for the first time has led me to realize that signing in using the Credentials provider can be a bit tricky when it comes to error handling. It seems like the default implementation should resemble something along these lines ...

javascriptnext.jsnext-authnext.js13

Executing NextJS Request on Each Route Transition

I am working on a project with NEXTJS 13 and a Pages directory. I am looking to make a request to our graphql server every time a route changes. Is it possible to do this from the server-side? Additionally, can I store this data in my Redux store after m ...

reactjsnext.jsgraphgraphqlnext.js13

In Next.js, encountering the error message "res.redirect is not a valid function"

I encountered an error while trying to perform server-side validation and redirecting the user to an external payment provider based on the result. TypeError: res.redirect is not a function at eval (webpack-internal:///(rsc)/./src/app/api/payments/phon ...

next.jsnext.js13phonepe

What is the best way to achieve the functionality of "redirecting to the previous dynamic route in history after a successful login" with Nextauth?

In an attempt to set up a system where users are redirected to the previous protected dynamic route after a successful login, I will provide a brief explanation. Let's start with the folder structure, Login component, and Nextauth settings: Using &qu ...

next.jsnext.js13next-auth

Next.js experiencing issues with applying styles from .modules.scss files

Recently, I initiated a new Next.js 13 application, Within this project, there exists a file named main.modules.scss .heading { font-size: 4rem; color: #000; } .dark .heading { color: #fff; } My intention is to utilize this file for styling ...

cssreactjsnext.jssassnext.js13

Setting up Next.js 13 with GraphQL and Apollo Configuration

I am currently working on configuring a graphql frontend application with nextjs13. However, I have encountered an issue with the new folder structure as there is no longer an _app.tsx file. I am now unsure of how to proceed with setting it up. Previously ...

next.jsapollonext.js13

Adding auth0 authentication to a Next.js 13 application: A step-by-step guide

Currently, I am using a nextjs 12 application and set up auth0 as my authentication provider by following the guidelines provided here: . However, I am now looking to upgrade my application to nextjs 13, but I have not been able to find any documentation o ...

javascriptnext.jsupgradeauth0next.js13

Leveraging the power of Next.js version 13 in tandem with Elastic

I can't seem to figure out why I am getting an error when trying to read from an existing index using this API route and client-side page setup: import { Client } from "@elastic/elasticsearch"; import { NextResponse } from "next/server& ...

elasticsearchnext.jsnext.js13

Can Capacitor be integrated with the latest NextJS 13's "/app" architecture?

I'm experiencing challenges with implementing Capacitor in my NextJS 13 project that utilizes the new App router. Is there a way to generate an "out" folder and an "index.html" file when building the application while following the new "/app" structure of ...

next.jscross-platformcapacitornext.js13capacitor-plugin

Is it possible to invoke Next.js server actions as a queryFn in ReactQuery?

When implementing a query or mutation using React Query in Next.js 13-14, is it acceptable to substitute an actual function with a server action? ...

next.jsnext.js13react-querytanstackreact-query

MUI Autocomplete featuring the primary selection of 'Create New Customer/Vendor.'

I am looking to develop an autocomplete feature that consistently shows the primary option 'Add New Customer/Vendor.' This option should be visible regardless of whether a search is performed, there are no search results, or before any search is initiated. ...

reactjsmaterial-uinext.js13

I ran npm install -f without any issues. However, when trying to deploy the application on Netlify or Vercel, the build logs are showing errors. I would appreciate any suggestions on how

Currently, I am using mui/styles, emotion/styled, and emotion/react which have specific requirements when it comes to React versions. The first set of libraries require a React version that is less than or equal to 16.8.0, while Next.js v13 requires a Re ...

reactjsmaterial-uinext.js13

Exploring tailored markup features in Next.js version 13

I am trying to optimize my website for social media sharing on platforms like WhatsApp. I have been experimenting with different methods to set custom markup in Next.js 13, but haven't achieved the desired outcome yet. Your help and insight are greatl ...

javascriptreactjsnext.jsnext.js13nextjs-image

Error occurs while attempting to parallel/intercept routes within a route group in Next.js version 13.4

My current folder structure is as follows: https://i.stack.imgur.com/9nB2P.png Recently, I was working on implementing modals in my Next.js application following the documentation provided by Next.js. I am trying to replicate a modal similar to their nex ...

reactjsnext.jsnext.js13

Encountering a hydration error with the useResponsive hook in Nextjs Material UI

I am facing an issue with a useResponsive hook that relies on useMediaQuery from the Material-UI library. While using Next.js with app router, the initial value of the hook returns false and then transitions to true, causing a hydration mismatch. How can I ...

next.jsmaterial-uinext.js13

Encountering a 504 Timeout Error with Next.js and Next-Auth on our live server

After successfully developing a basic Next.js app with authentication using Next-Auth, I encountered a peculiar issue upon deployment to my production server. Despite configuring the environment variables accordingly in the .env.local file, I faced a persi ...

next.jsstrapinext.js13next-auth

Troubleshooting: Next.js 13 custom 404 page not functioning as expected

Currently, I am experimenting with setting up a custom 404 page for my next 13 project. I am following this approach: https://nextjs.org/docs/app/api-reference/file-conventions/not-found. However, whenever I enter an unmatched URL, the page appears blank! ...

reactjsnext.jsnext.js13custom-error-pages

The functionality of Framer Motion Animate Presence is currently experiencing issues when used with the latest NextJS App Router's route interception feature

I'm attempting to develop a modal utilizing intercepting routes similar to the example shown in this guide on NextJS documentation. I am using framer motion for implementing modal animations, however Animate Presence seems to be causing issues in this scen ...

reactjsnext.jsframer-motionnext.js13

The Next.js 13 internationalization website continues to redirect to the locale page despite my attempts to remove it

While working on my app with NextJs, I attempted to implement localisation, but it ended up causing confusion and issues. The application started lagging on the i18n route and became unresponsive, even after multiple attempts of restarting the development ...

next.jsinternationalizationnext.js13

The Server Components render encountered a glitch

Screenshot of the errorI am encountering a strange error only in the production environment. The lack of additional information leads me to believe it may be due to security measures put in place for production. Unfortunately, I have been unable to repli ...

javascripttypescriptnext.jsnext.js13react-server-components

Error message: Encountered Runtime Error.....: Failure in water absorption process and more

I am developing a website with Next.js but encounter this error repeatedly. I'm unsure of what's causing the issue in my code. The following errors are displayed: Error: Hydration failed due to initial UI mismatch on the server side. Warning: The server ...

next.jsruntime-errornext.js13

Guidelines for communicating error messages to the frontend using Next.js Server Actions in conjunction with React hook form

I have a server action function that looks like this: export const sendResetEmail = async (values: FieldValues) => { const user = await prismadb.user.findUnique({ where: { email: values?.email, }, }); if (!user) { throw new Erro ...

next.jsreact-hook-formnext.js13

Error 401: Unauthorized access detected while handling a Webhook

My goal is to handle a webhook sent by the authentication provider Clerk when a new user is created. To test this process locally, I initially used localtunnel without success and then switched to ngrok. Upon receiving the webhook at https://13f1-...-859 ...

next.jswebhooksngroknext.js13clerk

Can Next.js 13 components maximize performance by utilizing server and client components simultaneously? What is the best approach to achieve this?

Introduction Currently, I am exploring server and client components in Next.js 13 and looking to incorporate them into my project. One of the key features is a container component that utilizes react-intersection-observer to track which section is visible ...

javascriptnext.jsjsxnext.js13react-server-components

Importing cookies directly into server actions in Next JS 13 is not possible for me

Currently, I am tackling a project using Next JS 13 and came across an issue pertaining to server actions. While server actions can be directly applied on form or button components, my personal preference is to define server components in separate files an ...

javascriptreactjsnext.jsnext.js13

What could be causing the unexpected behavior of req.query in NEXT.js?

In the latest version of NextJS App Router, I have the following code located in the file appapiproducts oute.tsx import { initMongoose } from "@/lib/mongoose"; import Product from "@/models/products"; import { NextApiRequest } from ...

javascriptreactjsnext.jsrouternext.js13

NextAuth.js in conjunction with nextjs version 13 presents a unique challenge involving a custom login page redirection loop when using Middleware - specifically a

I am encountering an issue with NextAuth.js in Nextjs version 13 while utilizing a custom login page. Each time I attempt to access /auth/signin, it first redirects to /login, and then loops back to /auth/signin, resulting in a redirection loop. This probl ...

javascriptreactjsnext.jsnext-authnext.js13

What is the correct method for utilizing router.push('/') within a Next.js server component?

I am working on my Next.js 13 project and have my page.tsx located under the appDir as a server component. However, for various reasons, I need to utilize router.push. Whenever I try using it, an error message pops up saying useRouter only works in Client ...

next.jsnext.js13

Is there a way to trigger a revalidation of a specific page from a client component in NextJS?

The issue Currently, I am in the process of developing a website that utilizes a supabase backend. The main feature of this website is the creation of guides by users. Each guide has a unique dynamic path /guides/[id] as well as an exclusive edit page /gu ...

reactjsnext.jsnext.js13

What is the method for including the `meta:redirect` or `<meta http-equiv="refresh" content="0; url=http://example.com" />` in the metadata object for Next.js version 13?

In order to redirect users from one of my pages, I previously utilized the redirect metatag. However, I am unable to locate similar options within the metadata API in Next.js 13 for the appRouter. ...

javascriptnext.jsmetadatanext.js13

How can I implement a GET request in NextJS 13.4 to fetch all items or by a specific ID? Should I use Response, NextAPIResponse, or NextResponse with the latest App Router features?

What is the proper method for performing a GET request (either to retrieve all items or by a specific ID) in NextJS 13.4 using the new App Router? The old approach of handling GET requests with NextAPIRequest, NextAPIResponse, checking if (req.method === ...

reactjsnext.jsvercelnext.js13supabase

Why does running "npx create-next-app@12 my-app" result in a Next.js project with version 13 of "next" being used?

Upon using the command npx create-next-app@12 my-app to create a Next.js project, I anticipated that version 12 of "next" would be installed. However, the resulting project is actually utilizing the latest version, which is version 13. To address this dis ...

next.jsnext.js13npx

The issue of Next.JS fetch not caching data within the same request

I am faced with a straightforward setup where a Next.JS server-side component is responsible for fetching and displaying a post. The challenge lies in setting the page title to reflect the title of the post, requiring me to call my posts API endpoint twice ...

javascriptreactjsnext.jsfetch-apinext.js13

Calculator app with Next.js: Using keyboard input resets the current number state in real-time

While developing a basic calculator application with Next.js, I encountered an issue. The functionality works correctly when the user interacts with the HTML buttons, but when trying to input numbers using the keyboard, the state resets to 0 before display ...

javascriptreactjsnext.jsreact-hooksnext.js13

Are you currently utilizing an unconventional "NODE_ENV" value within your environment settings? Discover how to easily configure the default value of NODE_ENV in a Windows operating system

Recently, I modified the value of NODE_ENV to production using the command: setx NODE_ENV production However, whenever I execute npm run dev or build in my Nextjs project, I encounter an error message saying: You are using a non-standard "NODE_ENV" value ...

node.jsnext.jsenvironment-variablesnext.js13nodeenv

The app router in Next.js version 13.5+ has a server component that effectively disables caching

I am facing an issue with my profile screen rendering based on cookies. The problem occurs when the cookie is not present or invalid, as it renders a login link. Even after the user logs in and returns to the profile page, the login link continues to appea ...

reactjscachingnext.jsnext.js13app-router

Error in authorization type for email provider in Next-Auth

My experience with Next.js has mainly been on the frontend, but I'm diving into the backend and functionality for the first time. After struggling for about 4 hours, I still can't figure out how to differentiate between email providers for my two ...

reactjsauthenticationnext.jsnext.js13next-auth

The Next.js next-auth signIn feature will automatically redirect to the http://localhost:3000/api/auth/error endpoint

Recently dipping my toes into the world of next.js. I'm currently working on implementing a login feature in my React web app using next-auth locally. However, whenever I click the login button, it redirects me to "http://localhost:3000/api/auth/error." I ...

reactjsnext.jsnext.js13next-auth

Next.js Refresh Screen

Is there a way to refresh my client's web page from the server at a specific time? I need the client's page to be refreshed at 12pm, and although I'm using a scheduler, it doesn't seem to be automatically refreshing the web page on the client side. My co ...

javascriptwebnext.jsweb-applicationsnext.js13

What is the best way to share logic among multiple route handlers in the NextJS 13 app router?

I am currently working on building APIs in a Next.js 13 application using route handlers. In order to authenticate users, some of these APIs require access to cookies and the ability to handle errors for unauthorized or expired logins. I would like to cons ...

next.jsmiddlewarenext.js13app-router

Getting form data in a route handler in Next.js 13 is a straightforward process

I have been experimenting with next js 13 route handler in order to retrieve login form data. I believed that using the formData method should work, but it seems to be returning an empty object. The login page is located at app/login/page.jsx: export defau ...

reactjsformsnext.jsnext.js13

When compiling for production in NEXT JS 13.4.1, the styles from bootstrap and global.scss are taking precedence

The issue I'm facing is only present when building for production; in development, the styles appear correctly. Despite my efforts, the bootstrap styles are not being applied at all. Only the styles from main.scss seem to be working. Unfortunately, I have ...

next.jssassbootstrap-5production-environmentnext.js13

Is there a problem with the useEffect function that is causing the page to refresh every 4 seconds?

Experiencing an unusual issue with my Footer component. The useEffect function seems to be triggering a re-render of the entire page and component every 4 seconds, instead of just updating the specific element. I'm not sure where I've gone wrong. ...

reactjsnext.jsnext.js13

Having trouble adding Font Awesome to your Next.js 13 project? Seeing an error message that says "Module not

Looking to incorporate fontawesome into my nextjs 13 project, I've been experimenting with various solutions. Tried implementing solution #3 from an old post as well as following the guidelines provided in the fontawesome documentation. Starting out with n ...

reactjsnext.jsfont-awesomeserver-side-renderingnext.js13

Tips on preventing Next.js from showing a loading state across the entire page when a specific section of the page sends a request

On my nextjs page, I'm using the loading.tsx approach which displays a loading spinner until the entire page is loaded. This works great, but I have encountered an issue with a popup card that loads upon hovering over a certain element. The problem arises ...

reactjsnext.jsserver-side-renderingnext.js13

Generating an HTML version of a specific nextJS page by clicking a button that includes constantly changing data

I have a current project where I am tasked with filling a template.tsx file with the information gathered from a form, and then using that data to create an HTML file which can be downloaded to the user's device. Does anyone know how I can accomplish this ...

next.jsnext.js13export-to-html

Access Firestore documents within the NextJS 13 framework

As a newcomer to React/NextJS, I am working on fetching a list of documents from a Firestore Collection using NextJS 13 in a SSR Page so that I can display them below. Although I have successfully retrieved the documents within my function, the challenge ...

reactjsgoogle-cloud-firestorenext.jsnext.js13

Tips for seamlessly integrating the RankMath (WP SEO) tool with Next.js 13 for optimal SEO performance

I am looking to incorporate rank math SEO tool API support for enhancing my website's SEO performance. After following this informative tutorial, I was able to generate a complete HTML head section with quality metadata and other elements. However, t ...

wordpressnext.jsseonext.js13

next-themes issue: (0, react__WEBPACK_IMPORTED_MODULE_0__.createContext) function is invalid

After installing next-themes, I encountered an error that I'm struggling to pinpoint. Error-1 Error-2 Attempted solutions so far include deleting the node_modules folder and package-lock.json, then running npm install. Unfortunately, this did not resolve ...

reactjsnext.jsnext.js13

Invalid export field 'query' encountered while attempting to deploy NextJS13 and Sanity.io on Vercel

Currently, I am diving into the world of NextJS13 and following a blog tutorial by Sonny Sangha called 'Let’s build a BLOG with Next.js 13 (Sanity v3, TypeScript, Tailwind CSS, Auth, CMS, Preview Mode)'. After completing the tutorial, my goal is to deplo ...

node.jsreactjsvercelsanitynext.js13

Encountering a deployment issue while trying to launch a NextJs app on Amplify

I'm encountering issues while trying to deploy my NextJs app on AWS Amplify. Here's a snippet from my package.json: { "name": "bytecho", "version": "0.1.0", "private": true, "scripts ...

reactjsamazon-web-servicesaws-amplifynext.js13

The attempt to remove a cookie through a Next.js server-side operation was unsuccessful

Having trouble removing a cookie using the next/headers module in my Next.js application. The code snippet below is what I've tried: import {cookies} from "next/headers"; export default async function Signout() { async function deleteTokens() ...

javascriptreactjscookiesnext.jsnext.js13

Having trouble troubleshooting errors related to uploading files in NextJS? The upload feature was functioning perfectly until the update to version 14, but now it seems to be causing

Encountering errors with the uploadthing and NextJS integration. The upload feature was functional until version 14, but now facing issues. Reverted back to NextJS version 13 only to encounter console errors (Windows VSCode Terminal). PS C:\Users&bsol ...

reactjsnext.jstypescript-typingsnext.js13

In production on IIS, Next.js displays a 404 error

After setting up a new Next.js application with a custom server and deploying it on IIS without making any modifications, I encountered an issue. While the application runs smoothly using 'npm run start' locally, it throws errors on IIS with messages such ...

iisnext.jsweb-configmime-typesnext.js13

Next.js encountered an error when trying to locate the 'net' module while working with PostgreSQL

I'm facing a challenge in my Next.js project while attempting to retrieve all records from a table. The error message I'm encountering is "Module not found: Can't resolve 'net'" with an import trace pointing to multiple files within my project. Here are th ...

reactjstypescriptnext.js13bun

Developing NextJS 13 with App directory integration for socket.io

How do I initialize a socket in the app/api/socket/route.js directory? When referencing the example in the pages/api/socket.js directory, it seems that it does not return an instance of http.ServerResponse. Instead, it returns NextResponse, which does not ...

next.jssocket.ionext.js13

Can Next.JS API routes be configured to use path slugs?

Utilizing the app router in Next.js v.14, I have organized my directories as follows: /app/api/github/webhook/[token]/route.ts I am trying to figure out how to extract the value of [token] within the POST request handler. Is there a specific method in the ...

next.jsnext.js13app-router

Is there a way to retrieve data from my JSON file located in the public folder within Next.js 13.3?

My current challenge involves retrieving JSON data from the public folder. async function fetchData() { try { const response = await fetch('/data.json'); const jsonData = await response.json(); return jsonData; } catch (error) { ...

reactjsjsonnext.jsfetchnext.js13

Incorporate additional pathways to the dynamic Route feature in Next.js 14

Recently, I encountered a situation where I needed the project ID to be dynamic. For example, when accessing /management/123, it should take me to the dashboard of that specific project showing stats. However, I also need to display the feature and issues ...

reactjsnext.jsnext.js13nextjs-dynamic-routing

NextJS 13 - 404 Looks like this page has gone missing. Application router in development mode

I am currently facing a problem with my project in NextJS 13 using the App Router. Despite the layout.tsx elements functioning properly, I am getting a 404: Not Found Error on both the index page and subsequent router pages. I have included my next config, ...

next.jsnext.js13

Leverage the power of NextJS App Router to effortlessly redirect all routes to two nested dynamic routes at the

Seeking assistance with understanding the intricacies of the app router, particularly when dealing with deeply nested dynamic routes. Imagine running an ecommerce platform with multiple stores offering various shopping modes like pickup and delivery. How ...

next.jsnext.js13nextjs-dynamic-routingapp-routernextjs-rewrites

Setting up Google Analytics within the NextJS 13 application directory

Has anyone successfully integrated Google Analytics 4 (gtag) in a NextJS 13 app directory? In my previous Vanilla JS / EJS applications, I simply added the following code to each page. My understanding is that this code sends a page_view event to Google An ...

next.jsgoogle-analyticsnext.js13google-analytics-4nextjs-dynamic-routing

Customize Metadata Efficiently with NextJS 13 - Eliminate Redundant Requests

Imagine you have a server-side component located in the app directory called page.js, which represents a person: export default async function Person({ params }) { const person = await getPerson(params.id); return ( <h1> {person. ...

node.jsreactjsnext.jsnext.js13nextjs-dynamic-routing

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 lib ...

jsonnext.jsnext.js13

Disable scroll restoration on backward navigation in NextJS

Is there a way to prevent the browser from restoring scroll position when using the back or forward buttons? I've searched for information on how to achieve this, but with no luck. According to the documentation for NextJS: "By default, Next.js will ...

reactjsnext.jsroutesnext.js13

Having Trouble Showing Loading Component on Next.js v13

Having some issues with setting up a loading component in my Next.js v13 project. I followed the documentation by creating a file called loading.tsx in the src directory, but it's not appearing on the page as expected. I've also included a function to fetc ...

javascriptreactjstypescriptnext.jsnext.js13