Path aliases in Nextjs

This content originally appeared on DEV Community and was authored by Alexander Kim

Tired of writing such imports?

import test from '../../../components/Test.tsx';

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

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

Then you can import more conveniently:

import test from '@/components/Test.tsx';

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

This content originally appeared on DEV Community and was authored by Alexander Kim

Print Share Comment Cite Upload Translate Updates

APA

Alexander Kim | Sciencx (2021-12-18T05:31:45+00:00) Path aliases in Nextjs. Retrieved from https://www.scien.cx/2021/12/18/path-aliases-in-nextjs/

MLA

" » Path aliases in Nextjs." Alexander Kim | Sciencx - Saturday December 18, 2021, https://www.scien.cx/2021/12/18/path-aliases-in-nextjs/

HARVARD

Alexander Kim | Sciencx Saturday December 18, 2021 » Path aliases in Nextjs., viewed ,<https://www.scien.cx/2021/12/18/path-aliases-in-nextjs/>

VANCOUVER

Alexander Kim | Sciencx - » Path aliases in Nextjs. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/18/path-aliases-in-nextjs/

CHICAGO

" » Path aliases in Nextjs." Alexander Kim | Sciencx - Accessed . https://www.scien.cx/2021/12/18/path-aliases-in-nextjs/

IEEE

" » Path aliases in Nextjs." Alexander Kim | Sciencx [Online]. Available: https://www.scien.cx/2021/12/18/path-aliases-in-nextjs/. [Accessed: ]

rf:citation

» Path aliases in Nextjs | Alexander Kim | Sciencx | https://www.scien.cx/2021/12/18/path-aliases-in-nextjs/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.