Questions tagged [next.js]
Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.
next.js
40,631
questions
292
votes
30
answers
537k
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.2k
266
votes
62
answers
423k
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,847
261
votes
17
answers
671k
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
252
votes
16
answers
289k
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,667
230
votes
8
answers
108k
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
195
votes
19
answers
603k
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,316
190
votes
26
answers
193k
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
158
votes
16
answers
112k
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 ...
- 1,991
157
votes
6
answers
111k
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
101k
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.8k
151
votes
6
answers
141k
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,007
149
votes
24
answers
369k
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,419
148
votes
18
answers
366k
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,259
134
votes
20
answers
246k
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,134
123
votes
16
answers
234k
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,894
119
votes
16
answers
110k
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
113
votes
18
answers
247k
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,482
113
votes
20
answers
142k
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,463
111
votes
6
answers
79k
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,210
108
votes
11
answers
150k
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,229
108
votes
12
answers
217k
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,187
107
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,386
104
votes
11
answers
182k
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
102
votes
11
answers
137k
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,381
98
votes
20
answers
148k
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,970
96
votes
5
answers
175k
views
Next.js + React 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,049
93
votes
14
answers
122k
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,263
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
146k
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,957
90
votes
4
answers
147k
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 ...
- 38.3k
89
votes
10
answers
74k
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
88
votes
16
answers
250k
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,233
88
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 ...
- 983
87
votes
8
answers
222k
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
86
votes
14
answers
154k
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,669
85
votes
6
answers
107k
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....
- 853
82
votes
22
answers
211k
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,760
82
votes
17
answers
239k
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,052
82
votes
13
answers
92k
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,494
81
votes
7
answers
83k
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,609
81
votes
4
answers
56k
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
78
votes
5
answers
212k
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,451
78
votes
3
answers
185k
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,008
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,340
73
votes
5
answers
96k
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 ...
- 863
71
votes
13
answers
125k
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,679
69
votes
13
answers
194k
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,108
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
68
votes
37
answers
136k
views
Tailwindcss not working with next.js; what is wrong with the configuration?
For some reason, tailwind is not rendering properly in next.js.
I'm wondering if something is wrong with my settings?
Styles folder - tailwind.css
@tailwind base;
/* Write your own custom base styles ...
- 756