iDevMeet

Next.js · module 1 of 16

Getting Started with Next.js

Next.js is a full-stack React framework by Vercel that adds server-side rendering, file-based routing, API routes, and built-in optimizations — zero config.

Course map
serverruns where your data livespage.tsxreads the database directlyShips HTML. No JavaScript for this part.browserruns where the user clicks'use client'state, effects, event handlersShips JavaScript. Needed for interactivity.Everything is a server component until you say otherwise. Reach for use client when a piece of thepage needs to react to the user — and keep it as small as you can, because it costs a download.
Getting Started with Next.js — the idea in one picture

What this module covers

4 steps · Next.js

  1. Step 1. Getting Started with Next.js

    Next.js is a full-stack React framework by Vercel that adds server-side rendering, file-based routing, API routes, and built-in optimizations — zero config. - SSR — render on each request for fresh data - SSG — generate at build time for fast static delivery - ISR — revalidate static pages in the background - App Router — React Server Components, layouts, streaming npx create-next-app@latest my-app cd my-app && npm run dev App Router structure: my-app/ ├─ app/ │ ├─ layout.jsx # root layout (HTML shell) │ ├─ page.jsx # / route │ └─ about/ │ └─ page.jsx # /about route ├─ public/ ├─ components/ └─ next.config.js Note: page.jsx/layout.jsx run as real Next.js server files — the live preview below can only run their pure UI logic, not routing or server data, since there's no Next.js server in a browser sandbox.

    Whatever component a page.jsx file default-exports becomes the actual UI rendered at that route — no registration or config needed, the file's location in app/ is the route itself. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Does HomePage export a default component with real content?

  2. Step 2. Quiz: Getting Started with Next.js

    Answer these questions about what Next.js adds on top of React.

    Next.js layers file-based routing, multiple rendering strategies, and API routes on top of plain React. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Answer the quiz below.

  3. Step 3. Home Page with Navigation

    Create a Next.js home page component with a shared navigation bar linking to Home, About, and Blog.

    Link is a real, running import here — the sandbox always recognizes next/link specifically so this preview renders exactly like it would in a full Next.js app. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Does the page render a nav with Link components to all three routes?

  4. Step 4. Mini project: Getting Started with Next.js

    Create a Next.js home page component with a shared navigation bar linking to Home, About, and Blog. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

    Link is a real, running import here — the sandbox always recognizes next/link specifically so this preview renders exactly like it would in a full Next.js app. This project stage asks you to apply the same idea without step-by-step scaffolding. In Next.js, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [Next.js] Does the page render a nav with Link components to all three routes?

Loading code lab...