Questions tagged [next.js]
Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.
41,127
questions
294
votes
30
answers
545k
views
Window is not defined in Next.js React app
In my Next.js app I can't seem to access window:
Unhandled Rejection (ReferenceError): window is not defined
componentWillMount() {
console.log('window.innerHeight', window.innerHeight);
}
- 38.4k
271
votes
62
answers
435k
views
React 18: Hydration failed because the initial UI does not match what was rendered on the server
I'm trying to get SSR working in my app, but I get the error:
Hydration failed because the initial UI does not match what was
rendered on the server.
Live demo code is here.
Live demo of problem is ...
- 6,897
261
votes
18
answers
679k
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 parameter name through URL (like /about?name=leangchhean) from /index.js to /about.js, I don't know ...
- 7,339
256
votes
16
answers
297k
views
How to Set port in next.js
One application is running on port 3000 and I want to run another application on a different port from the default port, which is 3000. How do I change this in React Next.js? My package.json currently ...
- 8,827
230
votes
8
answers
110k
views
ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed
I've been following the basics tutorial on the Next.js website and when I got to the Global Styles step, I started getting the following runtime error:
ChunkLoadError: Loading chunk ...
- 2,303
198
votes
19
answers
610k
views
Next.js Redirect from / to another page
I'm new in Next.js and I'm wondering how to redirect from start page ( / ) to /hello-nextjs for example. Once user loads a page and after that determine if path === / redirect to /hello-nextjs
In ...
- 3,346
190
votes
26
answers
197k
views
Parsing error : Cannot find module 'next/babel'
Update 1:
Updated the latest working solution to @Jeevan Rupacha answer, please scroll below to check it out.
I have been encountering this error on every single new Next.js project that I create. The ...
- 2,095
168
votes
16
answers
120k
views
What causes NextJS Warning: "Extra attributes from the server: data-new-gr-c-s-check-loaded... "
I am getting the following warning from my NextJS Application:
Warning: Extra attributes from the server: data-new-gr-c-s-check-loaded,data-gr-ext-installed,cz-shortcut-listen,data-lt-installed
I ...
- 2,091
157
votes
6
answers
113k
views
Is using Redux with Next.js an anti-pattern?
I'm building a Next.js app and it currently is using Redux. As I am building it I am wondering if the use of Redux is really necessary and if its use is actually an anti-pattern. Here is my reasoning:
...
- 2,139
154
votes
4
answers
102k
views
What is the difference between Next.js and Create React App?
I'm trying to figure out the difference between Next.js and Create React App (CRA). I know both are there to make our life easier while developing our front-end applications using React.
After ...
- 12.9k
152
votes
6
answers
143k
views
How do I detect whether I am on server on client in next.js?
I am using a customer express server with Next.js. It's running within a container. I am doing an http request with isomorphic-fetch to get data for my render. I'd like to do localhost when running on ...
- 9,037
151
votes
24
answers
377k
views
How to set the next/image component to 100% height
I have a Next.js app, and I need an image that fills the full height of its container while automatically deciding its width based on its aspect ratio.
I have tried the following:
<Image
src=&...
- 2,449
150
votes
18
answers
371k
views
Get URL pathname in nextjs
I have a signin page and layout component.Layout component has header.I don't want to show header in signin .and for that I want to get url pathname.based on pathname show the header .
import * as ...
- 3,289
134
votes
20
answers
252k
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,144
126
votes
17
answers
239k
views
How to open a link in a new Tab in NextJS?
How can i open a link in a new Tab in NextJS ? i tried this :
<Link href="https://twitter.com/" passHref>
<a target="_blank">
<div className={...
- 1,934
119
votes
16
answers
111k
views
How to use google analytics with next.js app?
I'm using styled-components with next.js so my styles need to be server-side rendered, hence how can I add google analytics to my website?
I checked next.js google analytics example but as I said my ...
- 1,465
115
votes
20
answers
144k
views
Target Active Link when the route is active in Next.js
How to target the active Link in Next.js like they way we do it in React-Router-4?
Meaning, give the active link a class when its route is active?
- 2,501
114
votes
6
answers
81k
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,240
113
votes
18
answers
251k
views
How to add a favicon to a Next.js static site?
I'm trying to add a favicon to a Next.js static site without much luck.
I've tried customising the document with components from 'next/document'
https://nextjs.org/docs/#custom-document
A straight ...
- 3,492
111
votes
11
answers
157k
views
NextRouter was not mounted Next.JS
Using import { useRouter } from "next/router"; as import { useRouter } from "next/navigation"; throws "Argument of type '{ pathname: string; query: { search: string; }; }' is ...
- 1,269
110
votes
12
answers
221k
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,227
108
votes
1
answer
81k
views
Next.js use of _app.js and _document.js
I currently use _document.js to inject css into my Next.js app and I would like to start using _app.js to help inject data into pages.
Was wondering if it possible to use _document and _app in ...
- 2,406
104
votes
11
answers
139k
views
Next js - disable server side rendering on some pages
Is it possible to disable ssr on some pages using Next js? For example, I have a page with a product description on which I use ssr for SEO but I also have a page with a list of items or products ...
- 1,401
104
votes
11
answers
183k
views
Is this Next.JS folder structure recommended?
We have resorted to this following project structure
|- pages
|- <page_name>
|- index.js # To do a default export of the main component
|- MainComponent.jsx # ...
- 3,400
99
votes
20
answers
149k
views
Warning: Prop `className` did not match. when using styled components with semantic-ui-react
I use this code to margin my Button from top:
const makeTopMargin = (elem) => {
return styled(elem)`
&& {
margin-top: 1em !important;
}
`;
}
const ...
- 1,980
97
votes
5
answers
178k
views
Go back to the previous page
I am use routing in next.js. How to implement a back button that navigates back to the previous page? Just like with the button on the browser.
- 1,059
96
votes
15
answers
125k
views
next.js environment variables are undefined (Next.js 10.0.5)
I am coding a website with Next.js and I tried to add google Tag Manager.
I followed the tutorial on the Next.js Github example but for some reasons I can't access to my environment variables.
It ...
- 1,293
93
votes
4
answers
155k
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 ...
- 39.2k
92
votes
5
answers
31k
views
react-select: How do I resolve “Warning: Prop `id` did not match”
I have a web app with ReactJs and NextJs. In a functional component, I have used react-select then, I'm receiving the following console warning:
Warning: Prop id did not match. Server: "react-...
- 1,298
91
votes
5
answers
147k
views
What's the right way to float right or left using the material-ui appbar with material-ui-next?
I can't figure out if I'm using the right approach to get the login/logout buttons to float right in while using material-ui-next ("material-ui": "^1.0.0-beta.22",)
It seems they removed ...
- 5,977
90
votes
5
answers
114k
views
NextJS 13 <button onClick={}> Event handlers cannot be passed to Client Component props
Error: Event handlers cannot be passed to Client Component props.
^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
const reqHelp = () => {
Swal....
- 905
89
votes
10
answers
75k
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,274
89
votes
16
answers
60k
views
React + Material-UI - Warning: Prop className did not match
I'm having difficulty with differences between client-side and server-side rendering of styles in Material-UI components due to classNames being assigned differently.
The classNames are assigned ...
- 993
88
votes
16
answers
252k
views
Next.js - Error: only absolute urls are supported
I'm using express as my custom server for next.js. Everything is fine, when I click the products to the list of products
Step 1: I click the product Link
Step 2: It will show the products in the ...
- 4,243
87
votes
14
answers
155k
views
Can't import SVG into Next.js
When I try to import SVG Image then the following error shows. Which loader I have to use for importing SVG images?
./static/Rolling-1s-200px.svg 1:0
Module parse failed: Unexpected token (1:0)
You ...
- 1,679
87
votes
8
answers
226k
views
Next.js: Router.push with state
I'm using next.js for rebuilding an app for server side rendering.
I have a button that handles a search request.
In the old app, the handler was this one:
search = (event) => {
event....
- 1,969
85
votes
17
answers
245k
views
How to get page URL or hostname in NextJs Project?
I want to get the page's full URL or site hostname like the image below on Static Site Generator.
I will try with window.location.hostname, but it doesn't work.
The error: window not defined.
- 1,082
83
votes
22
answers
214k
views
Next.js background-image css property cant load the image
I'm trying to access a static image to use within an inline backgroundImage property within React.
i am working with reactjs and next.js then i faced an issue with adding images with next.js but fixed ...
- 1,776
83
votes
13
answers
94k
views
Dynamically build classnames in TailwindCss
I am currently building a component library for my next project with TailwindCss, I just ran into a small issue when working on the Button component.
I'm passing in a prop like 'primary' or 'secondary'...
- 1,504
82
votes
7
answers
85k
views
Error: Image Optimization using Next.js default loader is not compatible with `next export`
I got this error when deploying Next.js to Netlify.
Error: Image Optimization using Next.js default loader is not compatible with `next export`.
Possible solutions:
6:47:15 AM: - Use `next start`, ...
- 7,717
81
votes
4
answers
57k
views
Next.JS "Link" vs "router.push()" vs "a" tag
Newbie here, sorry if this is extremely basic question but I'm not able to wrap my head around which technique should be followed to navigate across various pages.
As of now I know three different ...
- 1,109
81
votes
7
answers
101k
views
How to make Next.js getStaticProps work with typescript
I am using Next.js with typescript feature enabled
Trying to use getStaticProps as described here https://nextjs.org/docs/basic-features/typescript
With GetStaticProps type
export const getStaticProps:...
- 1,096
80
votes
3
answers
189k
views
how to handle a post request in next.js?
I want to setup a POST route in my api folder using next.js, And I'm sending the data to the route but I can't parse the data to actually save it in the database. what is the best way to handle POST ...
- 2,028
79
votes
5
answers
216k
views
Getting error 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' [duplicate]
I got this error when learning Next.js, using npx create-next-app command according to site documentation here https://nextjs.org/docs/api-reference/create-next-app. Everything works until I start the ...
- 2,489
78
votes
5
answers
102k
views
NextJS 13 folder structure best practice
I'm learning to use NextJS and I'm using the latest version with App Router, I'm currently stuck on how to do routing, such as where to put the register and login pages, and its' folder structure in ...
- 913
77
votes
1
answer
50k
views
Next.js: Reduce data fetching and share data between pages
I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so we can look at the pros and cons.
The ...
- 2,350
73
votes
13
answers
128k
views
How to use different .env files with nextjs?
I would like to have different configuration files for the environment variables and be able to use them in my next project. I saw the example with dotenv.
But I don't like to define the variables in ...
- 2,709
69
votes
2
answers
55k
views
Easiest way to detect Production or Dev environment in NextJs?
I want to basically detect whether the running environment is dev or production in Nextjs. Is there any straight forward way of doing this?
if(env == "dev"){
// do something
}
else if (env ...
- 829
69
votes
14
answers
196k
views
Next.js Global CSS cannot be imported from files other than your Custom <App>
My React App was working fine, using global CSS also.
I ran npm i next-images, added an image, edited the next.config.js file, ran npm run dev, and now I'm getting this message:
Global CSS cannot be ...
- 2,128
69
votes
4
answers
15k
views
When to use a react framework such as Next or Gatsby vs Create React App [closed]
I'm in the sort of rapid prototyping phase of my React/javascript learning experience. I was wondering when folks would reach for a framework such as Next.js or Gatsby.js vs the standard Create React ...
- 729