4b:I[88154,["5730","$1e","1041","$1f","8500","$20","9845","$21","1370","$22","721","$23","8437","$24","99","$25","7186","$26","6152","$27","2724","$28","7814","$29","2238","$2a","5551","$2b"],"default",1] 4a:T4dc,{"@context":"https://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.nammy4u.com/article/إعداد-ESLint-وPrettier-وJest-في-مشاريع-Next.js:-دليلك-الشامل-لكتابة-كود-نظيف-وخالٍ-من-الأخطاء"},"headline":"إعداد ESLint وPrettier وJest في مشاريع Next.js: دليلك الشامل لكتابة كود نظيف وخالٍ من الأخطاء","description":"دليل عملي خطوة بخطوة لتثبيت وتهيئة ESLint وPrettier وJest في Next.js، مع نصائح لتكاملها في سير العمل لضمان جودة الكود وتوفير الوقت.","image":[{"@type":"ImageObject","url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/uo3xu5zm1kf-1786058714956.jpg","width":1200,"height":630}],"datePublished":"2026-05-24T09:40:50.46666+00:00","dateModified":"2026-06-20T17:59:40.462326+00:00","author":{"@type":"Person","name":"Hani Omar","url":"https://www.nammy4u.com/user/hohani57"},"publisher":{"@type":"Organization","name":"نَمّي","logo":{"@type":"ImageObject","url":"https://www.nammy4u.com/logo.png"}},"inLanguage":"ar","articleSection":"ذكاء_اصطناعي"}4c:T1950,

لماذا تحتاج هذه الأدوات الثلاثة في مشروع 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 ليس ترفاً، بل استثمار في جودة مشروعك وفي وقتك المستقبلي. قد تأخذ الخطوات الأولى بضع دقائق، لكنها ستوفر عليك ساعات من البحث عن أخطاء غبية أو نقاشات لا تنتهي حول المسافات والأقواس. ابدأ اليوم، وقم بتهيئة هذه الأدوات في مشروعك الحالي، وستشعر بالفرق فوراً. الكود النظيف ليس مجرد جماليات، بل هو أساس لتطوير أسرع وتعاون أفضل.

37:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$4a"}}],["$","$L4b",null,{"initialPost":{"id":144,"slug":"إعداد-ESLint-وPrettier-وJest-في-مشاريع-Next.js:-دليلك-الشامل-لكتابة-كود-نظيف-وخالٍ-من-الأخطاء","title":"إعداد ESLint وPrettier وJest في مشاريع Next.js: دليلك الشامل لكتابة كود نظيف وخالٍ من الأخطاء","video":null,"images":[],"status":"published","content":"$4c","cta_url":null,"excerpt":"دليل عملي خطوة بخطوة لتثبيت وتهيئة ESLint وPrettier وJest في Next.js، مع نصائح لتكاملها في سير العمل لضمان جودة الكود وتوفير الوقت.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":null,"cta_price":null,"image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/uo3xu5zm1kf-1786058714956.jpg","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-05-24T09:40:50.46666+00:00","updated_at":"2026-06-20T17:59:40.462326+00:00","access_type":"free","category_id":5,"likes_count":0,"views_count":11,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["ذكاء_اصطناعي","برمجة","تطوير"],"deliverable_url":null,"banner_image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/uo3xu5zm1kf-1786058714956.jpg","deliverable_name":null,"service_packages":[]},"initialComments":[],"initialRelatedPosts":[{"id":167,"slug":"hallmark-skill-career-guide","title":"دليلك الشامل لمهارة Hallmark على GitHub: كيف تمنع الذكاء الاصطناعي من إنشاء تصميمات مكررة وعادية؟","images":[],"status":"published","cta_url":"https://github.com/Nutlope/hallmark","excerpt":"استكشف مهارة Hallmark المفتوحة المصدر على GitHub وكيف تفرض على وكلاء الذكاء الاصطناعي (مثل Cursor وClaude Code) إنشاء تصاميم واجهات مستخدم احترافية وفريدة وتمنع ظاهرة AI-Slop.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":"زيارة مستودع Hallmark على GitHub","cta_price":null,"image_url":"https://res.cloudinary.com/bt1swyja/image/upload/v1786993134/nammy/posts/ryofbwxs0bpkz0w9wxcb.webp","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-08-17T18:38:14.933277+00:00","updated_at":"2026-08-17T18:38:14.933277+00:00","access_type":"free","category_id":5,"likes_count":14,"views_count":111,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["ذكاء اصطناعي","برمجة","GitHub","Hallmark","تصميم"],"deliverable_url":null,"banner_image_url":"https://res.cloudinary.com/bt1swyja/image/upload/v1786995581/nammy/posts/lnvdcczucik5pym0bang.webp","deliverable_name":null,"service_packages":[]},{"id":125,"slug":"الحوسبة-الكمومية:-طليعة-الثورة-التقنية-القادمة-وكيف-تستعد-لها-الشركات","title":"الحوسبة الكمومية: طليعة الثورة التقنية القادمة وكيف تستعد لها الشركات","images":[],"status":"published","cta_url":null,"excerpt":"تستعد الحوسبة الكمومية لإعادة تعريف قواعد اللعبة في مجالات التشفير، واكتشاف الأدوية، وتحسين سلاسل الإمداد. تعرف على آليات عملها، تحدياتها، وكيف يمكن للشركات البدء في الاستعداد لهذا التحول الجذري.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":null,"cta_price":null,"image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/1zl5enq80g-1786060596148.jpg","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-05-22T19:13:57.345596+00:00","updated_at":"2026-06-20T17:59:40.462326+00:00","access_type":"free","category_id":5,"likes_count":0,"views_count":5,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["ذكاء_اصطناعي","برمجة","تطوير","الثورة"],"deliverable_url":null,"banner_image_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/blog-images/post-images/1zl5enq80g-1786060596148.jpg","deliverable_name":null,"service_packages":[]},{"id":166,"slug":"vibetrading-ai-tool-guide","title":"دليلك الشامل لأداة VibeTrading: كيف يغير الذكاء الاصطناعي مفهوم التداول بالأوامر النصية؟","images":[],"status":"published","cta_url":"https://vibetrading.ai","excerpt":"استكشف أداة VibeTrading وكيف تمكن المتداولين والمحللين من بناء استراتيجيات التداول، واختبارها تاريخياً، وتحليل المخاطر باستخدام الأوامر النصية البسيطة ودون الحاجة لكتابة كود برمجي.","user_id":"23b805e9-607c-410e-8b96-a586057bc700","profiles":{"id":"23b805e9-607c-410e-8b96-a586057bc700","bio":"UI/UX Designer | Building products with Vibe Coding.\nCrafting clean interfaces and accelerating development through AI-driven workflows.","title":"Vibe Coding, UI/UX Designer","gender":null,"github":null,"is_vip":false,"topics":["#ذكاء_اصطناعي","#تصميم_جرافيك","#برمجة","#figma","#vibe coding"],"twitter":null,"website":null,"linkedin":null,"username":"hohani57","cover_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/cover.webp?t=1786286823445","full_name":"Hani Omar","vip_until":null,"avatar_url":"https://nmxdrabasxqqngpaydft.supabase.co/storage/v1/object/public/avatars/23b805e9-607c-410e-8b96-a586057bc700/avatar.webp?t=1786286855296","created_at":"2026-07-17T23:31:14.256694+00:00","updated_at":"2026-10-28T14:37:58.598782+00:00","user_badges":[{"badges":{"name":"سفير مميز"}},{"badges":{"name":"خبير المحتوى"}},{"badges":{"name":"الانضباط الأسبوعي"}}],"social_links":{},"total_points":2850,"referral_code":null,"pinned_post_id":null,"points_balance":1154,"pinned_badge_id":"article_level_5","verified_status":"identity_verified","terms_accepted_at":null,"username_last_changed_at":null},"cta_label":"تجربة أداة VibeTrading الآن","cta_price":null,"image_url":"https://res.cloudinary.com/bt1swyja/image/upload/v1786992855/nammy/posts/jtl1b1nyad7wwcyjunif.webp","post_type":"article","series_id":null,"card_title":null,"created_at":"2026-08-17T18:32:51.803217+00:00","updated_at":"2026-08-17T18:32:51.803217+00:00","access_type":"free","category_id":5,"likes_count":19,"views_count":139,"points_price":10,"scheduled_at":null,"series_order":null,"delivery_days":3,"service_price":5,"dislikes_count":0,"category_labels":["ذكاء اصطناعي","تداول","أداة","استثمار","VibeTrading"],"deliverable_url":null,"banner_image_url":"https://res.cloudinary.com/bt1swyja/image/upload/v1786992855/nammy/posts/jtl1b1nyad7wwcyjunif.webp","deliverable_name":null,"service_packages":[]}],"initialSiteInfo":{"id":1,"tagline":"بوابتك لرؤية أفضل","site_name":"نَمّي","store_url":null,"hero_title":"تبي نساعدك تكبر في مجالك","books_title":null,"footer_text":"مدونة عربية متخصصة في الذكاء الاصطناعي، ريادة الأعمال، واستراتيجيات تحقيق الدخل الرقمي.","tools_title":null,"total_views":234,"hero_subtitle":"هنا ما راح تقرأ كلام نظري معقد بنشاركك تجارب حقيقية، أدوات تنجز شغلك أسرع، وأفكار تقدر تطبقها وتستفيد منها من اليوم\r\n\r\n","social_github":"https://github.com","books_subtitle":null,"social_twitter":"https://twitter.com","tools_subtitle":null,"books_image_url":null,"social_linkedin":"https://linkedin.com","tools_image_url":null},"initialCategories":[{"id":84,"name":"AdSense","slug":"adsense","post_count":1},{"id":82,"name":"Edge Computing","slug":"edge-computing","post_count":1},{"id":91,"name":"Gpt","slug":"gpt","post_count":0},{"id":92,"name":"OpenAi","slug":"openai","post_count":1},{"id":85,"name":"Solopreneur","slug":"solopreneur","post_count":1},{"id":88,"name":"tempmail","slug":"tempmail","post_count":3},{"id":80,"name":"أعمال","slug":"أعمال","post_count":2},{"id":11,"name":"اداة","slug":"tool","post_count":0},{"id":19,"name":"استثمار","slug":"investment","post_count":0},{"id":16,"name":"اقتصاد","slug":"economy","post_count":4},{"id":24,"name":"اقتصاد رقمي","slug":"digital-economy","post_count":0},{"id":8,"name":"العمل الحر","slug":"freelancing","post_count":0},{"id":89,"name":"الميتافيرس","slug":"الميتافيرس","post_count":1},{"id":20,"name":"برمجة","slug":"programming","post_count":7},{"id":13,"name":"تجارة","slug":"commerce","post_count":0},{"id":14,"name":"تسويق","slug":"marketing","post_count":2},{"id":15,"name":"تصميم","slug":"design","post_count":0},{"id":79,"name":"تطوير","slug":"تطوير","post_count":4},{"id":23,"name":"تطوير الويب","slug":"web-development","post_count":0},{"id":10,"name":"تطوير ذات","slug":"development","post_count":0},{"id":1,"name":"تقنية","slug":"tech","post_count":0},{"id":17,"name":"تكنولوجيا","slug":"technology","post_count":0},{"id":21,"name":"حماية","slug":"حماية","post_count":0},{"id":5,"name":"ذكاء اصطناعي","slug":"ai","post_count":9},{"id":9,"name":"ربح من انترنت","slug":"earning","post_count":0},{"id":18,"name":"صحة","slug":"health","post_count":0},{"id":90,"name":"عادات","slug":"عادات","post_count":1},{"id":77,"name":"عام","slug":"عام","post_count":18},{"id":12,"name":"قصة","slug":"story","post_count":0},{"id":87,"name":"لعبة","slug":"لعبة","post_count":1}],"initialIsUnlocked":true,"initialUserPoints":null,"initialReadingProgress":0}]]