Next.js is a React framework that allows developers to build full-stack web applications. It provides features like:

• Server-Side Rendering (SSR)
• Static Site Generation (SSG)
• API routes
• Built-in routing
• Performance optimization
• SEO improvements

Quick Start

The fastest way to create a new Next.js application is by using the official CLI.

Step 1: Create a New App

Run the following command in your terminal:

npx create-next-app@latest my-app --yes

The --yes flag skips all interactive prompts and uses the recommended default configuration.

Default setup includes:

• TypeScript
• Tailwind CSS
• ESLint
• App Router
• Turbopack
• Import alias @/*

Step 2: Start the Development Server

cd my-app
npm run dev

Once the server is running, open your browser and visit:

http://localhost:3000

You should now see your Next.js application running locally 🎉

TypeScript

Next.js comes with built-in TypeScript support, so no manual setup is required.

How It Works

• Rename any JavaScript file to .ts or .tsx

• Run the development server with npm run dev

• Next.js will automatically:

  • Install TypeScript dependencies
  • Generate a tsconfig.json
  • Apply recommended compiler options

This makes it easy to start using TypeScript without additional configuration.

Linting

Next.js supports linting using ESLint or Biome. Choose one based on your preference.

ESLint (Comprehensive Rules)

Add the following scripts to your package.json:

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

Run linting with:

npm run lint

Absolute Imports and Module Path Aliases

Next.js supports absolute imports using the baseUrl and paths options in tsconfig.json or jsconfig.json.

Why Use Absolute Imports?

They make imports cleaner and easier to maintain.

// Before
import { Button } from '../../../components/button'

// After
import { Button } from '@/components/button'

Configure baseUrl

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

Configure Path Aliases

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

Each alias is resolved relative to the baseUrl.