2,318 questions
172
votes
6
answers
121k
views
Why useEffect running twice and how to handle it well in React?
I have a counter and a console.log() in an useEffect to log every change in my state, but the useEffect is getting called two times on mount. I am using React 18. Here is a CodeSandbox of my project ...
- 1,820
21
votes
3
answers
31k
views
Fetch error when building Next.js static website in production
I don't understand these errors when I export as production npm run build , but when I test npm run dev it works just fine. I use getStaticProps and getStaticPath fetch from an API route.
First when I ...
- 996
35
votes
3
answers
71k
views
Why am I getting ReferenceError: self is not defined when I import a client-side library?
Trying to create an xterm react component in Next.js I got stuck as I'm not able to get over an error message I've never got before.
I'm trying to import a npm client-side module called xterm, but if ...
- 740
54
votes
3
answers
87k
views
Internal API fetch with getServerSideProps? (Next.js)
I'm new to Next.js and I'm trying to understand the suggested structure and dealing with data between pages or components.
For instance, inside my page home.js, I fetch an internal API called /api/...
- 965
77
votes
9
answers
131k
views
Warning: Text content did not match. Server: "I'm out" Client: "I'm in" div
I'm using universal-cookie in Next.js project and this the simple code that return a warning in console:
import React, { useState } from "react";
import Cookies from "universal-cookie&...
- 1,469
93
votes
10
answers
81k
views
useRouter/withRouter receive undefined on query in first render
I got a problem with my dynamic route. It look like this
[lang]/abc
I am trying to get query value from [lang] but when I using useRouter/withRouter i got query during 2-3 render of page ( on first ...
- 1,314
11
votes
1
answer
5k
views
How to add new pages without rebuilding an app with +150k static pages?
I have a MERN app in which I have integrated NextJS. First time with NextJS so bear with me. I have initially used SSR everywhere (getServerSideProps).
Key points:
I have over 150,000 pages with ...
- 113
165
votes
28
answers
330k
views
Module not found: Can't resolve 'fs' in Next.js application
Unable to identify what's happening in my next.js app. As fs is a default file system module of nodejs. It is giving the error of module not found.
- 3,646
106
votes
20
answers
151k
views
How to build dynamically class names with Tailwind CSS
I am currently building a component library for my next project with Tailwind CSS, I just ran into a small issue when working on the Button component.
I'm passing in a prop like 'primary' or '...
- 1,864
133
votes
4
answers
225k
views
You're importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with "use client"
The simple below component is throwing the following error in Next.js's app directory when I use useState:
× You're importing a component that needs useState. It only works in a Client Component but ...
- 47.5k
30
votes
2
answers
31k
views
How to use template literals in tailwindcss to change classes dynamically?
I tried to change it with this line of code it but it doesn't work
const [click, setClick] = useState(false);
const closeNav = () => {
setClick(!click);
};
const openNav = () => {
setClick(...
- 389
4
votes
1
answer
17k
views
Next.js Router - Getting 404 page not found
I am new to Next.js, and I am playing around with the router. Some of the pages work, but the dynamic pages don't. Does anyone know what I'm doing wrong?
Here is my files structure:
The Products main ...
- 813
128
votes
16
answers
269k
views
Next.js: document is not defined
I am trying to create a payment form where people can pay but I keep getting this error.
document is not defined
I'm using Next.js. Please see my code below:
import React from "react";
...
- 8,781
49
votes
10
answers
184k
views
I can't reference an image in Next.js
I have a React component that's being used in Next.js page:
/pages/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Layout from "../src/hoc/Layout/Layout";
import ...
- 1,981
20
votes
3
answers
48k
views
"Cannot use import statement outside a module" error when importing react-hook-mousetrap in Next.js
Trying out Next.js but I'm struggling with the following. Just tried to install react-hook-mousetrap and imported it like I normally would:
import useMousetrap from "react-hook-mousetrap";
...
- 7,825
65
votes
9
answers
109k
views
How to get the current pathname in the app directory of Next.js?
I'm using the experimental app folder in Next.js 13, where they have replaced next/router with next/navigation, so I imported the useRouter hook accordingly. I do not see the property pathname in the ...
- 2,075
216
votes
21
answers
679k
views
Next.js Redirect from / to another page
I'm new in Next.js and I'm wondering how to redirect from the start page ( / ) to /hello-nextjs for example. Once the user loads a page, determine if path === / and redirect to /hello-nextjs if so.
In ...
- 3,526
20
votes
1
answer
8k
views
Getting ReferenceError: localStorage is not defined even after adding "use client"
I have a simple app/components/organisms/Cookies.tsx modal window component that I import into app/page.tsx. I have added the 'use client' directive at the top of the component, but for some reason, I ...
- 313
267
votes
18
answers
754k
views
How can I get (query string) parameters from the URL in Next.js?
When I click on a link in my /index.js, it brings me to /about.js page.
However, when I'm passing a parameter name through the URL (like /about?name=leangchhean) from /index.js to /about.js, I don't ...
- 7,419
6
votes
8
answers
22k
views
TypeError: fetch failed during Next.js project build
I got this error during Vercel deployment:
TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11457:11)
at process.processTicksAndRejections (node:internal/process/...
- 563
28
votes
6
answers
63k
views
Next.js SyntaxError "Unexpected token 'export'"
I'm trying to import a functions from a dependency to my next/react functional component, but somehow I keep getting the following error:
SyntaxError: Unexpected token 'export'
That's the function I'...
9
votes
3
answers
27k
views
Create a HOC (higher order component) for authentication in Next.js
So I'm creating authentication logic in my Next.js app. I created /api/auth/login page where I handle request and if user's data is good, I'm creating a httpOnly cookie with JWT token and returning ...
43
votes
7
answers
21k
views
How can I keep Google Cloud Functions warm?
I know this may miss the point of using Cloud Functions in the first place, but in my specific case, I'm using Cloud Functions because it's the only way I can bridge Next.js with Firebase Hosting. I ...
- 574
13
votes
2
answers
10k
views
NextJS environment variables aren't working
I've been poking around with this for at least an hour and so far I'm stumped. Perhaps I'm not understanding the docs or the medium articles. But, as I understand it NextJS (I have have the latest ...
- 3,576
5
votes
2
answers
6k
views
Passing callback from server component to client component in Next.js
I am stuck at a point where I am creating a custom button component, marking it as a client component, and then I am passing its onClick callback from a server-side component, and it's giving me this ...
- 53