DEV Community

Salma Alam-Naylor
Salma Alam-Naylor

Posted on • Updated on • Originally published at whitep4nth3r.com

How to avoid using relative path imports in Next.js

Does this look familiar? 🤯

import MyComponent from "../../../../../components/MyComponent";
import ADifferentFile from "../../../some/other/dir/ADifferentFile";
Enter fullscreen mode Exit fullscreen mode

Relative import paths to files in any application can be tricky to manage. Often we rely on the intelligence of our IDEs to tell us how many dot-dot-slashes to type when we're importing files that are nested many directories deep. If you're working with Next.js — there's a better way!

Define your base directories — or module aliases — in a jsconfig.json file at the root of your Next.js project.

Here's the jsconfig.json file I use for the code that powers whitep4nth3r.com.

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@components/*": ["components/*"],
      "@contentful/*": ["contentful/*"],
      "@layouts/*": ["layouts/*"],
      "@styles/*": ["styles/*"],
      "@utils/*": ["utils/*"]
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Using module aliases, import paths at the top of files are self-documenting and easier to write, meaning you can focus on writing code rather than traversing spaghetti directories. It's beautiful.

import PageMeta from "@components/PageMeta";
import RecentPostList from "@components/RecentPostList";
import SocialCards from "@components/SocialCards";

import ContentfulBlogPost from "@contentful/BlogPost";

import MainLayout from "@layouts/main";

import Styles from "@styles/BaseStyles.module.css";

import { Config } from "@utils/Config";
Enter fullscreen mode Exit fullscreen mode

Read more about absolute imports and module path aliases on the Next.js documentation.

Discussion (0)