How to Use create-next-app: The Complete 2026 Setup Guide

create-next-app is the official CLI tool for bootstrapping a new Next.js project in seconds. Run one command, answer a few prompts, and you have a working, TypeScript-ready, App Router-powered application with Tailwind CSS and Turbopack—before your coffee gets cold.

But the real value isn't just speed. The choices you make during setup—and the configurations you add in the first hour—determine how clean and maintainable your project will be at month six. This guide walks through every option the CLI offers, explains what each choice means in practice, and gives you an eight-point post-setup checklist used by production Next.js teams.

create-next-app is the official scaffolding CLI for Next.js, maintained by Vercel. It replaces the manual process of configuring Turbopack, TypeScript, ESLint, Tailwind CSS, and routing from scratch. The current version—16.1.6 as of February 2026—has zero external dependencies and works offline using your local package cache.

Install and run in one command:

npx create-next-app@latest my-app

Alternatively, bootstrap directly from one of the 200+ templates in the Next.js examples repository:

npx create-next-app@latest my-app --example with-supabase

When you run the command without flags, a short interactive wizard guides you through the configuration. Here is what each choice actually means in practice.

Yes—always. TypeScript is the de facto standard for production JavaScript. It catches type errors at compile time, improves editor autocomplete, and makes refactoring dramatically safer. The Next.js TypeScript integration requires zero additional configuration.

Three options are available: ESLint, Biome, or None.

ESLint ships with eslint-config-next, a curated ruleset that catches Next.js-specific anti-patterns: missing image alt text, incorrect <Link> usage, and more. It is the safe default for most teams.

Biome is worth choosing for greenfield projects. It combines linting and formatting in a single Rust-based tool that runs 10–30x faster than ESLint + Prettier. The trade-off is a younger ecosystem with fewer community plugins.

None only makes sense when linting is enforced at the monorepo level via a separate CI pipeline.

Yes, for most projects. Tailwind's utility-first approach eliminates stylesheet maintenance overhead and makes collaborative styling significantly faster. If you're building a white-label product with semantic design tokens, CSS Modules or a CSS-in-JS library may serve you better.

Yes, for any project beyond a prototype. Placing your application code inside src/ cleanly separates it from root-level configuration files (next.config.ts, tailwind.config.ts, tsconfig.json). Navigation becomes more predictable as the project grows.

Yes—this is the future of Next.js. The App Router, stable since Next.js 14, supports React Server Components, streaming, nested layouts, and the modern Metadata API for SEO. The Pages Router remains supported but is in maintenance mode. All new projects should use the App Router.

Yes. Turbopack became the default bundler in Next.js 16 (October 2025). Built in Rust, it delivers up to 10x faster local dev server startup and near-instant hot module replacement (HMR) compared to Webpack. The development experience improvement is immediate and significant.

