Absolute imports in Next.js

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

Wouldn’t it be great if we could avoid relative paths in imports, in our React components in Next.js?

So instead of for example:

import Layout from '../../components/layout'

We could just write:

import Layout from 'components/layout'

This is possible, and it’s called absolute imports.

Just add a file named jsconfig.json in the root of your project with this content:

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

That’s it, absolute imports will start working.

This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

Print Share Comment Cite Upload Translate Updates

APA

flaviocopes.com | Sciencx (2021-05-11T05:00:00+00:00) Absolute imports in Next.js. Retrieved from https://www.scien.cx/2021/05/11/absolute-imports-in-next-js/

MLA

" » Absolute imports in Next.js." flaviocopes.com | Sciencx - Tuesday May 11, 2021, https://www.scien.cx/2021/05/11/absolute-imports-in-next-js/

HARVARD

flaviocopes.com | Sciencx Tuesday May 11, 2021 » Absolute imports in Next.js., viewed ,<https://www.scien.cx/2021/05/11/absolute-imports-in-next-js/>

VANCOUVER

flaviocopes.com | Sciencx - » Absolute imports in Next.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/11/absolute-imports-in-next-js/

CHICAGO

" » Absolute imports in Next.js." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/05/11/absolute-imports-in-next-js/

IEEE

" » Absolute imports in Next.js." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/05/11/absolute-imports-in-next-js/. [Accessed: ]

rf:citation

» Absolute imports in Next.js | flaviocopes.com | Sciencx | https://www.scien.cx/2021/05/11/absolute-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.