How to fix Cannot find module 'next' in TypeScript

TypeScriptINTERMEDIATEMEDIUMUpdated Dec 9, 2025· 130 views

This TypeScript error occurs when the compiler cannot locate the Next.js module or its type definitions. It typically happens due to missing installations, incorrect TypeScript configuration, or conflicts between Next.js versions and moduleResolution settings.

Quick fix

Fixes Cannot find module 'next'

npm list next react react-dom
  1. Verify Next.js is installed
  2. Remove @types/next if using Next.js v12 or newer
  3. Configure moduleResolution for Next.js compatibility
  4. Clean install dependencies
typescript — error
npm list next react react-dom
Cannot find module 'next'

What this error means

The 'Cannot find module 'next'' error indicates that TypeScript's module resolution system failed to locate the Next.js package or its type definitions. This error commonly appears when importing from 'next', 'next/router', 'next/head', 'next/link', or other Next.js modules. Since Next.js v12, the framework includes built-in TypeScript types, eliminating the need for a separate @types/next package. However, specific TypeScript configuration settings—particularly moduleResolution strategies like 'nodenext' or 'node16'—can cause compatibility issues with Next.js's module structure. The error prevents TypeScript from understanding Next.js APIs and may block development or build processes.

Typical symptoms

  • Import statements from 'next' modules show red squiggles in your editor
  • TypeScript compilation fails with TS2307 error code
  • Error appears after upgrading Next.js or TypeScript versions
  • Build fails in CI/CD pipelines but development server runs
  • Error occurs only with specific Next.js submodules like 'next/app' or 'next/head'
  • IDE shows error but code runs successfully with 'npm run dev'

Common causes

  1. Next.js package is not installed in node_modules
  2. Using outdated @types/next package with Next.js v12+ (causes type conflicts)
  3. Using moduleResolution 'nodenext' or 'node16' with Next.js (known compatibility issue)
  4. Corrupted node_modules directory or lock file mismatch
  5. Importing Next.js modules before installing dependencies
  6. Incorrect TypeScript configuration for bundler-based projects
  7. Missing or misconfigured tsconfig.json in Next.js project root
  8. Using incompatible TypeScript and Next.js version combinations

How to fix "Cannot find module 'next'"

1Verify Next.js is installed

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

bash
npm list next react react-dom

If any are missing, install them:

bash
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+.

2Remove @types/next if using Next.js v12 or newer

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

bash
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:

json
{
  "devDependencies": {
    // ❌ Remove this line if present
    "@types/next": "..."
  }
}
3Configure moduleResolution for Next.js compatibility

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

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.

4Clean install dependencies

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

bash
# 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:

bash
ls node_modules/next/package.json
5Restart TypeScript server in your IDE

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.

6Verify tsconfig.json extends Next.js configuration

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

json
{
  "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.

Advanced notes

Module Resolution Compatibility: Next.js uses a complex module structure with conditional exports, which is incompatible with TypeScript's 'node16' and 'nodenext' moduleResolution strategies. This is a known limitation tracked in GitHub issue #46078. For modern Next.js projects (v13+), use 'bundler' moduleResolution, which was designed for bundler-based tools like Next.js, Vite, and webpack. Type Generation: Next.js generates types at runtime in the .next/types directory based on your app structure (App Router vs Pages Router). These types are essential for features like typed route parameters and dynamic imports. Ensure your dev server has run at least once to generate these types. Monorepo Considerations: In monorepo setups with shared packages, ensure each workspace has its own tsconfig.json and that cross-package imports use proper TypeScript project references. Path aliases configured in tsconfig.json should also be mirrored in next.config.js for runtime resolution. Version Compatibility: Next.js 14 requires TypeScript 5.0+, while Next.js 13 works with TypeScript 4.5+. Check the official Next.js TypeScript documentation for version requirements.

Frequently asked questions

What does "Cannot find module 'next'" mean?
js package or its type definitions. js modules. js v12, the framework includes built-in TypeScript types, eliminating the need for a separate @types/next package.
How do I fix "Cannot find module 'next'"?
This TypeScript error occurs when the compiler cannot locate the Next.js module or its type definitions. It typically happens due to missing installations, incorrect TypeScript configuration, or conflicts between Next.js versions and moduleResolution settings.
What causes "Cannot find module 'next'"?
Next.js package is not installed in node_modules Using outdated @types/next package with Next.js v12+ (causes type conflicts) Using moduleResolution 'nodenext' or 'node16' with Next.js (known compatibility issue)
Is the "Cannot find module 'next'" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading