Next.js Project Anatomy & CLI Setup

Next.js Project Anatomy & CLI Setup

Setting up a modern Next.js project is powered by the official command-line tool create-next-app. It sets up TypeScript, Tailwind CSS, ESLint, App Router, and module alias configuration automatically.

Initializing a Next.js Project

Run the following terminal command to initialize a new project:

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

Command-Line Arguments Explained

Standard Directory Anatomy

A standard Next.js 14/15 project structure looks like this:

my-next-app/
├── src/
│   ├── app/
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   └── page.tsx
│   └── components/
│       └── Navbar.tsx
├── public/
│   └── logo.svg
├── next.config.mjs
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Essential Config Files

1. next.config.mjs

Configures build options, environment variables, image domains, and redirect headers:

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

export default nextConfig;

2. Root Files & Public Directory

• public/: Holds static assets like images, SVGs, and fonts served directly from the domain root (/logo.svg).
• tsconfig.json: Includes Next.js compiler plugin options and path mappings (@/*).

TL;DR

• create-next-app@latest is the standard tool to bootstrap production-ready Next.js projects.
• Using --src-dir keeps root configuration files separate from application code.
• Module alias @/* replaces long relative path imports like ../../../../components.
• Asset files inside public/ are served statically from the root path /.