As everyone already mentioned, Next.js runs both on the client and server. On the server, there isn’t any localStorage, hence the undefined error. However, an alternative solution is to check if Next.js is running on the server before accessing the localStorage. I.e., const ISSERVER = typeof window === “undefined”; if(!ISSERVER) { // Access localStorage …localStorage.get… … Read more
Do it like this: <div className={`absolute inset-0 ${click ? ‘translate-x-0’ : ‘-translate-x-full’} transform z-400 h-screen w-1/4 bg-blue-300`}></div> // Alternatively (without template literals): <div className={‘absolute inset-0 ‘ + (click ? ‘translate-x-0’ : ‘-translate-x-full’) + ‘ transform z-400 h-screen w-1/4 bg-blue-300’}></div> Just keep in mind not to use string concatenation to create class names, like this: <div … Read more
You should separate and extract your authentication logic from getServerSideProps into a re-usable higher-order function. For instance, you could have the following function that would accept another function (your getServerSideProps), and would redirect to your login page if the userToken isn’t set. export function requireAuthentication(gssp) { return async (context) => { const { req, res … Read more
You need to provide a webpack loader that will handle SVG imports, one of the famous one is svgr. In order to configure it to work with next, you need to add to your next.config.js file the usage of the loader, like that: // next.config.js module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, issuer: { … Read more
Update: Next.js >= 12 Now you can do redirects using middleware, create a _middleware.js file inside the pages folder (or any sub folder inside pages) import { NextResponse, NextRequest } from ‘next/server’ export async function middleware(req, ev) { const { pathname } = req.nextUrl if (pathname == “https://stackoverflow.com/”) { return NextResponse.redirect(‘/hello-nextjs’) } return NextResponse.next() } … Read more
From Next.js documentation: Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won’t be available. You’ll have to persist the uploaded files somewhere else if you want to have access to them in the app at run time. Alternatively, you could setup your own … Read more
You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure. Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory it’s automatically available as a route. By default, Next.js … Read more
You cannot use getServerSideProps in non-page components. You can either pass the prop from Home to HomeSection or create a context so the value can be available globally from the component tree getServerSideProps can only be exported from a page. You can’t export it from non-page files. https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page-2
The error occurs because react-hook-mousetrap is exported as an ESM library. You can have Next.js transpile it using next-transpile-modules in your next.config.js. const withTM = require(‘next-transpile-modules’)([‘react-hook-mousetrap’]); module.exports = withTM({ /* Your Next.js config */});