Creative Arts / intermediate

React and Next.js: Build Modern Web Apps

Name: React and Next.js: Build Modern Web Apps
Price: 39.00 USD
Availability: InStock

Build Shelf, a reading list app, one piece at a time: components, state, pages, server code, tests and a public web address.

24 lessons6 modulesabout 8 hours10 workbook itemsintermediate

READ LESSON 1 FREE

One payment of $39. Instant online access to the full written course. No subscription. Refund policy.

What you will be able to do

You start with basic JavaScript. You finish with a multi-page Next.js app that you built, tested and put on a public web address: a catalog with search and filters, a saved list that remembers, a page for every book, a small JSON API, a form that checks its input on the server, page titles, an optimized image and automatic tests. You will understand each part well enough to start a second app on your own.

Who it is for. People who know basic JavaScript (variables, functions, arrays, objects and loops) and want to build modern web apps with React and Next.js. You have used a terminal a little and can install a program. You do not need to know React, Next.js, TypeScript or databases.

You finish with. Shelf: a deployed multi-page app. Assemble the finished Shelf app from the parts you built in each module, check it with lint, tests and a production build, and publish it at a public web address. Shelf is a reading list with a catalog you can search and filter, a saved list that survives a reload, a page for each book, a small JSON API and a suggestion form that checks its input on the server. The capstone is assembly and checking, not new material.

Certificate. Finish every lesson, resolve every quiz question with at least 50% right on the first try, and tick the capstone checklist — Apex Flow Academy issues a verifiable Certificate of Completion with a unique ID and a public verification page. It is a certificate of completion, not a degree, licence, accreditation or exam result.

The path, module by module24 lessons

01 · Your First Components4 lessons

Set up a Next.js project, then learn JSX, components, props, lists and conditions. You finish with the home page of Shelf, a reading list app, showing a catalog of books.

1.1Create your project and see it runFREE
1.2JSX: markup inside JavaScript
1.3Components and props
1.4Lists, keys and conditions

02 · Making Pages React4 lessons

Respond to clicks and typing. You learn events, state, controlled inputs, derived values and safe updates to arrays. You finish with a catalog that searches, filters and lets you save books.

2.1Events, and why a plain variable does not update the screen
2.2State: a component's memory
2.3Forms: controlled inputs and derived values
2.4Updating arrays and objects without changing them

03 · Sharing and Keeping State4 lessons

Share one list between many components and keep it after a page reload. You learn lifting state up, reducers, context and effects. You finish with a saved list that survives closing the browser.

3.1Lifting state up
3.2Reducers: one place for every change
3.3Context: share state without passing props down every level
3.4Effects: keep the list after a reload

04 · Pages, Routes and Server Components4 lessons

Turn Shelf into a multi-page app. You learn file-based routes, links, layouts, dynamic pages, the difference between server and client components, and how to load data with loading and error screens.

4.1Routes, links and layouts
4.2Dynamic routes: one page for every book
4.3Server components and client components
4.4Loading data on the server, with loading and error screens

05 · Server Features: APIs, Forms and Rendering4 lessons

Add code that runs on the server. You build a small JSON API, handle a form with a Server Action, give the visitor clear feedback, and learn how to read the build report for static and dynamic pages.

5.1Route handlers: your own small API
5.2Server Actions: handle a form on the server
5.3Form feedback: errors, pending state and kept input
5.4Static and dynamic rendering: read the build report

06 · Polish, Test and Ship4 lessons

Make Shelf ready for the world. You add page titles and descriptions, an optimized image and a web font, write automatic tests, run the final checks and put the app on a public web address. This module ends with the capstone.

6.1Page titles and descriptions with the Metadata API
6.2Images and fonts that load fast
6.3Tests that catch mistakes for you
6.4Ship it: final checks, Git and a public address

Free preview · lesson 1.1No sign-up

Free lesson · 1.1

Create your project and see it run

About 5 minStep 1 of 7 · You will be able toNo sign-up

