86 lines
1.7 KiB
Markdown
86 lines
1.7 KiB
Markdown
# 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
|
|
```bash
|
|
npx create-next-app@latest {project_name} --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
|
|
cd {project_name}
|
|
```
|
|
|
|
### 2. Install Additional Dependencies
|
|
```bash
|
|
npm install --save-dev prettier prettier-plugin-tailwindcss @types/node
|
|
npm install lucide-react clsx tailwind-merge
|
|
```
|
|
|
|
### 3. Configure Prettier
|
|
Create `.prettierrc.json`:
|
|
```json
|
|
{
|
|
"semi": false,
|
|
"singleQuote": true,
|
|
"tabWidth": 2,
|
|
"trailingComma": "es5",
|
|
"printWidth": 80,
|
|
"plugins": ["prettier-plugin-tailwindcss"]
|
|
}
|
|
```
|
|
|
|
### 4. Update ESLint Configuration
|
|
Extend `.eslintrc.json`:
|
|
```json
|
|
{
|
|
"extends": ["next/core-web-vitals", "prettier"],
|
|
"rules": {
|
|
"prefer-const": "error",
|
|
"no-unused-vars": "error"
|
|
}
|
|
}
|
|
```
|
|
|
|
### 5. Configure TypeScript
|
|
Update `tsconfig.json` for strict mode:
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
"strict": true,
|
|
"noUnusedLocals": true,
|
|
"noUnusedParameters": true,
|
|
"exactOptionalPropertyTypes": true
|
|
}
|
|
}
|
|
```
|
|
|
|
### 6. Set up Scripts
|
|
Add to `package.json`:
|
|
```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 |