Common Mistakes to Avoid When Using React and Next.js

Introduction

Next.js and React when I first started these, I used the classic Javascript, HTML, and CSS syntax and rules and got errors— it’s all about the habits. I think these mistakes are common (we can call it a software developer’s sixth sense). Of course, you don’t make these mistakes afterward, but I would like to share a few important beginner-level notes with you. When you start a new work, sometimes your mind becomes confused. This article is like a guide for React and Next.js.

React in a Nutshell

React is a free and open-source front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

React works with an architecture based on components that consist of pieces of code that use HTML, CSS, and Javascript.

JSX

JSX means Javascript XML and is a very useful tool for React developers. JSX is a JavaScript extension that enables component rendering using a syntax similar to HTML.
JSX allows us to write pieces of HTML code in Javascript by converting HTML tags to React elements. In short, allows us to write HTML directly within JavaScript code in React. This combination of Javascript and HTML performs faster than regular Javascript.

CSS-in-JS Technique in React

I mostly style projects I make in React using this method. I find it more practical than other CSS methods.

Similar to how React allows HTML to be written inside JavaScript wth JSX, also it does something similar for CSS with CSS-in-JS. So, the “CSS-in-JS” styling technique is that’s meaning you write your CSS in Javascript files.

This technique uses plain CSS, the CSS syntax does not need to be changed. But I used SCSS which I found more practical in my project (it has a syntax similar to normal CSS). As can be understood, this technique does not impose a restriction on CSS.

Since I have given information about the CSS-in-JS technique, I have to mention the Styled-Components library that was created for this technique and can be used in React.

Styled-Components is a popular and useful CSS-in-JS library that is used to style React and React Native projects. It allows us to style React components individually by writing CSS in JavaScript. By importing this library you use CSS-in-JS technique.

import styled from 'styled-components'

Besides Styled-Components, CSS can also be used with the Inline Styles method. Styling elements inline does not require creating a separate style sheet. It may be ideal for minor style changes, but it is not recommended for situations that require complex, in-depth CSS.

Using Inline Styles in React

In normal HTML coding, the syntax used to write inline CSS code:

<p style=”backgound-color: red;font-size: 40px;”>Freelance web developer.</p>

But when it comes to JSX, curly braces {{}} are added to the syntax. Also, it is removed hyphens from property names. For example, background-color should be written as backgroundColor, font-size should be written as fontSize, flex-wrap should be written as flexWrap, etc.

<p style={{backgroundColor: "red", fontSize: "40px"}}>Freelance web developer.</p>

Component Tags in React

In normal HTML tag names always start with a lowercase letter, while in React components tag names start with an uppercase letter.

<SectionText>
  <p>
    I work with agencies, companies, and people all over the world. 
  </p>
</SectionText>

But, React doesn’t just have a React component. There are also components of the DOM element type. Component names that start with a lowercase letter are considered DOM, which means that components will be treated like a built-in element such as <div> or <span>.

<div id="wrapper">
  <p className="description">
    <span>Please don't hesitate to send me an email.</span>
   </p>
</div>

Empty Elements in React

In normal HTML, empty elements (<br>, <hr>, <input...>, etc.) do not contain any closing tags. But in React, these elements must also be closed. They should be written as <br/>, <hr/>, <input.../>.

Classes in JSX/React

The class attribute is used a lot in HTML. It is also used in JSX. But in JSX, “className” should be written instead of “class”, you will get an error when you type “class”. I think this is the most common mistake made when using React.

Error

<SubText>
  <p class="tech-text">
    The development process is founded on research and strategic thinking.
  </p>
</SubText>

Solution

<SubText>
  <p className="tech-text">
    The development process is founded on research and strategic thinking.
  </p>
</SubText>

Cr: Freddy Montes

Next.js in a Nutshell

I usually use next.js in my projects, so some notes are about the situations that will be encountered while using Next.js.

Next.js is a React framework that provides developer building blocks for creating web applications.

Next.js makes website creation faster and more practical. The performance of the created website is also better. The framework is used by the biggest and top companies like Netflix, Uber, Starbucks, and Twitch.

Link in Next.js

With the use of Next.js, there are some changes in syntax and APIs. I experienced this in the Link component the first time I used it.

In normal HTML, navigation is with the <a> tag. By habit, you can also use it in Next.js. And when you write the code in the example below in Next.js, you will get an error.

<div className="contact"> 
  <a href = "mailto: someone@example.com" target="_blank">Send Email</a>
</div>

Solution

import Link from 'next/link'
....
....
<div className="contact"> 
  <Link href= "mailto: someone@example.com" target="_blank">
    <a>
      Send Email
    </a>
  </Link>
</div>

Images in Next.Js

Next.js has its own component for images. The <img> tag is not used as in HTML and React.

React:

import my_logo from '/public/images/logo.png';
<div>
  <img src={my_logo}/>
</div>

OR

<div>
  <img src="/public/images/logo.png"/>
</div>

But, if you are using Next.js, you should write code like below;

import Image from 'next/image'
import my_logo from '/public/images/logo.png';
<Image src={my_logo}/>

OR

import Image from 'next/image'
<Image src="/public/images/logo.png" width="40" height="40" />

End Notes

It was an article that included both short definitions and error/mistake notes. It’s most important that it’s useful, and examples are always helpful.

I wanted to touch on some points based on my experience. I try to use frameworks and tools that are practical and advantageous in terms of performance. So, you can also make some inferences about the tools you will use from this article. Remember that web development offers so many options.

Thank you for reading✨

🌍 Website: https://www.gulsahdeger.com/
📮 Feel free to email me to offer of cooperate or share your ideas, plans, problems: ggulsahdeger@gmail.com
👀 Follow me: Instagram | Twitter