Как конфигурировал проект?

Конфигурация React/Next.js проекта

Этот вопрос часто задают на собеседованиях, чтобы понять, умеешь ли ты настраивать проект с нуля и знаешь ли инструменты. Расскажу о реальном опыте конфигурирования production-ready приложения.

1. Инициализация проекта

Обычно использую Create React App, Vite, или Next.js в зависимости от требований.

// Для Next.js (мой обычный выбор)
npx create-next-app@latest my-app --typescript --tailwind --eslint

// Для React + Vite (более быстрый вариант)
npm create vite@latest my-app -- --template react-ts

// Для чистого React с Create React App
npx create-react-app my-app --template typescript

Уже эти команды дают базовую конфигурацию: TypeScript, ESLint, Prettier (опционально).

2. package.json и зависимости

Важно правильно выбрать и организовать зависимости.

{
  "name": "my-frontend-app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --ext .ts,.tsx",
    "format": "prettier --write \"src/**/*.{ts,tsx,css,json}\"",
    "type-check": "tsc --noEmit",
    "test": "vitest --watch",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "^16.0.0",
    "axios": "^1.7.0",
    "zustand": "^4.5.0",
    "tailwindcss": "^4.0.0"
  }
}

3. TypeScript конфигурация (tsconfig.json)

Это важно для строгой типизации и ранней поимки ошибок.

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist", ".next"]
}

4. ESLint конфигурация (.eslintrc.json)

Для поддержания качества кода и консистентности стиля.

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "next/core-web-vitals"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "@typescript-eslint/no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
    "no-console": ["warn", {"allow": ["warn", "error"]}],
    "prefer-const": "error"
  }
}

5. Tailwind CSS конфигурация (tailwind.config.ts)

import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './src/components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      colors: {
        primary: '#3b82f6',
        secondary: '#10b981'
      }
    }
  }
};

export default config;

6. Next.js конфигурация (next.config.js)

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: 'standalone',
  images: {
    unoptimized: false,
    domains: ['api.example.com']
  }
};

module.exports = nextConfig;

7. Environment переменные

Создаю файлы .env.local для development и настраиваю CI/CD переменные для production. Никогда не коммиче секреты в код.

8. Структура проекта

src/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components/
│   ├── ui/
│   ├── layout/
│   └── features/
├── hooks/
├── lib/
├── types/
└── contexts/

9. Tестирование (Vitest + Testing Library)

Настраиваю Vitest для unit-тестов, проверяю покрытие минимум 90%. Использую Playwright для E2E тестов.

10. CI/CD (GitHub Actions)

Настраиваю pipeline для линтинга, типизации, тестирования и сборки на каждый commit.

Типичный workflow конфигурирования

1. Инициализация проекта (create-next-app)
2. TypeScript с strict mode
3. ESLint + Prettier
4. Tailwind CSS + тема
5. Структура по функциям
6. API клиент (fetch wrapper или axios)
7. Управление состоянием (Zustand или Context)
8. Тестирование (Vitest + Testing Library)
9. CI/CD конфигурация
10. Dockerfile для деплоя

Важно помнить, что конфигурация — это итеративный процесс. Начинаю с минимума и добавляю инструменты по мере необходимости, а не предустанавливаю всё сразу.