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”;

Relative import paths to files in any application can be tricky to manage. Often w…


This content originally appeared on DEV Community and was authored by Salma Alam-Naylor

Does this look familiar? ?

import MyComponent from "../../../../../components/MyComponent";
import ADifferentFile from "../../../some/other/dir/ADifferentFile";

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/*"]
    }
  }
}

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";

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


This content originally appeared on DEV Community and was authored by Salma Alam-Naylor


Print Share Comment Cite Upload Translate Updates
APA

Salma Alam-Naylor | Sciencx (2021-07-12T08:15:53+00:00) How to avoid using relative path imports in Next.js. Retrieved from https://www.scien.cx/2021/07/12/how-to-avoid-using-relative-path-imports-in-next-js/

MLA
" » How to avoid using relative path imports in Next.js." Salma Alam-Naylor | Sciencx - Monday July 12, 2021, https://www.scien.cx/2021/07/12/how-to-avoid-using-relative-path-imports-in-next-js/
HARVARD
Salma Alam-Naylor | Sciencx Monday July 12, 2021 » How to avoid using relative path imports in Next.js., viewed ,<https://www.scien.cx/2021/07/12/how-to-avoid-using-relative-path-imports-in-next-js/>
VANCOUVER
Salma Alam-Naylor | Sciencx - » How to avoid using relative path imports in Next.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/12/how-to-avoid-using-relative-path-imports-in-next-js/
CHICAGO
" » How to avoid using relative path imports in Next.js." Salma Alam-Naylor | Sciencx - Accessed . https://www.scien.cx/2021/07/12/how-to-avoid-using-relative-path-imports-in-next-js/
IEEE
" » How to avoid using relative path imports in Next.js." Salma Alam-Naylor | Sciencx [Online]. Available: https://www.scien.cx/2021/07/12/how-to-avoid-using-relative-path-imports-in-next-js/. [Accessed: ]
rf:citation
» How to avoid using relative path imports in Next.js | Salma Alam-Naylor | Sciencx | https://www.scien.cx/2021/07/12/how-to-avoid-using-relative-path-imports-in-next-js/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts