Lesson 3 +10 XP

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:


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

Command-Line Arguments Explained

Flag	Purpose
`- typescript`	Configures TypeScript with automatic `tsconfig.json` types
`- tailwind`	Sets up Tailwind CSS directives in `globals.css`
`- eslint`	Enables Next.js ESLint rules for code quality
`- app`	Enables the App Router (`app/` directory)
`- src-dir`	Places application code inside a `src/` folder
`- import-alias "@/*"`	Sets up clean module path aliases (e.g., `import Button from '@/components/Button'`)

Standard Directory Anatomy

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


text
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:


javascript
/** @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 /.