Ch 1 · What Next.js Adds · Next.js

Topic 1 of 7 in Next.js — Build the App You Deploy — 4 lessons.

The Gap React Leaves

React renders components. That is genuinely all it does. Every real project then needs answers to questions React does not address:

Server-First, and Why It Matters Here

In a plain React app the browser downloads a mostly-empty page, then JavaScript runs, then it asks a server for data, then finally something appears. On a fast laptop that is invisible. On a shared Android phone over patchy mobile data — which is what a good portion of your users will have — it is several seconds of blank screen.

The Shape of a Project

The app/ folder is where nearly all your work happens, and its structure IS your routing. There is no route configuration file to keep in sync — you cannot have a route that does not exist on disk, and you cannot have a folder that quietly fails to route.

Check Yourself

Answer these before moving on:

All topics in Next.js Beginner

  1. What Next.js Adds
  2. Routes Are Folders
  3. Server and Client
  4. Getting Data Onto the Page
  5. Your Own API
  6. Talking to Postgres
  7. The Project