Prerequisites: HTML, CSS, JavaScript and React

Before moving to project setup, make sure you understand the following foundations.

8.1 HTML

HTML defines the structure and meaning of a webpage.

<main>
  <h1>My Store</h1>
  <p>Discover our products.</p>
  <a href="/products">View products</a>
</main>

Learn semantic elements such as main, header, nav, section, article, form and button.

Semantic HTML helps with accessibility, maintainability and search engine understanding.

8.2 CSS

CSS controls presentation and layout.

css

.product-card {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.75rem;
}
.product-card h2 {
  margin-top: 0;
}

You should understand:

• Selectors, inheritance and the cascade.
• Box model, margins and padding.
• Flexbox and CSS Grid.
• Responsive media queries.
• Positioning and stacking.
• Pseudo-classes and transitions.

8.3 JavaScript

JavaScript provides application logic and interactivity.

You should be comfortable with:

• const, let, variables and data types.
• Functions, arrow functions and scope.
• Objects, arrays and array methods.
• Destructuring and spread syntax.
• ES modules and imports.
• Promises, async and await.
• Error handling with try and catch.
• Fetching data with fetch.
• Basic DOM and browser concepts.

Example of asynchronous JavaScript:

js

async function getProducts() {
  try {
    const response = await fetch(
      "https://api.example.com/products"
    );
    if (!response.ok) {
      throw new Error("Request failed");
    }
    return await response.json();
  } catch (error) {
    console.error("Could not fetch products", error);
    return [];
  }
}

This is ordinary JavaScript and can be adapted for browser or server use. In production, handle failures according to the needs of your application rather than silently treating every error as an empty result.

8.4 React

Before learning Next.js, understand these React concepts:

• Components and JSX.
• Props and component composition.
• State with useState.
• Effects with useEffect.
• Event handling.
• Conditional rendering.
• Lists and keys.
• Controlled forms.
• Context and providers.
• Basic rules of hooks.

Example:

tsx

"use client";
import { useState } from "react";
export default function Greeting() {
  const [name, setName] = useState("");
  return (
    <section>
      <label htmlFor="name">Your name</label>
      <input
        id="name"
        value={name}
        onChange={(event) => setName(event.target.value)}
        placeholder="Enter your name"
      />
      <p>
        {name ? `Hello, ${name}!` : "Enter your name to begin."}
      </p>
    </section>
  );
}

This example uses React state and a controlled input. In the App Router, it needs to be a Client Component because it uses useState and an event handler.

Module 01 — Revision and knowledge check

Key concepts to remember

• Next.js is a React framework for building web applications.
• React provides the component model; Next.js adds routing, rendering conventions, server capabilities and optimizations.
• The App Router uses the app/ directory and supports Server Components, nested layouts, streaming and route-level loading UI.
• The Pages Router uses the pages/ directory and includes APIs such as getStaticProps and getServerSideProps.
• Static rendering, dynamic rendering, client-side rendering and streaming describe different aspects of page rendering.
• Client Components enable interactivity; Server Components are useful for server-side data access and reducing client JavaScript.
• Rendering HTML on the server does not eliminate the need for hydration when client-side interactivity is required.