Nextjs
Published in

Nextjs

Nextjs + Beginner

5 Most Commonly error face is Next.js?

Based on my experience, I create a list of comma errors that repeatedly occur in the nextjs.

5 Most Commonly error face is Next.js By Rajdeep Singh
5 Most Commonly error in Next.js

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

  1. Missing slash (/)
  2. Class
  3. Link
  4. Image
  5. 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.

forget slash
forget slash

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.

Invalid DOM property `class` in reactjs

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 <a> tag in nextjs
Error <a> tag in nextjs

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;

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.

--

--

--

Nextjs Publication is an unofficial publication of Nextjs. Our goal is to bring beginners and pro developer in one place, and everybody understands the basic concept of next.js.

Recommended from Medium

Top Angular App Development Blunders that can Ruin Your Project!

Some Special Topics Of JavaScript

5 Mobile App Development Trends to Follow in 2022

Ten Pin Bowling Challenge I

Creating Firefox browser extensions-15

Reactivating an expired domain

Fastify and Sequelize with TypeScript.

Check if two given strings are ispmorphic

Check if two given strings are ispmorphic

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/

More from Medium

Stop sharing company personal data with Nextjs?

telemetry in nextjs

Next.JS the comfortzone for React JS developer.

SEO in Next.js Website using Next-SEO Plugin

Starting with Next.js