How to fix Cannot find module 'next' in TypeScript

Check that 'next', 'react', and 'react-dom' are installed as dependencies:

npm list next react react-dom

If any are missing, install them:

npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom

Verify the versions are compatible. For Next.js 14+, use React 18+.

Next.js v12 and later include built-in TypeScript types. Having @types/next installed can cause conflicts:

npm uninstall @types/next
# or
yarn remove @types/next
# or
pnpm remove @types/next

Check package.json to ensure @types/next is removed from devDependencies:

{
  "devDependencies": {
    // ❌ Remove this line if present
    "@types/next": "..."
  }
}

Next.js works best with 'bundler' or 'node' module resolution. Update your tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "bundler",  // Recommended for Next.js 13+
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  }
}

Important: Avoid using 'node16' or 'nodenext' moduleResolution with Next.js, as these cause compatibility issues with Next.js's package structure.

Corrupted dependencies can cause module resolution failures. Delete and reinstall:

# Remove existing dependencies
rm -rf node_modules
rm package-lock.json  # or yarn.lock / pnpm-lock.yaml

# Reinstall
npm install
# or
yarn install
# or
pnpm install

After reinstalling, verify Next.js is present:

ls node_modules/next/package.json

Your IDE may cache outdated module information. Restart the TypeScript language server:

VS Code:
1. Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
2. Type 'TypeScript: Restart TS Server'
3. Press Enter

WebStorm:
1. Right-click the tsconfig.json file
2. Select 'Restart TypeScript Service'

Alternatively, restart your IDE completely.

Ensure your tsconfig.json properly extends Next.js's base configuration:

{
  "extends": "./node_modules/next/tsconfig.json",
  "compilerOptions": {
    // Your custom options here
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

The .next/types directory is created during development and contains generated types for Next.js.