LogoفارسیFA

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 min read • Updated Oct 25, 2025

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.


Written & researched by Dr. Shahin Siami

Next Article