How do you configure custom path aliases in a Next.js project so you can write cleaner import statements?

You add a paths configuration inside your tsconfig.json or jsconfig.json file, mapping a short alias like @/components to your actual folder path, letting you write shorter, cleaner import statements that do not need long relative paths with many dots and slashes.

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

// Usage
import Button from '@/components/Button';