Step 1 of 71 min read

You will be able to

Create a Next.js project and start it on your own computer.
Change a page and watch the browser update.

Step 2 of 71 min read

Why this matters

Every lesson in this course adds to one app called Shelf, a small reading list. By the end it has a catalog you can search and a list that remembers your books. It also has a page for each book, a form, tests and a live web address. To use the course, read a lesson, do the task at the end, check the "You are done when" line, and take the quiz. If your project is set up wrong, later steps fail in confusing ways. So set it up once, slowly.

Step 3 of 71 min read

Learn it

Three names come up first. React is a library for building screens out of small pieces called components. Next.js is a framework built on React. It adds pages, server code and tools for building and publishing. Node.js runs JavaScript outside the browser, so your computer can run those tools.

Follow these steps.

Open a terminal, which is a window where you type commands. Type node --version. Next.js 16 needs Node 20.9 or newer. Version 20 has reached the end of its support, so install a current long-term-support (LTS) version from nodejs.org. Check that page for the current one. Version 22 or 24 works.
Go to the folder where you keep projects. Run this one command. It creates a folder named shelf:

Code

npx create-next-app@16.3.6 shelf --js --app --eslint --no-tailwind --no-src-dir --import-alias "@/*" --use-npm --no-agents-md --yes

The flags pick plain JavaScript, the App Router (the modern page system), a code checker called ESLint, no Tailwind styling and the @/ import shortcut. The @16.3.6 part fixes the version so your screens match this course.

Type cd shelf, then npm run dev. The terminal prints a line like Local: http://localhost:3000.
Open that address in your browser. You see the starter page.

Now look around. app/page.js is your home page. app/layout.js is the frame around every page. public/ holds files such as images. package.json lists your tools and their versions. node_modules/ holds installed code. Never edit it.

Step 4 of 71 min read

See it in action

Open app/page.js. Replace everything in it with this:

JSX

export default function Home() {
  return (
    <main>
      <h1>Shelf</h1>
      <p>My reading list.</p>
    </main>
  );
}

Save the file. The browser changes by itself, with no refresh. Change the words "My reading list." and save again. The page follows. Now delete the file app/page.module.css. The old starter page used it, and your new page does not.

Open package.json. Under dependencies, next should read 16.3.6. If a newer create-next-app shows different questions or files, look for the same choices: JavaScript, App Router, ESLint, no Tailwind.

Step 5 of 71 min read

Common mistakes

Deleting page.module.css before replacing page.js. The build then stops with "Module not found: Can't resolve './page.module.css'". Replace the page first, then delete the file.
Running npm run dev in the wrong folder, which gives a "Missing script" error. Type cd shelf first.
Port 3000 is busy. Next.js picks another port and prints it. Use the address it prints.
Editing files in node_modules. Your changes vanish and can break the project. Edit only your own files.

Step 6 of 71 min read

You are done when

Your browser shows the heading "Shelf" at the address the terminal printed. You changed a sentence, saved, and saw the page update. package.json lists next at 16.3.6.

Step 7 of 7

You finished the free lesson

That is one lesson from the course. The full course gives you every remaining lesson, a quick check and a hands-on task in each one, and the workbook of templates and checklists.

Full course$39

What you need

A computer running Windows, macOS or Linux, and permission to install programs
Node.js, a current long-term-support version. Next.js 16 needs Node 20.9 or newer, and the test tool in Module 6 needs Node 22.12 or newer. At the time of writing, versions 22 and 24 are LTS. Check nodejs.org for the current one. It is free
A code editor. Visual Studio Code is a free choice, so check its current download page. Any plain text editor also works
A current desktop browser with developer tools (Chrome, Edge or Firefox), and an internet connection for installing packages. Building the app downloads a Google font, so the build needs a connection too
The project is created with the exact command in Lesson 1.1, which fixes Next.js at 16.3.6. The course was checked with that version and with the React version it installs (19.2.8). Newer versions may show different files or messages
For Lesson 6.4 only: a free GitHub account and a host account. Vercel's free Hobby plan is meant for personal, non-commercial projects, so check its current terms. Any host that runs Node.js also works. Nothing in the core lessons costs money
Optional: one photo that you own or may use, about 1600 pixels wide, for the banner in Lesson 6.2

