LogoENEnglish

Installing and Bootstrapping a Next.js Project – Quick Start with TypeScript, Tailwind, and App Router

This article walks you through creating a modern Next.js project using the official create-next-app CLI. With a single command, you can scaffold a project preconfigured with TypeScript, Tailwind CSS, App Router, and Turbopack. We’ll also cover folder structure, TypeScript and ESLint setup, and configuring absolute import aliases for cleaner code.

Next.jscreate-next-appTypeScriptTurbopack

~2 دقیقه مطالعه • بروزرسانی ۳ آبان ۱۴۰۴

Introduction


Next.js is one of the most popular React frameworks for building modern web applications. In this article, we’ll walk through the steps to install and bootstrap a new project using the official create-next-app CLI tool.


Quick Start with create-next-app


To create a new project with default settings, run the following commands in your terminal:


pnpm create next-app@latest my-app --yes
cd my-app
pnpm dev

This sets up a project with TypeScript, Tailwind CSS, App Router, and Turbopack enabled by default.


Initial Folder and File Structure


Next.js uses file-based routing. Start by creating an app directory and adding the following files:


// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}

Using the public Folder


To store static assets like images, create a public folder at the root of your project. You can reference files using root-relative paths:


import Image from 'next/image';

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />;
}

TypeScript and ESLint Setup


Next.js has built-in TypeScript support. Rename any file to .ts or .tsx and run next dev to auto-generate a tsconfig.json.


For linting, you can use ESLint or Biome:


// ESLint
"scripts": {
  "lint": "eslint",
  "lint:fix": "eslint --fix"
}

// Biome
"scripts": {
  "lint": "biome check",
  "format": "biome format --write"
}

Using Import Aliases


To simplify import paths, configure @/ as an alias in your tsconfig.json or jsconfig.json:


{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

Conclusion


With create-next-app and the default setup, you can quickly launch a modern Next.js project. It comes preconfigured with powerful tools like TypeScript, Tailwind, App Router, and Turbopack — making development faster and more structured from the start.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article