Skip to main content

Questions tagged [next.js]

Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.

Filter by
Sorted by
Tagged with
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); }
Leon Gaban's user avatar
  • 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 ...
auser's user avatar
  • 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 ...
Sohail Ahmad's user avatar
  • 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 ...
Sour LeangChhean's user avatar
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 ...
Abdullah Raja's user avatar
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 ...
Arthur's user avatar
  • 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 ...
mitchiri_neko's user avatar
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 ...
Md Sajedul Islam's user avatar
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: ...
Jamie S's user avatar
  • 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=&...
Jake's user avatar
  • 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 ...
DevLoverUmar's user avatar
  • 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 ...
Dave Stein's user avatar
  • 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 ...
Karthi's user avatar
  • 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.
Ibad Shaikh's user avatar
  • 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 ...
hossein fti's user avatar
  • 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={...
Abdo Rabah's user avatar
  • 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 ...
0xsh's user avatar
  • 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 ...
thewb's user avatar
  • 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?
Ruby's user avatar
  • 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 ...
Advait Junnarkar's user avatar
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"; ...
Chris Hansen's user avatar
  • 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 ...
Youssouf Oumar's user avatar
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 ...
ramesh's user avatar
  • 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 ...
gigs's user avatar
  • 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....
밍원MinGWon's user avatar
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 # ...
cross19xx's user avatar
  • 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 ...
Talha Talip Açıkgöz's user avatar
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 ...
Florie Anstett's user avatar
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.
Дмитрий's user avatar
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-...
Sonjoy Datta's user avatar
  • 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.
Raju Ahammad's user avatar
  • 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 ...
Kyle Pennell's user avatar
  • 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 ...
Dead's user avatar
  • 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 ...
Przemek eS's user avatar
  • 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 ...
David's user avatar
  • 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'...
Wesley Janse's user avatar
  • 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 ...
sinusGob's user avatar
  • 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 ...
Shifut Hossain's user avatar
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....
DaFunkyAlex's user avatar
  • 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 ...
PHRYTE's user avatar
  • 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 ...
Hassan Kandil's user avatar
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`, ...
Chukwuemeka Maduekwe's user avatar
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:...
asmodianis's user avatar
  • 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 ...
Dastan's user avatar
  • 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 ...
Yuza's user avatar
  • 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 ...
eivindml's user avatar
  • 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 ...
Tonio's user avatar
  • 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 ...
Cristian Flórez's user avatar
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 ...
agastya teja's user avatar
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 ...
LeCoda's user avatar
  • 816

1
2 3 4 5
852