What is React and Next.js: Build Modern Web Apps?

Build Shelf, a reading list app, one piece at a time: components, state, pages, server code, tests and a public web address. 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.

Open the React and Next.js: Build Modern Web Apps course page

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.

These are the prerequisites the course lists:

• 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

These are the tools and materials the course lists:

• 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

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. The finished deliverables are:

• 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

React and Next.js: Build Modern Web Apps has 24 lessons in 6 modules, a workbook of 10 items and a capstone project. It is planned at about 8 hours in total. The lesson text runs to roughly 14,800 words.

React and Next.js: Build Modern Web Apps has 6 modules:

• Module 1: Your First Components. 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.
• Module 2: Making Pages React. 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.
• Module 3: Sharing and Keeping State. 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.
• Module 4: Pages, Routes and Server Components. 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.
• Module 5: Server Features: APIs, Forms and Rendering. 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.
• Module 6: Polish, Test and Ship. 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.

All 24 lesson titles, module by module:

• Module 1: Your First Components. 1.1 Create your project and see it run; 1.2 JSX: markup inside JavaScript; 1.3 Components and props; 1.4 Lists, keys and conditions.
• Module 2: Making Pages React. 2.1 Events, and why a plain variable does not update the screen; 2.2 State: a component's memory; 2.3 Forms: controlled inputs and derived values; 2.4 Updating arrays and objects without changing them.
• Module 3: Sharing and Keeping State. 3.1 Lifting state up; 3.2 Reducers: one place for every change; 3.3 Context: share state without passing props down every level; 3.4 Effects: keep the list after a reload.
• Module 4: Pages, Routes and Server Components. 4.1 Routes, links and layouts; 4.2 Dynamic routes: one page for every book; 4.3 Server components and client components; 4.4 Loading data on the server, with loading and error screens.
• Module 5: Server Features: APIs, Forms and Rendering. 5.1 Route handlers: your own small API; 5.2 Server Actions: handle a form on the server; 5.3 Form feedback: errors, pending state and kept input; 5.4 Static and dynamic rendering: read the build report.
• Module 6: Polish, Test and Ship. 6.1 Page titles and descriptions with the Metadata API; 6.2 Images and fonts that load fast; 6.3 Tests that catch mistakes for you; 6.4 Ship it: final checks, Git and a public address.

The course is listed at intermediate level and planned at about 8 hours in total. It has 24 lessons, each with objectives you can check yourself against.

Lesson 1 is "Create your project and see it run" (Module 1, Your First Components). By the end of it the course says you will be able to:

• Create a Next.js project with one command and start it on your computer
• Name the main files and folders of a new project
• Edit a page and see the browser update

React and Next.js: Build Modern Web Apps defines 30 terms in plain words: Component, JSX, Props, Render, State, Hook, Event handler, Derived value, Mutate, Reducer, Context, Effect, localStorage, Hydration, Route, Layout, Dynamic route, Server Component, Client Component, Route Handler, API, Server Action, Cookie, Static rendering, Dynamic rendering, Build, Deploy, Node.js, npm and Framework.

ComponentJSXPropsRenderStateHookEvent handlerDerived valueMutateReducerContextEffectlocalStorageHydrationRouteLayoutDynamic routeServer ComponentClient ComponentRoute HandlerAPIServer ActionCookieStatic renderingDynamic renderingBuildDeployNode.jsnpmFramework

React and Next.js: Build Modern Web Apps lists 30 official sources that were opened and checked while it was written, from 4 websites.

• nextjs.org
• react.dev
• vercel.com
• nodejs.org

React and Next.js: Build Modern Web Apps costs $39 (USD) as The Codex, the full written course with its workbook and templates. Studio (narrated video lessons) and the Full Operator path are not on sale yet.

How much do courses cost?

React and Next.js: Build Modern Web Apps was prepared by Apex Flow Labs with AI assistance and checked before it was published. Every code sample, formula and command the course includes was run before it went in, the course records 24 verification checks, and it lists 30 official sources it checked. Do not take the label on trust: open the sources and run the examples yourself.

How Apex Flow Academy checks its courses

Yes for the core lessons, according to the course's own requirements list: "Nothing in the core lessons costs money." The list also names optional extras or costs outside the core lessons, so read it in full. Tool plans and prices change, so check each tool's current terms before you sign up.

It is listed at intermediate level, and it asks for this before you begin:

• 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

No. React and Next.js: Build Modern Web Apps teaches and checks a skill, but it cannot promise an outcome. The course's own disclosure reads: "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."

Yes. React and Next.js: Build Modern Web Apps includes a verifiable Certificate of Completion, issued by Apex Flow Academy when you finish every lesson, resolve every quiz question with at least 50% right on the first try, and tick the capstone checklist. It has a unique ID and a public verification page. It is a completion certificate, not a degree, licence, accreditation or exam result. The Full Operator path, with a final exam and capstone review, opens later with its own separate, stronger credential.

Is there a certificate?