Questions tagged [next.js]
Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.
next.js
42,576
questions
305
votes
30
answers
576k
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.8k
284
votes
64
answers
476k
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 ...
- 7,067
276
votes
18
answers
329k
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 ...
- 9,367
265
votes
18
answers
705k
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,389
232
votes
10
answers
121k
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,323
205
votes
21
answers
634k
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,416
196
votes
25
answers
211k
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,155
194
votes
16
answers
149k
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,351
160
votes
6
answers
118k
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,169
159
votes
28
answers
406k
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,539
155
votes
4
answers
105k
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 ...
- 13.4k
154
votes
6
answers
150k
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,118
152
votes
18
answers
389k
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,339
142
votes
20
answers
273k
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,254
132
votes
7
answers
92k
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,420
129
votes
18
answers
258k
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,974
120
votes
16
answers
115k
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,485
119
votes
15
answers
185k
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,349
116
votes
20
answers
149k
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,609
115
votes
18
answers
271k
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,536
115
votes
13
answers
234k
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,389
113
votes
4
answers
179k
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 ...
- 41.9k
111
votes
1
answer
83k
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,446
109
votes
11
answers
148k
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,451
108
votes
5
answers
137k
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....
- 1,085
106
votes
11
answers
188k
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,430
105
votes
20
answers
156k
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 ...
- 2,040
102
votes
16
answers
138k
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,353
99
votes
5
answers
188k
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,079
95
votes
5
answers
33k
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,328
91
votes
17
answers
265k
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,142
91
votes
5
answers
148k
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 ...
- 6,007
90
votes
5
answers
127k
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 ...
- 1,033
89
votes
10
answers
77k
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
61k
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
89
votes
14
answers
106k
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,634
88
votes
16
answers
257k
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,263
87
votes
14
answers
159k
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
7
answers
238k
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
4
answers
61k
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,159
85
votes
22
answers
226k
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,806
82
votes
7
answers
89k
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,935
82
votes
7
answers
102k
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,106
82
votes
4
answers
204k
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,057
81
votes
5
answers
229k
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,579
78
votes
1
answer
51k
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,410
77
votes
8
answers
101k
views
How to get query params using Server component (next 13)
Next13 is out, and they advise to use the new app directory where every component is by default a "Server Component"
Inside a "server Component", you can use:
async/await to fetch ...
- 4,825
75
votes
13
answers
138k
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,859
74
votes
2
answers
61k
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 ...
- 879
72
votes
42
answers
154k
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 ...
- 816