Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.
Questions tagged [next.js]
35004 questions
249
votes
24 answers
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
- 36,509
- 115
- 332
- 529
242
votes
16 answers
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 how to get it in the /about.js…
Sour LeangChhean
- 7,089
- 6
- 37
- 39
224
votes
55 answers
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 here (open dev tools console to see the errors):
//…
auser
- 6,307
- 13
- 41
- 63
208
votes
6 answers
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 node_modules_next_dist_client_dev_noop_js failed.
(error:…
Abdullah Raja
- 2,083
- 2
- 4
- 5
204
votes
14 answers
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 of the default port. How I change this in React Next.js.
My package.js script is
"scripts": {
"test": "echo \"Error: no test specified\" && exit…
Sohail Ahmad
- 7,309
- 5
- 27
- 46
173
votes
18 answers
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 react-router we do something like:
Arthur
- 3,056
- 7
- 31
- 61
154
votes
25 answers
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 page can be compiled without any problem, it…
mitchiri_neko
- 1,735
- 2
- 7
- 12
147
votes
6 answers
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:
In order to properly initialize the Redux Store…
Jamie S
- 2,029
- 2
- 13
- 19
144
votes
6 answers
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 exploring some articles on Google, I found that the main…
DevLoverUmar
- 11,809
- 11
- 68
- 98
139
votes
5 answers
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 server and mysite.com when running on client.…
Dave Stein
- 8,653
- 13
- 56
- 104
138
votes
16 answers
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 constlocalStorage from…
Karthi
- 3,019
- 9
- 36
- 54
120
votes
19 answers
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:
Jake
- 2,090
- 2
- 11
- 24
112
votes
13 answers
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 _document file is different because of using…
0xsh
- 1,395
- 3
- 10
- 18
108
votes
17 answers
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
- 2,704
- 3
- 15
- 27
106
votes
12 answers
How to open a link in a new Tab in NextJS?
Abdo Rabah
- 1,670
- 2
- 15
- 31