Module Not Found: Can't Resolve '@/...' in Next.js - Fixed

The Error

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

Why This Happens

The @ symbol is a path alias that needs to be configured in your TypeScript/JavaScript config. Next.js uses this for cleaner imports instead of relative paths like '../../../components'.

The Fix

Step 1: Check tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Step 2: Restart Your Dev Server

npm run dev

Step 3: Verify File Structure

Make sure your import path matches your actual file location:

// If file is at: app/components/Button.tsx
import Button from '@/app/components/Button'

// If file is at: components/Button.tsx
import Button from '@/components/Button'

Alternative: Custom Path Aliases

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"],
      "@components/*": ["./components/*"],
      "@utils/*": ["./utils/*"],
      "@lib/*": ["./lib/*"]
    }
  }
}

For JavaScript Projects (jsconfig.json)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Quick Checklist

• Verify tsconfig.json has paths configured
• Restart dev server after config changes
• Check file actually exists at the path
• Ensure import path matches file location
• Check for typos in file names