Bootstrapping a Next.js App

create-next-app in 60 Seconds

Bootstrapping a Next.js App

Use create-next-app to scaffold a typed, App Router, Tailwind-ready Next.js project in under a minute.

4 min read Level 1/5 #nextjs#install#cli
What you'll learn
  • Run `npx create-next-app@latest`
  • Pick TypeScript, App Router, and Tailwind
  • Start the dev server and tour the generated files

The fastest way to start a Next.js app is the official scaffolder. It asks a handful of questions and gives you a working project with sensible defaults.

Run the Scaffolder

npx create-next-app@latest my-app

You will be prompted for a few choices. For a modern Next.js 15 setup, pick:

  • TypeScript: Yes
  • ESLint: Yes
  • Tailwind CSS: Yes
  • src/ directory: optional, your taste
  • App Router: Yes (the default)
  • Turbopack for next dev: Yes
  • Import alias: keep @/*

Start the Dev Server

cd my-app
npm run dev

Open http://localhost:3000 and you should see the starter page. Edits to app/page.tsx hot-reload instantly.

What Just Got Created

The two files you will edit most live at the root of app/:

// app/layout.tsx — the root layout, wraps every page
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
// app/page.tsx — the homepage at /
export default function HomePage() {
  return <h1>Hello, Next.js</h1>;
}

That is a complete Next.js app. The next lesson tours the CLI you will use day to day.

The Next.js CLI →