Introduction to Next.js and React

Building Blocks of the Modern Web

At the heart of many modern websites and applications is a powerful JavaScript library called React. Its main job is to help developers build user interfaces—everything you see and interact with on a page—in a structured and efficient way.

Think of React like a set of digital LEGO bricks. Instead of building a whole webpage in one giant, messy file, you build small, reusable pieces called components and snap them together.

A component is a self-contained piece of UI. A button, a search bar, a user profile card—each of these can be a component. You build it once, and then you can reuse it anywhere you need it. This makes your code cleaner and easier to manage.

function Welcome() {
  return <h1>Hello, world!</h1>;
}

Making Components Dynamic

Components aren't just static blocks; they're dynamic. We can pass data to them and they can manage their own internal data. This is done through two key concepts: props and state.

Props (short for properties) are like instructions you give to a component. You can pass data from a parent component down to a child component. For example, you could tell your Welcome component who to greet.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// You would then use this component like so:
// <Welcome name="Sarah" />

State is data that a component manages itself. Unlike props, which are passed in from the outside, state is internal. When a component's state changes, React automatically re-renders the component to reflect the new information.

Imagine a simple counter. The current count is its state. When you click a button to increase the count, the state changes, and the display updates.

import { useState } from 'react';

function Counter() {
  // 'count' is our state variable.
  // 'setCount' is the function to update it.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Enter Next.js

React is fantastic for building the UI, but by itself, it typically runs in the user's browser (this is called client-side rendering). This can lead to slower initial page loads and can be tricky for search engines to crawl.

Next.js is a framework built on top of React. It extends React's capabilities, solving these common problems and adding powerful features right out of the box. Think of it as a supercharged toolkit for your React projects.

Next.js allows you to render your React components on the server before sending them to the browser. This means the user gets a fully formed HTML page right away, making your site feel faster and improving its visibility to search engines.

Getting started with Next.js is simple. Open your terminal and run a single command. This will create a new folder with a complete, ready-to-run Next.js application inside.

# Using npm
npx create-next-app@latest

# Using yarn
yarn create next-app

# Using pnpm
pnpm create next-app

Routing Made Simple

One of the best features of Next.js is its file-system based router. You don't need to install a separate library or write complex configuration code to define your website's pages. You just create files and folders.

Inside the app directory of your new project, every folder becomes a route, and every page.js file inside that folder becomes the UI for that route. It's incredibly intuitive.

For example:

app/page.js maps to the homepage (/)
app/about/page.js maps to /about
app/dashboard/settings/page.js maps to /dashboard/settings

This simple but powerful convention removes a lot of the boilerplate involved in setting up a multi-page application, letting you focus on building your actual components.

Quiz Questions 1/5

What is the primary purpose of the React library in web development?

Quiz Questions 2/5

In React, data passed down from a parent component to a child component is referred to as ______.

You now have a solid foundation in how React components work and how Next.js extends React to build powerful, performant web applications.

Master Fullstack AI Webapp Development