Ch 3 · Server and Client · Next.js

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

Server Components Are the Default

Every component under app/ runs on the server unless you say otherwise. That means it can do things browser code cannot:

When You Need the Browser

Server components cannot use state or respond to clicks, because by the time the user clicks, the server has finished. For interactive pieces you opt in:

Choosing Between Them

Keep components on the server by default. Move a component to the client only when it needs one of:

Fix the Bug

The error will say something about useState only working in a client component. The file is missing "use client" at the top, so Next.js is trying to run a hook on the server, where there is no browser and nothing to re-render.

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