Before you start

Basic JavaScript: you can write a function, use variables with const and let, work with arrays and objects, and have seen map and filter. Modules 1 and 2 explain destructuring and spread the first time they appear
Basic HTML: you know what a tag, an attribute and a form field are
You can open a terminal, move between folders with cd and run a command
You can create and edit text files in a code editor

The capstone

Shelf: a deployed multi-page app

Assemble the finished Shelf app from the parts you built in each module, check it with lint, tests and a production build, and publish it at a public web address. Shelf is a reading list with a catalog you can search and filter, a saved list that survives a reload, a page for each book, a small JSON API and a suggestion form that checks its input on the server. The capstone is assembly and checking, not new material.

A public web address for the deployed app that works on a phone and a computer
A Git repository with the source code, with no node_modules folder and no .env files
Pages: Home (banner image, Surprise me button, search, genre filter, blurb toggle and Save on each card), My list, one page per book, About, Suggest a book, plus not-found, loading and error screens
A saved list built with a reducer, a context provider in the layout and localStorage, with the load-and-save guard, and with saved data checked before use
Server features: /api/random with an optional genre, and a suggestion form with a Server Action, server-side checks, clear errors, kept input, a Sending state and a cookie of at most five suggestions
A title and description on every page, an optimized banner image with alt text, and a web font loaded with next/font
Passing tests for the reducer, the validation and at least one component, plus a clean lint run and a successful production build
A short README with how to run, test, build and deploy the app, and three things you would improve next

Key terms taught30

Component: A JavaScript function that returns a piece of screen. You can use it many times.
JSX: Markup that looks like HTML but is written inside JavaScript. A build tool turns it into plain JavaScript.
Props: Values you pass into a component, like attributes on an HTML tag. The component reads them and never changes them.
Render: React calling your component function to work out what the screen should show.
State: A value a component remembers between renders. When it changes, React renders the component again.
Hook: A special React function whose name starts with use, such as useState. Call hooks at the top level of a component.
Event handler: A function that runs when the user does something, such as a click. You pass it to a prop like onClick.
Derived value: A value you can work out from other values, such as a filtered list. Work it out during render instead of storing it.
Mutate: Change something in place, such as pushing an item onto an array. State must not be mutated. Make a copy instead.
Reducer: A function that takes the current state and an action and returns the next state. It only computes and changes nothing else.
Context: A way to share a value with every component below a point in the tree, without passing props through each level.
Effect: Code that runs after the screen is drawn, to keep React in step with something outside it, such as browser storage.

Browse the full Academy encyclopedia

How this course was checked

24 checks were run and recorded while writing this course (code, formulas, commands and facts), and it lists 30 official sources it was checked against. Prices, features and policies of outside tools can change, so check each tool's own website.

Created by Apex Flow Academy with AI assistance. For education only; not legal, tax, financial or medical advice. Results depend on your effort and circumstances.

HTML and CSS: Build and Launch Your First Website

You hand-build a clean, mobile-friendly site and put it online.

$39Open course ↗

beginner24 lessons

JavaScript From Zero: Make Web Pages Come Alive

You start with an HTML page that cannot react. You finish with a working task list app that you built, tested and reviewed yourself: it adds, marks, deletes and filters tasks, saves them in the browser, loads sample data from the internet and proves itself with automatic checks every time it opens. You will understand each part well enough to start a second app on your own.

$39Open course ↗

beginner24 lessons

UX Design With Figma: Design Apps People Love

You research, sketch, prototype and test a real app design. You finish with a clickable prototype, the research and test notes behind it, and a written spec a developer could build from.

$39Open course ↗