All language subtitles for 006 Import Alias_en

We wrote a custom Heading component,

that allows us to apply the same CSS styles

to all the headings in all the pages.

Now, note how, in the HomePage

we import the Heading from "../components/",

because the HomePage is inside the "app" folder,

so we need to go up one level, and

then into the "components" folder.

If we look at the ReviewsPage,

here we import it from "../../components",

because this page is inside the "reviews" folder,

so we need to go up two levels to

reach the top of the project.

And if we look at an individual review page,

this file is inside three nested folders,

so the relative path gets even longer.

Now, Visual Studio Code can add imports automatically,

which helps.

But still, these relative paths

can get a bit messy,

especially if you start moving files around.

A common way to avoid this in a Next.js project

is to configure an "import alias".

We can do that by creating a file at the top level

called "jsconfig.json".

Now, if you use TypeScript instead of JavaScript,

you need to configure this in

the "tsconfig.json" instead,

without creating a new file.

Anyway, in "jsconfig" we can write a JSON object,

with a "compilerOptions" property,

where we can set options used

by both Visual Studio Code

and the Next.js build system.

One such option is "paths".

This is an object where we

can define path aliases.

For example, we can map "@/*"

to an array containing "./*".

So, what this means is that

if we write "@/" something in our code

the compiler will translate

it into "./" something,

where "./" means it's relative

to the root of our project.

Let's save, and I'll show you this in action,

which is probably easier to understand.

Now, I think this should work even

without restarting the server.

So, what we'll do is use "@" to

mean the top of our project.

For example, in the HomePage component,

we can replace ".." with "@",

and this should import Heading

from the "components" folder

that's inside the root of our project.

If we reload, everything should still work.

Now, in the ReviewsPage

we can do the same, and write "@/components".

This way we can get rid of all the ".." segments.

And the benefit will be even

clearer in each review page,

where we had to go up 3 levels

to go into the right folder.

Let's do the same for the "Hollow Knight" page.

We just need to go through this process once;

from now on we'll always use

"@" in front of our imports.

Ok, the About page was the last one.

Note that, by using the "@" in front,

the import path is now the

same in all the modules,

no matter where each file is

located inside the project.

This will also make it easier to copy

imports from one file to another,

besides just making our code look cleaner.

All we need to do is configure a module

path alias in "jsconfig.json",

or "tsconfig.json" for TypeScript.

If you use the Create Next App tool

to initialize your Next.js project

it will automatically configure

the path alias for you.

But by going through this step

manually in this video

at least now you understand how it works,

and why it's useful.