Questions tagged [next.js]
Next.js stands as a sleek and streamlined framework, dedicated to crafting server-rendered React applications alongside the ability to export React apps in static format.
Currently, I am using NextAuth for my Next.js/MongoDB application. However, I encountered an issue when attempting to query the User record in an Api file. import Users from '../../../model/user'; let userId = query.id; const userData = await Use ...
Recently, I came across a tutorial on YouTube that caught my attention. It's about creating an Open Sea 2.0 clone with Next.js, Replit, thirdweb, Infura, and Tailwind CSS. The video used Rinkeby Network, but since it's not stable anymore, I switched to Goe ...
Is there a way to load more data in next.js by clicking on the Load More button? Currently, I am using getServerSideProps to fetch data from an API for this page. Here is my page code: export default function Posts({ posts, popular }) { const classes = ...
What is the process for updating a session in the server side using authV5 in the most recent update of nextjs? I have attempted the following: import { update } from "@/auth However, I am unable to locate the update function within the auth module ...
Hey, I'm attempting to create a component similar to [this tutorial][1] in my NextJS app but I'm running into an error ReferenceError: window is not defined //Navbar.js import styles from "../styles/Navbar.module.css"; export default function Nav ...
I have defined two constants in my NextJs app, "toggleMenu" and "changeLanguage". When the language changer inside the menu is clicked, I want it to trigger both of these functions. However, I tried implementing this code but it doesn't seem to work ...
After configuring Google as an authentication provider with Next Auth and setting all the necessary environment variables for both production and development modes, everything works perfectly in development. However, when trying to sign in on the productio ...
Recently diving into the world of next.js (utilizing v13 with App Router), I find myself in search of guidance regarding a particular challenge I've been wrestling with. My objective is to dynamically render data on a page and incrementally update it ...
If I have the following files in my /pages directory and want to utilize the same template for cats/[slug] and dogs/[slug] routes (excluding fish), what steps should I take? Currently, I am duplicating the file... index.js cats.js dogs.js fish.j ...
After deploying my express and nextjs based app on EC2, I encountered an issue where the server automatically starts Nginx and node with different process IDs after I attempt to stop it by killing the process. This is happening even without using tools lik ...
Recently, I encountered an issue while trying to sign up my users using a simple form. An error popped up indicating that the data (promise argument) is undefined: Unhandled Runtime Error TypeError: Cannot read property 'message' of undefined (a ...
When starting the first boilerplate project in Nextjs14, remember to include the following command: npm i lnurl However, after installation and attempting to use the API by importing 'lnurl', an error occurs as shown below: Import trace for requested modu ...
SOLVED At the beginning of my project, I was considering using internationalization for translating the pages. In the next.config.js file, there are some configurations for internationalization like the one below that caused issues: //next.config.js const ...
Although the component successfully renders the error state, an uncaught exception is displayed in the console and a dialogue box appears in the browser. How can expected errors be handled to prevent this behavior? import { useMutation, gql } from "@a ...
I am utilizing Strapi to retrieve dynamic data for my website using an API GET request. I am facing a challenge in generating paths for my dynamic pages, particularly when it comes to handling multiple levels of dynamics. Here is how my structure looks: ...
My goal is to create tables during the database initialization stage with a structure like this: CREATE TABLE IF NOT EXISTS users ( "id" SERIAL PRIMARY KEY, "created_at" TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, "name&quo ...
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& ...
Encountering the following error message: SyntaxError: Unexpected end of JSON input https://i.stack.imgur.com/ivG2e.png Modifying the code causes the page to endlessly load without stopping Utilizing Next.js for development The API directory being used ...
My application supports multiple languages and allows users to switch between two languages using a select input. Additionally, I want to change the font-family based on the selected language. In my _app.js file: const {locale} = useRouter(); useEffect(() ...
Take a look at the following code snippet // layout.tsx export default function Layout({children}: any) { return <div> {children} </div> } // page.tsx export const dynamic = "force-dynamic"; const DynamicChild = dynamic( ...
Utilizing Next.js framework with SupaBase I am attempting to retrieve all user avatars stored in a column within the "Profiles" table. https://i.stack.imgur.com/wGgrO.png Currently, I am only receiving the image name "placeholder.png". How can I extract ...
When I execute the command "npm run build" on my shared hosting server, it throws an error message: spawn ENOMEM. Interestingly, this command runs perfectly fine on my localhost and has been running smoothly on the hosting server for a few weeks until yest ...
My goal is to run 2 instances of the NextJS app on the same machine with different configurations and ports. The first instance runs on port 3000, while the second runs on port 3001, and this setup functions correctly with the commands: next dev next de ...
My ReactApp is up and running smoothly on port 3000. However, when I decided to launch a new NextJS App for testing purposes, an error popped up: Error: listen EADDRINUSE: address already in use 0.0.0.0:3000 This situation doesn't add up. In a normal R ...
I am working on implementing a SSR page in nextjs, and I want to restrict access to only authenticated or logged-in users. How can I ensure this as the SSR is being generated on the server, without passing the token from local storage? Please share your th ...
This is the project's file structure: components ├─homepage │ ├─index.jsx ├─location │ ├─index.jsx pages │ ├─location │ │ ├─[id].jsx │ ├─presentation │ │ ├─[id].jsx │ ├─_app.jsx │ ├─index.jsx ...
Recently, I have delved into the world of Next.js and decided to explore the capabilities of getStaticPaths and getStaticProps in conjunction with firebase for my details page. import firebase from '../../firebase' export const getStaticPaths = ...
For my Next.JS app, I utilized environment variables. These variables are set as the system's environment variables since it is a dockerized nextjs app. # in terminal echo $NEXT_PUBLIC_KEY_NAME # >> value of key Surprisingly, process.env.NEXT_PUBLIC ...
I am currently working on a Next.js page located at /product While on the /product page, I want to be able to refresh the same page when I click on the product link in the top banner (navbar) that takes me back to /product. Is there a way to achieve this ...
After following a guide to serve a NextJs front-end single-page application using Golang and the native net/http package, I decided to switch to using gorilla/mux. Here is my updated main function: func main() { // Root at the `dist` folder generated ...
Currently, I am in the process of developing an online recipe platform that allows users to log in and share their recipes. The technology stack I am using includes NextJS, Prisma, and MySQL DB. User authentication is handled with NextAuth and a credential ...
I'm dealing with a string that looks like this: /dashboard/products/:id. My goal is to utilize Next Js's router to navigate to that URL and replace the placeholder :id with an actual id. Here's the code I've written: {products.map(prod ...
I encountered a problem with my NextJs API returning a 404 error during a page reload in production when executed from getInitialProps. The error message in my PM2 logs indicated that the 404 not found response was coming from Nginx. It appears that NGIN ...
While working on a project, I decided to incorporate a wysiwyg style editor. I came across a video on YouTube showcasing a Reddit clone that had the feature integrated using Editor JS. As I delved into the code, I noticed an interesting use of useEffect tr ...
I have a component in my Nextjs/React.js app where I display a list of cards like this : <div className="grid grid-cols-1 lg:grid-cols-12 gap-12"> <div className="lg:col-span-8 col-span-1"> {posts.map((post, ...
https://i.stack.imgur.com/EaYOG.png Here is the structure of my app router: The root layout must be shared with everyone. However, within the login component, there is another layout.jsx that should not share the root layout but override it and use the l ...
Below is the code for a component I am working on: <Image // stroke={perPageFrameColor?.filter((item) => item.page == pageCurrent+1)[0]?.framecolor} stroke={color?.framecolor} strokeWidth={stroke} onClick={onSele ...
I've encountered an issue while trying to integrate my stories into unit tests using Jest and React Testing Library in a NextJS application. When viewing the components in Storybook, everything works smoothly with the Storybook Addon Next Router. However, ...
I have been using localStorage and useEffect to check the authentication state, and conditionally rendering Navbar items based on the status. However, I encountered an error: Warning: Prop href did not match. Server: "/LoginForm" Client: " ...
I am currently utilizing SWRConfig to implement a global fetcher, but I also have the requirement to override this fetcher in certain components. In such a scenario, would the options specified at a higher level of SWRConfig be applied? <SWRConfig ...
Looking to remove the protection for the login page, and here is how my folder structure looks: https://i.stack.imgur.com/klPYV.png This is the middleware I am using: import { NextResponse, NextRequest } from "next/server"; export async functi ...
I have a Zustand store connected to the URL. See the code snippet provided below. import { create } from "zustand"; import { persist, StateStorage, createJSONStorage } from "zustand/middleware"; const pathStorage: StateStorage = { ge ...
Here is the code snippet for my session: const stripe = require('stripe')(process.env.NEXT_PUBLIC_STRIPE_SECRET_KEY); export default async function handler(req, res) { if (req.method === 'POST') { try { const params = { ...
I have encountered an issue while running the development server for my Next.js project using pnpm. The server starts successfully, but I am facing an error related to the contentlayer/generated module. Here is the error message I am receiving: ... - erro ...
I am trying to obtain the session token within a route handler using NextAuth after successfully logging in with GoogleProvider. How can I access the session or token within my backend? api/generate/route.ts: import { getServerSession } from "next-au ...
"react": "^16.12.0", "typescript": "^4.0.3", "next": "^9.4.4" The error being raised by typescript is related to the <Item item={item} key={item.id} urlReferer={urlReferer} /> prop used ...
Setting up a new Next.js project has been my latest task. I followed the instructions in the documentation exactly and used this command line: npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/maste ...
In my current NextJS project which is in typescript, I have the following configuration in my .eslintrc.json: { "extends": "next/core-web-vitals" } Now, I want to include additional typescript rules, such as enforcing the rule of n ...
I am attempting to retrieve the Content-Disposition header from a response received via axios from an external API. Even though I can see the header in Chrome DevTools Network Response, I am unable to access it from the server. I came across this article ...
My attempt to deploy a project on Vercel is encountering an error during the building phase. The error message states that React icons cannot be found, even though they are installed in the package.json file and imported correctly in the component using th ...
When inspecting the code below, session is found to be undefined upon logging from the client side after being transferred from getServerSideProps. import { getServerSession } from 'next-auth/next'; import { authOptions } from './api/auth/[. ...
I recently embarked on studying the Next.js framework and came across a question. Consider a scenario where I have a dynamic route for users like users/profile/[id].js. If I attempt to pre-build them with Static generation, wouldn't this potentially slow ...
After successfully adding a user to my database, I am encountering an issue where the query returns null in my client app even though it shows data in the GraphQL playground. To troubleshoot this problem, I have implemented a useEffect hook that triggers t ...
As I begin setting up my next.js app, I am considering using next-auth's JWT strategy for authentication. While I understand how this can protect routes and API endpoints within the API folder of Next.js, I also have a separate express.js server responsibl ...
Currently, I am utilizing NextJS 14 with App router alongside Spring Boot on the backend. Within my application, I have both public and private routes set up. For the private routes, users are required to log in through a designated login page. Upon succes ...
Looking to integrate the Tiny rich text editor into my code. Check out the TextEditor.js component below: import React from 'react'; import { Editor } from '@tinymce/tinymce-react'; class App extends React.Component { handleEditorCha ...
Is it possible to apply unique styles for a class in Tailwind CSS when transitioning to dark mode using Next.js 13.4 and next-theme? I am currently setting up a dark theme in Tailwind CSS with Next.js 13.4 utilizing next-theme. Within my globals.css file, ...
I encountered a scenario where I want an image to have a border when clicked, and if clicked again, the border should be removed. However, the border should also be removed if another image is clicked instead. I believe there are a couple of approaches to ...
After creating a Next.js app using npx create-next-app@latest, I proceeded to push the new application to a GitHub repository. Upon cloning the repository into a fresh directory, I encountered an issue while attempting to execute the app with npm run dev. ...
I'm encountering a strange issue that I can't quite pinpoint. It could be related to mysql, prisma, typescript, or nextjs. I created the following model to display all product categories and add them to the database. Prisma Model: model ProductCategory { ...
Issue Running the code below results in an error: index.tsx import WebSocket from 'ws'; export default function Home() { const socket = new WebSocket('ws://localhost:1919/ws'); return ( <div>Home</div> ); } ...
Currently deep diving into ReactJS testing and struggling to tackle the component showcased below https://i.stack.imgur.com/jaEis.png Running jest with coverage reveals a gap from line 8 to 10 despite using data-testid for test execution, which seems pecu ...
Recently, I began delving into NextJS. However, I'm unsure about the best practice when it comes to organizing my code. Should I follow the convention of keeping all my code (excluding the pages folder) in the /src folder like in create-react-app? Or ...
Upon refreshing the page on Next.js with Antd CSS, I am experiencing a delay in applying the styles. The content appears misaligned right after the reload. Is there a way to fix this issue? I suspect it may be related to SSR, but unfortunately, I have not ...
Recently, I embarked on a project using Tailwindcss/Next.js and encountered an issue when trying to apply a box-like shadow to a button with a new utility in pure CSS. Despite my efforts, the changes don't seem to take effect. Can you spot what I might hav ...
After following the official documentation for implementing SSO with the Next-auth Github provider in my App, I encountered an issue where the Client API documentation suggested using useSession() to retrieve session information, but it was not returning t ...
ReferenceError: window is not defined This issue arises on the server side when NextJS attempts to render the page. However, it is possible to utilize window within the useEffect hook by following the guidance provided here. I am seeking advice on creati ...
My goal is to achieve the following while addressing some current issues: The background is currently limited to affecting only the container. I want it to span the entire area. There needs to be space between the cards and padding inside them. https://i ...
I am currently in the process of developing an API that is designed to extract data from a MySQL table based on a specific category. The code snippet below represents my current implementation: import { sql_query } from "../../../lib/db" export ...
I stored the word file on azure blob storage. Now, I am attempting to retrieve the word file in a next.js application. The file is successfully downloaded, however, when trying to open it in MS Word, an error message is displayed: https://i.stack.imgur.c ...
After successfully creating and deploying a small project on Vercel, everything seemed to be running smoothly with the generated URL. However, I encountered an issue when trying to use a custom domain from GoDaddy. Despite following all the necessary ste ...
I'm currently developing a to-do list application using Supabase and NextJS-13. However, when I tried fetching the lists from Supabase, the server returned an error. Error Image The List table on Supabase consists of three columns: id created_ ...
I am trying to create a multi-language website where I need to translate a specific folder differently for each language. The folder structure in question is as follows: pages/kennis/index.tsx I am having trouble figuring out how to translate the "kennis" ...
In the documentation for next.js, it's mentioned that runtime environment variables can be utilized on dynamically rendered pages. The test scenario being discussed involves a Next.js 14 project with an app router. On the page below, the environment ...
I'm currently utilizing the combination of Next.js and Express.js in my project. In this setup, Express handles all the routing tasks instead of Next.js. For a smoother development experience, I require a process where whenever a file is modified, Ne ...