DEV Community 👩‍💻👨‍💻

Alexander Kim
Alexander Kim

Posted on

Path aliases in Nextjs

Tired of writing such imports?

import test from '../../../components/Test.tsx';
Enter fullscreen mode Exit fullscreen mode

If you're using a typescript, you can create a path alias instead:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"] 
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Then you can import more conveniently:

import test from '@/components/Test.tsx';
Enter fullscreen mode Exit fullscreen mode

Don't forget to restart your running task to affect changes.

Top comments (0)

DEV

Thank you.

 
Thanks for visiting DEV, we’ve worked really hard to cultivate this great community and would love to have you join us. If you’d like to create an account, you can sign up here.