The default alias is @/*, mapping to the root of your project (or src/ if selected). Keep the default. It makes imports readable (import { Button } from '@/components/ui/button') and eliminates relative path complexity deep in nested directories.

The React Compiler reached version 1.0 in October 2025 and is now stable in Next.js 16. It automatically memoizes components and values—eliminating the need to manually write useMemo, useCallback, and React.memo() in most cases. Enable it for new projects. Be aware that compile times are slightly higher because the React Compiler relies on Babel under the hood.

If you prefer non-interactive setup or want to script project creation, use flags directly:

npx create-next-app@latest my-app 
  --typescript 
  --tailwind 
  --eslint 
  --app 
  --src-dir 
  --turbopack 
  --import-alias "@/*"

After setup with src/ enabled, your project will look like this:

my-app/
├── src/
│   └── app/
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx       ← Root layout (HTML shell)
│       └── page.tsx         ← Home page (route: /)
├── public/                  ← Static assets
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json

This is intentionally minimal. The app/ directory handles routing—every folder becomes a URL segment, every page.tsx within it becomes a public route. The layout.tsx file wraps every child route, making it the right place for persistent UI (navigation, footers) and global metadata.

Scaffolding a project takes 10 seconds. Configuring it for production takes under an hour—but that hour prevents weeks of technical debt.

Create a .env.local file at the root. It is already in .gitignore by default. For secrets needed at build time on CI/CD, add a .env.example file with placeholder values so teammates know which variables are required. Never commit real secrets to your repository.

If you're deploying anywhere other than Vercel—AWS, Railway, Fly.io, a Docker container—set the output mode:

// next.config.ts
const nextConfig = {
  output: 'standalone', // bundles only what's needed to run the server
};

The standalone output dramatically reduces Docker image sizes by excluding development dependencies from the final artifact.

Extend your tsconfig.json to support the folder structure you'll actually build:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/components/*": ["./src/components/*"],
      "@/lib/*": ["./src/lib/*"],
      "@/hooks/*": ["./src/hooks/*"]
    }
  }
}

Start with a flat, feature-based structure and resist the urge to over-organize early:

src/
├── app/             ← Routes only
├── components/
│   ├── ui/          ← Generic primitives (Button, Input, Card)
│   └── layout/      ← Header, Footer, Sidebar
├── lib/             ← Utilities, API clients, constants
└── hooks/           ← Custom React hooks

Avoid creating component subdirectories inside route folders until you have a concrete reason. Premature organization creates more confusion than it prevents.

create-next-app does not install Prettier by default. Add it early:

npm install --save-dev prettier prettier-plugin-tailwindcss

Enable the Tailwind plugin via .prettierrc. It automatically sorts Tailwind class names in the recommended canonical order—a subtle but meaningful consistency improvement across a team.

Update src/app/layout.tsx before you forget. The App Router’s Metadata API is straightforward and essential for SEO:

export const metadata: Metadata = {
  title: {
    default: 'My App',
    template: '%s | My App',
  },
  description: 'What your app does in one sentence.',
  openGraph: {
    images: ['/og.png'],
  },
};

Create src/app/error.tsx and src/app/not-found.tsx. These are required for production-grade applications and easy to overlook during initial setup. Both files can start as minimal placeholder components and be improved later.

Check your tsconfig.json to confirm "strict": true is present. create-next-app enables this by default, but verify it hasn’t been accidentally disabled—strict mode catches an entire class of bugs that non-strict TypeScript silently accepts.

The Next.js examples repository contains over 200 templates maintained by the Vercel team. Bootstrap directly from any of them using the --example flag:

Use case	Flag
Supabase auth + database	--example with-supabase
NextAuth authentication	--example with-next-auth
Prisma ORM	--example with-prisma
Stripe payments	--example with-stripe-typescript
Drizzle ORM	--example with-drizzle
MDX-powered blog	--example blog-starter

These are production-ready starting points maintained by Vercel, not toy demos. They save hours of boilerplate configuration and reflect current best practices for each integration.

Vercel is the zero-configuration deployment path: connect your GitHub repository, and deployments happen automatically on every push. As the company behind Next.js, Vercel provides the tightest integration and the best defaults out of the box.

For self-hosted deployments—or teams managing Vercel costs at scale—use output: 'standalone' in next.config.ts and deploy a Docker container to Railway, Fly.io, Render, or AWS Fargate. All four platforms work reliably with standalone Next.js and give you full control over infrastructure costs.

create-next-app handles the hard part of project setup in under a minute. The return on investment is in understanding what each option does—so you make deliberate choices rather than accepting defaults you'll reconsider at month three. For new projects in 2026: choose TypeScript, the App Router, Turbopack, Tailwind, and the React Compiler. Configure your deployment target, metadata, and folder structure before writing feature code, and you'll sidestep the most common sources of Next.js technical debt.

The scaffold is ready. What you build on it is the interesting part.

• CLI: create-next-app | Next.js
• Getting Started: Installation | Next.js
• Getting Started: Project Structure | Next.js
• React Compiler v1.0 – React
• Next.js 16 | Next.js
• Turbopack in 2026: The Complete Guide – DEV Community
• Should You Use Next.js in 2026? | Pagepro
• Next.js Routing: App Router vs Pages Router | Kite Metric