vs code import hint not recommends next js alias path

I'm using nextjs in my frontend project. I must be able to import resources from the framework like its useRouter hook. In this context, My vs code only recommends the following path to be imported: 'next/dist/client/router'. But there's actually a shorter path: 'next/router'. I tried everything to make this work. Install auto-import plugins, remove import plugins, change typescript/javascript import settings on vs code, tinkering tsconfig.json, etc. None of them worked. My current configuration is:

• No import plugins
• Import Module specifier ending: shortest
• tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "sourceMap": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitAny": true,
    "preserveConstEnums": true,
    "strictNullChecks": false,
    "removeComments": false,
    "jsx": "react", // default is preserve
    "baseUrl": ".",
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["dist", ".next", "out", "node_modules", "__tests__"]
}