React Foundations for Next.js

If you are jumping directly into Next.js, it can be difficult. Next.js is built on top of React, and to build an application using it, you must know React.js key concepts and fundamentals. Even if you have a basic understanding of React, this guide helps you to summarize them. We will cover all React concepts that are needed for learning Next.js. Let’s get started.

Overview

React.js was released by Facebook (Meta) in 2013. It was created to solve the problem faced by Facebook in creating complex user interfaces. React introduced amazing concepts like virtual DOM, and component-based architecture, which made it easier to make large-scale applications.

Next.js on the other hand was first released in 2016 by Vercel. It was built upon React to provide more advanced features like server-side rendering (SSR), static site generation (SSG), and file-based routing to build full-stack applications without much configuration.

For more insights: Next.js vs React

React Fundamentals Used in Next.js

Let’s start with the very first building block of a React.js application which is components.

1. Components

Components are the building blocks of React applications and this concept is very important in Next.js. In Next.js, we create components just as in React:

function Header({ title }) {
  return <h1>{title}</h1>
}

function HomePage() {
  return (
    <div>
      <Header title="Welcome to Next.js" />
      <p>This is a Next.js page</p>
    </div>
  )
}

In Next.js we create the layout, pages and reusable blocks using these components. The layout is like a wrapper for each page within their respective folder or subfolders for consistent structure or style, click here to know more.

2. Props

Props in React allow us to pass data from parent components to child components. This concept is all over in Next.js:

function Header({ title }) {
  return <h1>{title}</h1>
}

function HomePage() {
  return <Header title="Develop. Preview. Ship." />
}

These props are used to create dynamic and reusable components.

3. State and Hooks

State and hooks are fundamental React concepts that are fully supported in Next.js, especially in Client Components.

A state is an object that stores dynamic data about a component, allowing it to respond to user interactions or other changes. Each update to state causes a component re-render, which is important for making UI interactive.

On the other hand, hooks are functions that allow us to use state and other React features in functional components. They provide a way to manage the state and side effects of functional components.

'use client'

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

4. Context API

The Context API is supported in Next.js for managing global state, like theme or user data, across components without prop drilling.

'use client'

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

5. JSX

JSX is as important in Next.js as it is in React, as it allows us to write HTML-like markup directly within JavaScript. The components we create for rendering HTML primarily return JSX:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

6. Event Handling

Event handling means handling user interactions, such as clicks, form submissions, keyboard actions, etc. Event handling in Next.js works the same as in React:

'use client'

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

7. Conditional Rendering

We can also do conditional rendering in Next.js to render components or elements based on certain conditions, as we do in a typical React application:

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
    </div>
  );
}

8. Lists and Keys

The concept of lists and keys is important in both React and Next.js. Lists used to display multiple items based on an array of data and keys help to identify which items have been changed, added, or deleted. Using unique keys makes it faster for React to update the UI and keep it accurate.

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

Summary

That’s it. These are some of the core concepts that if you know then you can understand Next.js better and faster. We should understand that Next.js is nothing but an extended version of React.js, so making React your friend will be helpful in the process of learning Next.js.

If you want to fetch data in Next.js without using this state and hooks, which are quite difficult to understand, you can make use of pre-rendering and the extended web fetch API. Click here to learn.