إعداد ESLint وPrettier وJest في مشاريع Next.js: دليلك الشامل لكتابة كود نظيف وخالٍ من الأخطاء

لماذا تحتاج هذه الأدوات الثلاثة في مشروع Next.js؟

تخيل أنك تبني منزلاً دون مسطرة أو ميزان ماء. قد يبدو الأمر ممكناً في البداية، لكن سرعان ما ستظهر الجدران المائلة والأبواب التي لا تغلق. هذا بالضبط ما يحدث عندما تبدأ مشروع Next.js دون أدوات جودة الكود. ESLint هو الميزان الذي يكتشف الأخطاء البرمجية، Prettier هو المسطرة التي تضبط التنسيق، وJest هو اختبار المتانة الذي يضمن أن كل شيء يعمل كما يجب. معاً، يحولون مشروعك من فوضى إبداعية إلى تحفة فنية منظمة.

تثبيت ESLint وتهيئته مع Next.js

لحسن الحظ، Next.js يأتي مع دعم مدمج لـ ESLint عبر الملف eslint.config.mjs (أو .eslintrc.json في الإصدارات الأقدم). لكن الإعداد الافتراضي بسيط، ونحتاج لتعزيزه. ابدأ بتثبيت الحزمة الموصى بها:

npm install --save-dev eslint eslint-config-next

ثم أنشئ ملف eslint.config.mjs في جذر المشروع بالمحتوى التالي:

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

const eslintConfig = [
  ...compat.extends('next/core-web-vitals'),
  ...compat.extends('next/typescript'),
  // أضف قواعدك المخصصة هنا
  {
    rules: {
      'no-console': 'warn',
      'react/jsx-no-target-blank': 'error',
    },
  },
];

export default eslintConfig;

هذا التهيئة تجلب القواعد الأساسية لـ Next.js وTypeScript، مع إضافة بعض القواعد الإضافية مثل التحذير عند استخدام console.log.

تثبيت Prettier ودمجه مع ESLint

Prettier هو المسؤول عن تنسيق الكود بشكل تلقائي، لكنه قد يتعارض مع ESLint إذا لم يتم ضبطهما معاً. الحل هو تثبيت الحزم التالية:

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

ثم قم بتحديث eslint.config.mjs بإضافة:

import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

const eslintConfig = [
  // ... القواعد السابقة
  prettierConfig,
  {
    plugins: { prettier },
    rules: {
      'prettier/prettier': 'error',
      // ... قواعد أخرى
    },
  },
];

الآن، عند تشغيل npx eslint . --fix، سيقوم ESLint بتنسيق الكود وفقاً لقواعد Prettier. يمكنك أيضاً إنشاء ملف .prettierrc لتخصيص التنسيق:

{
  'semi': true,
  'singleQuote': true,
  'tabWidth': 2,
  'trailingComma': 'all'
}

إعداد Jest لاختبار الوحدات والمكونات

الاختبارات هي شبكة الأمان التي تمنع الكود من الانهيار. مع Next.js، نحتاج إلى إعداد Jest مع دعم لـ React Testing Library. ابدأ بالتثبيت:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom jest-environment-jsdom

ثم أضف ملف jest.config.js في الجذر:

const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterSetup: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
};

module.exports = createJestConfig(customJestConfig);

ثم أنشئ ملف jest.setup.js:

import '@testing-library/jest-dom';

الآن يمكنك كتابة أول اختبار لمكون Next.js. مثلاً، اختبر مكون Button:

// __tests__/Button.test.js
import { render, screen } from '@testing-library/react';
import Button from '@/components/Button';

test('renders button with text', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

شغل الاختبارات باستخدام npx jest.

نصائح لتحسين سير العمل

لتجربة سلسة، أضف الأوامر التالية إلى package.json:

'scripts': {
  'lint': 'eslint . --ext .js,.jsx,.ts,.tsx --fix',
  'format': 'prettier --write .',
  'test': 'jest --watch',
  'check': 'npm run lint && npm run test'
}

في محرر VS Code، قم بتثبيت إضافات ESLint وPrettier وJest، ثم أضف الإعدادات التالية في settings.json للتنسيق التلقائي عند الحفظ:

'editor.formatOnSave': true,
'editor.codeActionsOnSave': {
  'source.fixAll.eslint': true
}

بهذه الطريقة، كلما حفظت ملفاً، يتم تنسيقه تلقائياً وإصلاح الأخطاء. الأمر أشبه بوجود مساعد شخصي ينظف وراءك دون أن تطلب.

خاتمة

إعداد ESLint وPrettier وJest في Next.js ليس ترفاً، بل استثمار في جودة مشروعك وفي وقتك المستقبلي. قد تأخذ الخطوات الأولى بضع دقائق، لكنها ستوفر عليك ساعات من البحث عن أخطاء غبية أو نقاشات لا تنتهي حول المسافات والأقواس. ابدأ اليوم، وقم بتهيئة هذه الأدوات في مشروعك الحالي، وستشعر بالفرق فوراً. الكود النظيف ليس مجرد جماليات، بل هو أساس لتطوير أسرع وتعاون أفضل.