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.