Use @types folder in ./src

Question

I have a nextjs application and I am using typescript declaration file (*.d.ts) for describe my API.

And I would like use @types/ folder, like this:

import ApiResponse from "@types/ApiResponse";

Codesandbox accessible here: https://codesandbox.io/s/github/thisisclint21/types-folder?file=/pages/index.tsx

This is my tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "assets/*": ["../public/assets/*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [{"name": "next"}]},
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "typeRoots": ["src/@types", "../node_modules/@types", "../@types"],
  "exclude": ["node_modules"]
}

But I get this error when I try to use my types:

TS6137: Cannot import type declaration files. Consider importing 'ApiResponse' instead of '@types/ApiResponse'.

I also tried to use paths in tsconfig.json file but nothing works :(