Previously my project setup was This was working fine but I changed the structure to following now this one is not working. I am getting error Couldn’t find apagesdirectory. Please create one under the project root Here is my updated next.config.js for absolute import(import Button from ‘component…
Tag: next.js
Next.js: Error: React.Children.only expected to receive a single React element child
I’m having a component called Nav inside components directory and it’s code is some thing like below: This gives me the error: Error: React.Children.only expected to receive a single React element child. But if I remove the <a> tags within <Link> components, I can view the pages, but t…
NextJS – Appending a query param to a dynamic route
In my NextJS app, I have a language selector that’s visible on every page. When I select a new language, I just want to replace the current URL by appending a query param lang=en to it. Here’s the function that replaces the URL: In this example, replace, query and pathname are coming from the next…
Webpack resolve alias and compile file under that alias
I have project which uses lerna ( monorepo, multiple packages ). Few of the packages are standalone apps. What I want to achieve is having aliases on few of the packages to have something like dependency injection. So for example I have alias @package1/backendProvider/useCheckout and in webpack in my standalo…
Importing SVG in NextJS
I am trying to import an svg within a NextJS project, everytime I get this error I have tried using next-images and also svgr. I will paste my About.js code below, it would be excellent if someone could let me know what I have been doing wrong. Answer Using next-images and adding the correct module exports al…
NextJS deploy to a specific URL path
I am working on my first NextJS application. When I run “npm run dev” or “npm run start” it deploys my application to When I navigate to a page the url becomes I need to have my own specific URL, such as Furthermore, my app has a lot of elements to link to other areas of the applicatio…
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 styled-components. Answer Next.js since v11 recommends using…
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 and start script command is npm run dev Answer This work for me
I can’t reference an image in Next.js
I have a React component that’s being used in Next.js page: /pages/index.js In Main.js I have the following code I get the following error Module parse failed: Unexpected character ‘�’ (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to p…
In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
I make a system jsonwebtoken in React and use Next.js. I find a problem when I run the code in the browser, that is, “localStorage is not defined”. How can I fix it? This is my code in file AuthStudentContext.js: And it shows error “localStorage is not defined”. Answer In the construct…