كيفية إصلاح أخطاء "الوحدة غير موجودة" في Next.js 15

المشكلة

Module not found: Can't resolve '@/components/Button'

الأسباب والحلول الشائعة

1. إعداد مفقود لأسماء المسارات المستعارة

// tsconfig.json or jsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

2. مشكلات امتداد الملف

// Wrong - missing extension in some cases
import Button from '@/components/Button'

// Check if file is Button.tsx, Button.ts, or Button/index.tsx

3. حساسية حالة الأحرف (خوادم Linux)

// Wrong on Linux
import Button from '@/components/button'

// Correct - match exact case
import Button from '@/components/Button'

4. مسح ذاكرة Next.js المؤقتة

rm -rf .next
rm -rf node_modules/.cache
npm run dev

5. التحقّق من next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    // Ensure proper module resolution
  },
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@': path.resolve(__dirname, 'src'),
    };
    return config;
  },
};

module.exports = nextConfig;

6. إعادة تثبيت الاعتماديات

rm -rf node_modules package-lock.json
npm install

خطوات التصحيح

1. تأكّد من وجود الملف في المسار المستورَد
2. تحقّق من الأخطاء الإملائية في عبارة الاستيراد
3. تأكّد من أن مسارات tsconfig تطابق هيكلك
4. امسح جميع الذواكر المؤقتة وأعد التشغيل