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.
When deploying my Next.js web app in a directory other than the root, such as '/next' instead of '/', the static files in the public folder cannot be found. This is because the requested URL is not http://example.com/next/a.png, but rat ...
Error: ./node_modules/quill-emoji/dist/quill-emoji.css ModuleParseError: Module parse failed: Unexpected character '�' (1:0) You may need a suitable loader for handling this file type, as there are currently no configured loaders to process it. Refer to ...
Trying to incorporate reCAPTCHA using react-hook-form along with react-hook-recaptcha is posing some challenges as an error related to 'window' being undefined keeps popping up: ReferenceError: window is not defined > 33 | const { recaptchaLoaded, rec ...
When using next-auth credentials in my current project, I encountered an issue with the signIn() function from next-auth/react. It appears that the redirection to the admin page persists regardless of whether the login details are correct or not. {error: n ...
While attempting to customize the styling for my Next.js 13 app, I encountered an error message that states: Syntax error: C:\Users\User\Documents\webdev\TicketingApp\ticketing-app\app\globals.css The text-default- ...
Whenever I run npm run dev in my terminal to start a nextJS project, it shows the following output: > [email protected] dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 but when I try to access it in the browser, ...
Issue While working on my NextJS project, I've been experiencing occasional disruptions with my development server. Whenever I update my code, I encounter random occurrences of the dev server disconnecting and displaying the error message below: Type ...
I have successfully created the hello component and fetched API data in it. When I check http://localhost:3000/hello, everything seems to be working fine. However, when I try to import it inside the index.js component and access http://localhost:3000/, the ...
I have implemented the MongoDB util function provided in Next.js's example template and encountered an issue with its usage: import { MongoClient } from 'mongodb'; const uri = process.env.MONGODB_URI; const options = {}; let client; let clientPromise; i ...
Is it possible to use an element Image from 'next/image' with the CSS style { position: absolute; left: 50% }? It appears that it is not being applied. For example: import React from 'react' import Image from 'next/image' import styled from 'styled-compon ...
I'm having some trouble with the search and filter features I'm creating. They work fine initially, but once I enter a search query in the input field, the results show up as expected. However, if I delete the query or enter a different one, the results go ...
Parent Component Within my parent component, named Users, there is a snippet of code that includes the functions for adding and updating users: addUser(index, user) { var users = this.state.users var existingUser = users[index] if (existingUse ...
I've been working on a Next.js project and I've copied some code from CodePen that is used for designing product layouts on an e-commerce website. However, I'm encountering a problem with the following error message: TypeError: Cannot set properties of u ...
I am currently working on a project using NextJS version 13.4.7 with react, and I am facing an issue while trying to update data in a select field with information fetched from an API call. Upon initial page load, I have set a default option field and valu ...
When using SWR to fetch data, I encountered an error where the default path of nextjs was repeated: http://localhost:3000/127.0.0.1:8000/api/posts/get-five-post-popular?skip=0&limit=5 Here is my tsx code: 'use client' import useSWR from "swr" ...
Checking for TypeScript errors in Next.JS can only be done with npm run build (or yarn build). Unfortunately, running npm run dev won't display TypeScript errors, which is quite inconvenient as it would be better to have them visible in the Terminal ...
I am currently working on a project to create a dynamic Dashboard that pulls data from a FastAPI API hosted on a Raspberry Pi. My goal is to have the dashboard automatically update every few seconds or minutes to show real-time information about the status ...
My attempt to import the Zoom Web SDK module into my Next.js project encountered an error due to the undefined window object. Simply trying to import the websdk module resulted in this unexpected issue https://i.stack.imgur.com/NDRoC.png I am using Next ...
I'm struggling to find the right way to include a unicode escape in a dynamic string value to display emojis in React. My database stores the hexcode for the emoji (1f44d) I have set up a styled-component with the necessary css for rendering an emoj ...
My goal is to create a website with Next.js, but I also want to incorporate WordPress specifically for marketing pages located at example.com/sales. I've heard that load balancing could potentially help me achieve this integration, however, as a begin ...
Lately, I've been exploring the world of web development by creating a web app using NextJS. While I have some knowledge of the basics in this field, I found myself a bit lost when working with NextJS since I hadn't worked with React before. One ...
Currently, I am delving into the world of Reactjs and Nextjs, specifically working on dynamic routes. To elaborate, I have a list of blogs that I would like to showcase in detail. For this purpose, I created a folder named "blogs" and nested a file called ...
During the process of setting up testing for my current next app, we incorporated some new dependencies including jest, babel-jest, @babel/preset-env, @babel/preset-react, and react-test-renderer. We also created a babel.config.js file to configure Babel s ...
I am in the process of revamping an application with Next.js and have some concerns about potential inefficiencies due to running multiple conditionals within the new "_Middleware" as it is triggered on every single request. I have implemented the code bel ...
Seeking assistance as I may have overlooked a step. Any guidance is appreciated! Recently, I managed to deploy a full-stack serverless nextJs application on AWS Amplify successfully. I made modifications by adding a new field while creating a new blog pos ...
Currently, I am facing a challenge in displaying an image that is protected within my Node.js backend assets folder. The backend setup includes a middleware that verifies whether the user is authenticated and has the necessary permissions to view the file ...
Greetings! I am currently working on a Next.js Application where I have integrated GoogleMapReact from the google-map-react library. I am looking to re-render my GoogleMapReact component based on new props being passed in. Below is the code snippet from m ...
I am working on a feature that involves product cards with an "add to basket" button and a cart component that shows the number of products added. The added products are currently stored in local storage. My goal is to have the number in the cart compone ...
I am looking for a way to display image previews and titles when sharing a page link. In order to achieve this, I am using the Nextjs Head Component. The necessary details are fetched on page load and used as content for the meta attributes. let campaign = ...
Can I add a provider specifically for certain routes in my Next.js app, instead of applying it to the entire application? Check out my "pages" folder Here's my context file [server.jsx] import { createContext, useState } from 'react'; const ServerContex ...
Greetings! I am currently trying to retrieve data from Firebase Firestore by following a tutorial on Firebase v9. However, I encountered an error message that says "FIRESTORE (9.8.4) INTERNAL ASSERTION FAILED: Unexpected state". Below is the code snippet: ...
I am currently working with Nextjs 13 and Tailwindcss. When attempting to run Storybook for the project, I encountered this error: ModuleNotFoundError: Module not found: Error: Can't resolve '/images/example.png' in 'C: eposmvpsrcstyles' The issue ari ...
My implementation in next.js and tailwind is supposed to use display flex by default and switch to flex-col-reverse at the md breakpoint. However, it seems to be doing the opposite. How can I resolve this issue? (The line of code in question is the second ...
I am looking to create Next.js components as shared components that can be utilized across multiple projects. 1- To get started, I have developed a basic component named "TextBox" located at src/lib/component/TextBox.js: import { useState } from "react"; ...
I have successfully developed a Next.js application. My current challenge involves deploying this application on an AWS EC2 instance. I have managed to deploy it on the EC2 instance, similar to how it runs on my local development server by moving the enti ...
I recently built an application using Next.js and React. The client has asked for an Android app, so I'm contemplating creating an APK file that would open our domain. Essentially, if our domain is example.com, the APK file would function like a web brow ...
Presently, I am immersed in a project where I am utilizing shadcn/ui. Within the shadcn.ui form setup, they have integrated react-hook-form for managing the forms and zod for validation. My Inquiry Within React Hook Form, the state of an input field is co ...
I need to figure out a way to submit two forms using a single button in next.js without relying on document.getElementById. The approach I've taken involves having two form tags and then capturing their data in two separate objects. My goal is to have bot ...
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 ...
I am currently developing a NextJS project where I am in the process of generating a report for different projects. On the project details page, there is a link that redirects to a dynamic report that utilizes the specific details of the project displayed ...
After successfully setting an object to localStorage, the value of the object stays null. I suspect that my use of async/await is causing this issue. I can confirm that I am correctly setting the state, as when I log the user in and navigate to the index ...
Is there a way to restrict access to middleware in Next.js so that only mobile devices can access it? I need to handle certain DOM elements for a webview app, but for desktop web, I want them to go directly to the index page without passing through the mid ...
Currently, I am working with ReactJS and utilizing the Next.js framework. My goal is to implement the provided code snippet in index.js to display data (day, month, etc.). How should I go about achieving this? Here is the code snippet: <script> fun ...
Recently, I integrated the auth0 SDK into my Next.js projects and overall it's been a smooth process. However, I've encountered a minor issue. Every time I change routes while logged in, the /me API is invoked. This leads to the user obtained through the u ...
I am looking to eliminate either the /en or the /it from the URL without explicitly adding it. i18next seems to be doing it automatically, and I am unsure how to disable this behavior. I simply want it to happen in the background. https://i.stack.imgur.co ...
I'm struggling to resolve the issue with super-thin fonts on Safari/iOS despite trying all recommended solutions. Here is the comparison: https://i.stack.imgur.com/5DVHz.png The _document.js file: import Document, { Html, Head, Main, NextScript } from 'n ...
Currently struggling to troubleshoot an infinite loop issue in my React function component map. I've spent a considerable amount of time analyzing the code and suspect that it might be related to the useEffects, but I'm unable to resolve it. Atta ...
Just diving into the world of Next.js/React. I recently went through the Tailwind CSS for Next.js tutorial and successfully integrated Tailwind into my project by following these steps: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init - ...
The documentation suggests using a SECRET_TOKEN to secure access to your revalidate API route, as shown here: https://<your-site.com>/api/revalidate?secret=<token> However, the challenge lies in maintaining secrecy of the token when calling t ...
Can custom MDX components be defined using a data-attribute of the HTML element? Currently, I am developing a Next.js blog utilizing contentlayer for MDX and Rehype Pretty Code for syntax highlighting code blocks. The HTML output structure from Rehype Pre ...
Is there a way to set up a sub domain in Node.js while running on port 127.0.0.1:8000? Here is the .httaccess code: RewriteEngine On RewriteRule ^$ http://127.0.0.1:8080/ [P,L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d Rewrit ...
I am working on a request using useSWR in Next.js and the API route requires the ID of the current page which is located in the query parameters at router.query.id. But how can I pass this ID to useSWR in order to fetch the correct data from my API route t ...
I recently developed a Next.js application that connects to a database through an API in order to display data in the form of folder structures. If a row in the database is identified as a folder, it should be displayed as such, while if it is not, then it ...
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 ...
I am currently working on a component where I need to capture the previousState of an element. However, no matter what I try, it keeps returning the initial value. This suggests that there is some re-rendering happening, causing it to constantly default to ...
Whenever I attempt to access https://site.con/categories/, I am greeted with a 403 Forbidden error. However, if I visit https://site.con/categories/sport, everything works perfectly fine, and all other routes function properly. What could potentially be ca ...
I recently started using Next.js and have set up 3 pages: index.js categories/index.js categories/[slug].js To enhance the user experience, I decided to incorporate the library called NProgress, which displays a loading line at the top of the viewport wh ...
Currently utilizing the Next.js 13 app directory and I am looking to incorporate a progress bar for when users navigate between pages. I have been unable to find a solution online as it seems to only work with simple Next.js projects and not within the app ...
Can anyone help me with writing a script for the stories extensions as well? Below is what I currently have: "eslint": "eslint '**/{*,*.stories}.{ts,tsx}'", Here's my project structure: src components SomeComponen ...
My Next.js app is hosted on a 1gb memory server. However, whenever I run next build to redeploy my application, the memory usage spikes from around 70% to 100%, causing the system to slow down significantly. The build process usually takes 15-20 minutes un ...
I am currently using next.js version 13.5.5 and attempting to load the Google Analytics script using the next/script worker strategy. Unfortunately, it seems to have failed. Following the instructions in the official document https://nextjs.org/docs/pages ...
As I delve into the world of React, NextJs, and TypeScript, I stumbled upon a tutorial on creating a navbar inspired by the 'Strip' style menu. It has been quite a learning journey for me as a newbie in these technologies. After seeking help for a previou ...
When building a component with a Link, I am struggling to properly define the type for the href prop. import React from "react; import Link, { LinkProps } from "next/link"; type MyComponentProps = { href: Pick<LinkProps, "href&quo ...
Encountering an issue when attempting to redirect using the Router.push() method. Error: TypeError: next_router__WEBPACK_IMPORTED_MODULE_3__.Router.push is not a function In the process of transitioning from create-react-app to Next.js. const navigateUs ...
My goal is to achieve a scroll effect where my navbar changes color as the user scrolls down the page. However, I am currently facing an issue where the colors are not registering inside the ('') and the navbar remains white (#ffffff) regardless of the scr ...
I'm currently learning Next.js and attempting to iterate over a collection of items in an array to pass them into a card component. However, I am facing an issue where the Card component is not rendering on the page. When I place the Card element betw ...
I'm currently working on setting up an upload API route within my application. /admin/upload However, when I attempt to console.log(req.file), it returns as undefined. This seems to be related to the following configuration: export const config = { a ...
My goal is to integrate a 3D model as a custom layer on Mapbox using Three.js, alongside adding a 3D terrain on the map. I have followed the documented examples for incorporating a 3D model and 3D terrain from Mapbox. The issue I'm encountering is that th ...
My Next.js 14 website with multi-language support needs to generate a sitemap.xml that includes the following xhtml link tag: <xhtml:link rel="alternate" hreflang="YOUR_LOCALE" href="YOUR_LINK" /> I want it to display l ...
I have a situation where I need to store form values in the URL to prevent data loss when the page is accidentally refreshed. Here's how I am currently handling it: // Form.tsx "use client" export default function Form(){ const pathname = use ...
Alright, so here's a question that might seem simple at first glance, but I've already combed through the next.js documentation and can't seem to find a solution. In my next.js project, I'm facing an issue that seems to be either a bug ...
Currently, I am working on developing a Spotify clone using NextJS 12 along with a Tailwind CSS template. To initiate the project, I executed the following command: npx create-next-app -e with-tailwindcss spotify-2. The project was successfully created, b ...
I am encountering an issue with implementing the add to basket functionality in my e-commerce website built with Next.js using Redux. The error message "Cannot read properties of undefined (reading 'items'): export const selectItems = (state) => ...
Can anyone assist me with reading and mapping arrays inside JSON? Using Hook (useSWR / useCategories): import useSWR from "swr" const fetcher = (...args) => fetch(...args).then(res => res.json()) function useCategories () { const { data, erro ...
When trying to integrate Material UI with Next.js 13 (App router), I noticed that the compilation time during development is significantly slow. Is there a way to optimize this and decrease the compiling time? Experiencing slow compilation when using Mate ...