Project Setup with create-next-app

After this lesson, you will be able to: Scaffold a fresh Next.js app with TypeScript and Tailwind using `create-next-app`, navigate the folder structure, start the dev server, and make your first edit with hot reload.

Every Next.js project starts with one command: `npx create-next-app`. The scaffolder asks you a handful of questions, then drops you into a working app with TypeScript, Tailwind, ESLint, the App Router, and Fast Refresh all preconfigured. This lesson walks you through the setup, the folder layout, and your first edit. By the end you'll have a real Next.js project running locally that you can build on for the rest of the subtrack.

Prerequisites:TypeScript Fundamentals

Why use the scaffolder (and not roll your own)

You could install Next.js, React, Tailwind, ESLint, and TypeScript by hand and wire them together yourself. Nobody does this for new projects. `create-next-app` is maintained by Vercel, ships sensible defaults the framework team itself uses, and gets you to a working app in under a minute. The scaffolded code is the same scaffolded code every Next.js tutorial, every new hire onboarding doc, and every Vercel example starts from. Use it.

Running create-next-app

One command, a few questions, a working app. Use the answers below for this subtrack — TypeScript, ESLint, Tailwind, App Router. The defaults are the right answers in 2025.

bash

# In your projects folder
npx create-next-app@latest my-first-next-app

# Answers (just press Enter for each — these are the defaults)
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like your code inside a `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to use Turbopack for `next dev`? … Yes
✔ Would you like to customize the import alias (@/*)? … No

# Open it in your editor
cd my-first-next-app
code .

# Start the dev server
npm run dev
# → http://localhost:3000

The folder tour

What you got. Spend 60 seconds looking at each: `app/` — the App Router lives here. `page.tsx` is the homepage. `layout.tsx` wraps every page. `globals.css` holds Tailwind directives. `public/` — static files served at the root (favicons, images, robots.txt). `package.json` — your dependencies and `scripts` (the `dev`, `build`, `start`, `lint` commands). `next.config.ts` — Next.js configuration (image domains, experimental flags). Mostly empty for new projects. `tsconfig.json` — TypeScript settings. `strict: true` is on by default. Don't turn it off. `tailwind.config.ts` — Tailwind configuration. The `content` paths tell Tailwind which files to scan for class names; if you add `src/` later, add it here too.

Making your first edit

Open `app/page.tsx` and replace its contents with the snippet below. Save the file. Watch the browser tab at `localhost:3000` refresh instantly. Fast Refresh is Next.js applying your change without a full reload.

html

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center bg-slate-50">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-slate-900">
          Hello, Next.js!
        </h1>
        <p className="mt-2 text-slate-600">
          Your first Next.js page is running.
        </p>
      </div>
    </main>
  );
}

What you got for free

Five things working out of the box that would cost you a weekend to wire up yourself: **Fast Refresh** — edit a component, see the change without losing state. **TypeScript** — `strict: true` from the first line of code. **Tailwind v4** — utility classes work in any file under `app/`. **ESLint with Next.js rules** — catches accessibility issues (`<img>` missing `alt`), bad Next.js patterns (using `<a>` instead of `<Link>`), and common React mistakes. **Font optimization** — `next/font` lets you self-host Google fonts with zero layout shift. All of this is invisible until you need it. That's the point.

Customize your homepage

Edit `app/page.tsx` to replace the placeholder with your own personal landing page. Required patterns below check that you've used a Tailwind layout class (`flex` or `grid`), at least one Tailwind color utility, a heading, and a paragraph. The page should look intentionally styled, not generic.

Loading exercise…

💡 Common mistakes only experienced devs catch

Five setup-time traps. (1) **Running create-next-app inside another repo** — it errors. cd to a fresh folder first. (2) **Picking older Next.js versions to match a tutorial** — the App Router and React Server Components are a moving target; use `@latest` and learn the current API. (3) **Disabling strict mode in tsconfig.json to silence errors** — same trap as in pure TypeScript projects. Strict mode is what you're paying for. (4) **Editing `node_modules` directly** — your changes get wiped on the next `npm install`. Every fix goes in YOUR code. (5) **Forgetting to add new file extensions to `tailwind.config.ts` `content`** — if you create a `components/` folder outside of `app/`, classes in there won't get generated. Add the path to the content array.

←Why Next.js Won: What It Is and Why You'll Use It

Back to React and Next.js

App Router: Layouts, Pages, Loading, Errors→