Skip to content

Absolute imports in Next.js

TypeScript Masterclass

Join the waiting list!

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.


→ Get my Next.js (pages router) Handbook

I wrote 20 books to help you become a better developer:

  • JavaScript Handbook
  • TypeScript Handbook
  • CSS Handbook
  • Node.js Handbook
  • Astro Handbook
  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux/Mac CLI Commands Handbook
  • C Handbook
...download them all now!

Related posts about next: