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

| Next.js |

| create-next-app |

| TypeScript |

| Turbopack |

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.