What is an Import Alias? And how to use them!

when you create a next JS project you see this question about the default import Alias but do you know what an import Alias is and note that import aliases aren't just for next JS they can be applied to any project import aliases are enabled by applying a setting to your TS config file under paths let's break it down it means anything that would normally start with DOT slash Source slash can be replaced with at symbol slash let's look at an example I've nested two directories deep from The Source directory and I want to import a function from my lib directory without an alias I need to provide two dots for each directory level I need to navigate up before going into the lib folder but with an alias I can replace all of those dots and just say at slash lib slash you can also use more than one alias in a project like this also note that some environments have extra requirements for example Veet also needs you to set up the aliases in the veet.config.ts file

Channel: Dave Gray

Views: 65,595

Keywords: import alias, import alias nextjs, import alias next.js, default import alias, import alias typescript, import alias react, import alias vite, tsconfig, tsconfig paths, tsconfig paths next.js, tsconfig paths react, import aliases, import alias setup, import alias set up, configure import alias, configure default import alias, multiple import aliases, adding extra import aliases, more than one import alias, alias, clean code, next.js import alias, next.js default import alias

Id: Lna5CjbxD4o

Length: 1min 0sec (60 seconds)

Published: Sun Jun 11 2023