From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

The import alias

The import alias - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

The import alias

“

When we try to use the header component, it automatically imported as you can see here. Ideally, the path should have been dot dot slash components slash header, but instead, it is an at sign. This actually is an alias for the path of the SRC. Here this at sign means SRC itself. It means even if you have more subfolders, for example, inside app, we have product folder, which has prod1 folder. And here if you want to import a component, then the path will look like this, where we have the dot dot slash dot dot slash dot dot. Then we have the components folder, and then the header file. But by using the import alias, it will simply be at components slash header, where at refers to the folder SRC. It is actually configured in the JS config JSON or TS config if you are using TypeScript version. Let me open it. And here we have the configuration. If you remember, the last question asked while creating the project was, would you like to customize the default import alias? And there was yes…

Contents