Skip to main content
Zee Academy · Lesson 09 · Frontend Development: Next.js 15, Tailwind and Design Systems

Next.js 15 App Router: Server vs Client Components

The App Router changes how pages are built: Server Components render on the server without sending their JavaScript to the browser, which helps pages load fast.

Next lesson

What you will learn

  • Server Components (the default): run on the server, can read from the database directly, are fast and work well for SEO.
  • Client Components ("use client"): use them only when you need interactivity (useState, useEffect, onClick events, animations).
  • Rule of thumb: keep as much code on the server as possible and put "use client" only on the smallest interactive components.
  • Layouts and templates: layout.tsx isn't re-rendered when you navigate, so the header and navigation keep their state.

Folder structure in the App Router

In Next.js, the folder structure decides the URL routes of your site:

  • src/app/page.tsx -> Home page (/).
  • src/app/about/page.tsx -> The /about page.
  • src/app/contact/page.tsx -> The /contact page.
  • src/app/layout.tsx -> The main wrapper with fonts, navigation and footer.

Step by step

  1. Create a new Next.js project

    npx create-next-app@latest moj-projekt --typescript --tailwind --eslint --app --src-dir

    The recommended official options, which set up Next.js in a src folder with Tailwind.

Tip from practice

Don't put "use client" at the top of a whole page. If you need one button that opens something on click, move just that button into its own component with "use client".