Next Intro¶

That first npx create-next-app moment where you realize everything runs on the server now

React in the browser was fun but React on the server is where the real power lives. Next.js gives you Server Components by default , filesystem routing , and API endpoints without spinning up a separate Express app. One npm run dev and you've got a full-stack application

installation¶

The official way. No boilerplate templates , no starter kits , no youtube tutorial flavor-of-the-week

npx create-next-app@latest my-app --typescript --tailwind --eslint

You'll be asked a few questions. Here's what matters in 2026:

# Would you like to use TypeScript?   -> Yes (always)
# Would you like to use ESLint?        -> Yes
# Would you like to use Tailwind CSS?  -> Your call (this guide assumes yes)
# Would you like to use `src/` directory? -> Yes (cleaner structure)
# Would you like to use App Router?    -> Yes (Pages Router is legacy)
# Would you like to customize the default import alias? -> No

That creates a project with TypeScript , Tailwind , App Router , and the src/ directory structure

cd my-app
npm run dev
# -> http://localhost:3000

project structure¶

Open the project and you'll see this:

my-app/
  src/
    app/
      layout.tsx       # root layout - wraps every page
      page.tsx         # home page at /
      globals.css      # global styles
    ...
  public/              # static assets (images , fonts)
  next.config.ts       # Next.js configuration
  package.json
  tsconfig.json

The src/app/ directory is your entire application. Every file in it maps to a route. Every component in it is a Server Component by default - meaning it renders on the server , fetches data on the server , and sends zero JavaScript to the browser unless you explicitly mark it as client-side

pages vs app directory¶

If you've seen older Next.js tutorials , they used the pages/ directory. Here's the difference:

Pages Router (legacy - don't use for new projects):

pages/
  index.jsx          -> /
  about.jsx          -> /about
  api/hello.js       -> /api/hello
  blog/[id].jsx      -> /blog/123

App Router (current - use this):

src/app/
  page.tsx           -> /
  about/page.tsx     -> /about
  api/hello/route.ts -> /api/hello
  blog/[id]/page.tsx -> /blog/123

The App Router uses nested folders instead of file naming conventions Every folder represents a route segment. Every page.tsx renders the UI for that segment. Every layout.tsx provides a shared wrapper

your first page¶

Open src/app/page.tsx and replace it:

// src/app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Next.js running</h1>
      <p>This renders on the server. Check the network tab</p>
      <p>There's no client-side JavaScript for this page</p>
    </main>
  )
}

This is a Server Component. It renders on the server. The HTML is sent to the browser. No JavaScript bundle for this page

Check the network tab in devtools - you'll see the full HTML in the response. That's SSR at work

adding a second page¶

Create src/app/about/page.tsx:

// src/app/about/page.tsx
export default function About() {
  return (
    <main>
      <h1>About this app</h1>
      <p>This page lives at /about</p>
      <p>No client-side routing needed - it's a real HTML page</p>
    </main>
  )
}

Navigate to http://localhost:3000/about and you've got a real route. No React Router. No routing config. Filesystem-based routing just works

security note - default behavior¶

Next.js defaults to Server Components. That means your data fetching code , database queries , and API calls happen server-side and never reach the client. This is fundamentally different from Create React App where everything shipped to the browser

But here's where people mess up: every file in the src/app/ directory that's not a page.tsx or layout.tsx is publicly accessible if it matches a route pattern

src/app/secrets/data.json    -> publicly accessible at /secrets/data.json
src/app/admin/page.tsx        -> publicly accessible at /admin (add auth!)

There's no .env-style protection for route files. If you put sensitive data in a route-accessible file , it's accessible. We'll cover middleware protection in the auth section

prerequisites¶

next_00_home.md - you should understand what Next.js is and its architecture

next → next_02_get_started.md