Use @_components

I have a NextJS 13 app with this structure:

app
   _components
      header.tsx
      footer.tsx
      login.tsx
   (routes)
      about
         page.tsx
      blog
         page.tsx
      contact
         page.tsx

In my tsconfig.json I have:

"paths": {
      "@_*": ["../*"]
    }

The idea is that for example in the contact page I use:

import Login from '@components/Login'

This does not work.

Also within the _components directory, it does not work. For example, if I want to import "Login" in "Header" like so:

import Login from '@components/Login'

I get the message that the module cannot be found. I understand that within _components I am in the current dir and that I need to use ./ and ('../' is for the parent dir).

Challenge is how to write the path correctly for both my scenarios (_components in current dir and _components in parent dir)?

Assuming your tsconfig.json is on the same level as the app folder.

Try the following:

// tsconfig.json
"paths": {
   "@/*": ["./app/*"]
}

Then update your imports like so:

import Login from '@/_components/login'