Project Scaffolding

Create a new Next.js project with the recommended configuration using create-next-app.

Quick Start

npx create-next-app@latest my-app

The CLI will prompt you for configuration options. Here are the recommended choices:

Option	Recommended	Why
TypeScript	Yes	Type safety and better DX
ESLint	Yes	Catch errors early
Tailwind CSS	Yes	Utility-first styling
`src/` directory	No	Simpler paths with App Router
App Router	Yes	Latest stable routing system
Turbopack	Yes	Faster dev server builds
Import alias	`@/*`	Clean imports from project root

One-Liner Setup

Skip the prompts entirely with flags:

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

Project Structure

After scaffolding, your project looks like this:

my-app/
├── app/
│   ├── layout.tsx       # Root layout (wraps all pages)
│   ├── page.tsx         # Home page (/)
│   ├── globals.css      # Global styles and Tailwind imports
│   └── favicon.ico
├── public/              # Static assets (images, fonts)
├── next.config.ts       # Next.js configuration
├── tailwind.config.ts   # Tailwind CSS configuration
├── tsconfig.json        # TypeScript configuration
└── package.json

Initial Configuration

After creating the project, configure a few essentials:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "your-cdn.com" },
    ],
  },
};

export default nextConfig;

Set the Dev Server Port

Add a custom port in package.json if the default (3000) conflicts:

{
  "scripts": {
    "dev": "next dev --turbopack --port 3012"
  }
}

Install Additional Dependencies

Common additions for a production-ready setup:

npm install clsx tailwind-merge lucide-react

Always run npm run dev after scaffolding to verify everything compiles cleanly before making changes.