---
title: "Absolute Imports in Next.js"
description: "Absolute imports can save the day when you have to deal with project organization and multiple levels of folders."
source: "https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js/"
last_updated: "2026-07-27T23:38:20.000Z"
---
Welcome to Blogvent, day 7!

We’ve all been there, you’re organizing your files in a project, and you see a dreaded import statement:

```
import Button from '../../../../designsystem/buttons/Button'
```

Gross. Now that you’ve re-arranged some folders and files, what breaks? What imports have to change? How many files have to be updated?

Next.js has a handy little feature built right into the framework for that, called **absolute imports**.

With absolute imports, you can alias certain folders to a name, and not have to worry about all of the files that change when you do!

## Implementing absolute imports

Make a (or use your existing) `jsconfig.json` at the top of your project. If you’re using TypeScript, you can make a `tsconfig.json` instead. Put something like this inside of that file:

```
{  "compilerOptions": {    "baseUrl": "./",    "paths": {      "@components/*": ["src/components/*"],      "@designsystem/*": ["src/designsystem/*"],      "@buttons/*": ["src/designsystem/buttons"]    }  }}
```

The `baseUrl` here allows you to import directly from the root of the project (or wherever you put it), and the `paths` are all of the different paths that have a “nickname”.

Your import statement from earlier can now look like:

```
import Button from '@buttons/Button'
```

Now, if you ever rearrange big folders, you can change it just in the one `jsconfig` file, or no changes will be needed because your imports in each individual file stay the same!

## Cool! How does this work in a production app?

Glad you asked! If you’d like to see a working example of this, check out the [Jamstack Explorers](https://www.youtube.com/c/NetlifyApp/playlists) repository:

-   [The jsconfig file](https://github.com/netlify/explorers/blob/main/jsconfig.json)
-   [Example imports on the About page](https://github.com/netlify/explorers/blob/main/src/pages/about.js#L1-L3)

### Share

-   [X (fka Twitter)](https://twitter.com/intent/tweet?text=Absolute Imports in Next.js&url=https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js//)
-   [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2F2020%2F12%2F07%2Fabsolute-imports-in-next.js%2F%2F)
-   [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js//)
-   [Bluesky](https://bsky.app/intent/compose?text=Absolute Imports in Next.js+https://www.netlify.com/blog/2020/12/07/absolute-imports-in-next.js//)

* * *

### Tags

-   [Next.js](/blog/tags/next.js/)
-   [blogvent](/blog/tags/blogvent/)

## Keep reading

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 2, 2020

[

### Next.js: Should I use SSR or SSG?

](/blog/2020/12/02/next.js-should-i-use-ssr-or-ssg/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

![](/images/blog-fallback-thumbnail.svg)

Guides & Tutorials December 4, 2020

[

### “Escaping” Next.js to access the browser

](/blog/2020/12/04/escaping-next.js-to-access-the-browser/)

-   ![Profile picture of Cassidy Williams](/_astro/a62099fab0f946e063c4b84ff4b4d9c94f9aa7a5-400x400_ZdakPa.webp)
    
    Cassidy Williams
    

## Recent posts

Tools & Services July 27, 2026

[

### The 13-year story of Netlify Drop

](/blog/thirteen-years-of-netlify-drop)

-   ![Profile picture of Wade Wegner](/_astro/0302ff22eb844e648b11d7cff3cedbbc3c9de876-2667x4000_Z5j6wM.webp)
    
    Wade Wegner
    

News & Announcements July 14, 2026

[

### More headroom, a lower per-credit rate, and a bill you can predict: introducing new Pro plan tiers

](/blog/new-pro-plan-tiers)

-   ![Profile picture of Gehrig Kunz](/_astro/b4e9f58d914d1334ea70d53ea55a1f26b26f1445-512x512_17SwOI.webp)
    
    Gehrig Kunz
    

News & Announcements July 13, 2026

[

### Netlify inside of Claude Design

](/blog/netlify-inside-of-claude-design)

-   ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp)
    
    Sean Roberts
    

![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp)

### How do the best dev and marketing teams work together?

[Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)