(NEXT.js) Problem in finding the module even if the path is correct with the official documentation of NEXT.js

Question

I've recently started learning the next.js and I'm in chapter 4(Creating Layouts and Pages) of the official documentation of next.js . in chapter 4 i'm asked to create a file name layout.tsx and paste this code

import React from 'react';
import SideNav from '@/app/ui/dashboard/sidenav';

export default function Layout({ children }: { children: React.ReactNode }) {
 return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
  <div className="w-full flex-none md:w-64">
    <SideNav />
  </div>
  <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
 );
 }

So, when i paste this code it says

"message": "Cannot find module '@/app/ui/dashboard/sidenav' or its corresponding type declarations.",

This is layout.tsx inside app/dashboard layout.tsx

import directory that i copied from the documentation directory of layout.tsx

and this is sidenav.tsx which is in app/ui/dashboard which is the file i have to import is layout.tsx sidenav.tsx

The directory goes like this directory_img

Answer 1

If I am not mistaken, you are using TS here, and if you want to use @ to prefix your path when importing, you have to configure your tsconfig.json in your project root and add a path inside your compilerOptions like below:

{
 "compilerOptions": {
    "path": {
      "@/*": ["./app/**"] 
    }

 }
}

but simplest workaround is using a relative path ../app/ui/dashboard/sidenav