1.8 KiB

Raw Blame History

Setup Next.js Project

Task Overview

Initialize a new Next.js project with TypeScript, Tailwind CSS, ESLint, and Prettier configuration.

Prerequisites

Node.js 18+ installed
npm or yarn package manager
Git for version control

Steps

1. Create Next.js Project

npx create-next-app@latest {project_name} --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
cd {project_name}

2. Install Additional Dependencies

npm install --save-dev prettier prettier-plugin-tailwindcss @types/node
npm install lucide-react clsx tailwind-merge

3. Configure Prettier

Create .prettierrc.json:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"]
}

4. Update ESLint Configuration

Extend .eslintrc.json:

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "prefer-const": "error",
    "no-unused-vars": "error"
  }
}

5. Configure TypeScript

Update tsconfig.json for strict mode:

{
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true
  }
}

6. Set up Scripts

Add to package.json:

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint:fix": "eslint . --fix"
  }
}

Validation Checklist

Next.js project created with TypeScript
Tailwind CSS configured and working
ESLint and Prettier configured
All dependencies installed
Scripts working correctly
Project builds without errors

Next Steps

Set up folder structure
Configure environment variables
Create initial components

1.8 KiB Raw Blame History