Nextjs + Beginner
5 Most Common error face is Next.js.
Based on my experience, I create a list of comma errors that repeatedly occur in the nextjs.
Next.js is an excellent library in the reactjs world. When you use nextjs every day, you face similar problems repeatedly. Even I know to error is raised. But You know I'm a sluggish person.
For In this article, I discuss the five most common errors that occur in next js again and again in daily life. I'm also going to solve the mistakes in easy ways.
Note
This article is for next.js beginner developers. Suppose you are a beginner person. That article serves you.
Error List
- Missing slash (/)
- Class
- Link
- Image
- Global CSS
Missing slash (/)
You forget slash in element. But most I forget the slash in the link and img element. This error occurs due to the unclosing tag. in reactjs, everything is based on the open and closing tag. When do not close the proper opening tag in reactjs or nextjs? Because every element in react.js is jsx, and every JSX has an opening and closing tag. Then you face this error.
Error
First example
<Head> <title> Home </title> <link rel="icon" href="favicon.ico"></Head>
Solution
First example solution
You add slash(/) end of HTML link element.
<Head> <title> Home </title> <link rel="icon" href="favicon.ico" / ></Head>
Error
Second example
<img height="800"
width="100%"
src="https://source.unsplash.com/collection/494263/800x600">
Solution
Second example solution
You add slash(/) end of HTML img element.
<img height="800"
width="100%"
src="https://source.unsplash.com/collection/494263/800x600"/>
Class
Sometimes we try to convert an HTML template into reactjs and nextjs. Then every time I forget to convert class to className.
This error is related to the dom property; In javascript, the class HTML property converts to className—the className property instance of the HTML class.
Error
<div class="card"> <h2> Hello World </h2></div>
Solution
Simple you change HTML class to javascript className property
<div className="card"> <h2> Hello World </h2></div>
Link
In HTML, we use navigation. for navigation we use <a> anchor tag. But nextjs provide a Link component. You do not warp around the link component into the anchor tag. You face similar errors or warning in run lint and build command in next.js.
Error
<div className="card"> <h2> link href error </h2> <a href="/about">About us </a></div>
Solution
Simple you warp HTML <a> to nextjs Link component.
<div className="card"> <h2> link href error </h2> <Link href="/about"> <a>About us </a> </Link></div>
Image
In nextjs, we do not use the image component for the image. For images, we use HTML img element. So that reason we face a warning in nextjs. Most of the time, issues are automatically detected by IDE (vscode) or secondly when we run the lint configuration and nextjs build command in nextjs. Then face image issue.
Image component warning is a big issue when converting the reactjs app into nextjs. On the website, the major role of the image is to represent the website. But in nextjs, nextjs does not use the img element or tag. If you use img in nextjs, you need to use the image component.
Error or warning
<div className="card"> <h2> Image error </h2> <img alt=" random here" height="800" width="100%" src="https://source.unsplash.com/collection/494263/800x600" /></div>
Solution
Simple you change HTML <img> element to nextjs Imagecomponent.
<div className="card"> <h2> Image error </h2> <Image alt=" random here" height="350" width="600" src="https://source.unsplash.com/collection/494263/800x600"
/></div>
Global CSS
In nextjs, you do not import global files on every page. If you do that, you face a failed compile error in nextjs.
Error
import Image from "next/image";
import "../global.css";export default function IndexPage() {return ( <div className="card"> <h2> Image error </h2> <Image alt=" random here" height="350" width="600" src="https://source.unsplash.com/collection/494263/800x600" /> </div>);}
Solution
Always Import global CSS file inside _app.js file.
import "../global.css";function MyApp({ Component, pageProps }) { return <Component {...pageProps} />;}export default MyApp;
Previous Articles
Conclusion
I discuss those common problems which in mind now. But there is also another problem you also face in daily life. But I provide a basic idea about that. If you encounter any other issues, let me know in the comment section. So everyone sees that.
If you have any queries or need my help, don't hesitate to contact me at officialrajdeepsingh[@]gmail.com. Are you migrating React to Next.js? You can also contact me and follow the Next.js publication.
Feel free to like and share my article with others if you like my writing. You also tag on Twitter official_R_deep.
Read More content at Nextjs. Sign up for a free newsletter and join the nextjs community on medium.
