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 ‘components/Button’) jsconfig.json package.json .babelrc Answer As per the official NextJs documentation pages folder can
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 then in the console I’m getting a warning of: Warning: You’re using
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 router. Now, everything works for
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 standalone app I resolve it as ../../API/REST/useCheckout . So when I
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 allowed me to use
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 applications, i need
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 their <Script> tag, and the right place to add it is the
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 process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for this binary file)
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 constructor, as well as componentWillMount lifecycle hooks, the server