diff --git a/packages/next/src/build/webpack/plugins/next-types-plugin.test.ts b/packages/next/src/build/webpack/plugins/next-types-plugin.test.ts
new file mode 100644
index 000000000000..c37c6c2a2944
--- /dev/null
+++ b/packages/next/src/build/webpack/plugins/next-types-plugin.test.ts
@@ -0,0 +1,50 @@
+import { NextTypesPlugin } from './next-types-plugin'
+
+describe('next-types-plugin', () => {
+  it('should generate correct base import path', () => {
+    const plugin = new NextTypesPlugin({
+      dir: '/Users/myself/myproject',
+      distDir: '.next',
+      appDir: '/Users/myself/myproject/app',
+      dev: false,
+      isEdgeServer: false,
+      pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
+      typedRoutes: false,
+      originalRewrites: undefined,
+      originalRedirects: undefined,
+    })
+    expect(plugin.relativeBaseImportPath).toEqual('../../../app')
+  })
+
+  it('should generate correct base import path for nx monorepos', () => {
+    const plugin = new NextTypesPlugin({
+      dir: '/Users/myself/code/nx-monorepo/apps/myproject',
+      distDir: '../../dist/apps/myproject/.next',
+      appDir: '/Users/myself/code/nx-monorepo/apps/myproject/app',
+      dev: false,
+      isEdgeServer: false,
+      pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
+      typedRoutes: false,
+      originalRewrites: undefined,
+      originalRedirects: undefined,
+    })
+    expect(plugin.relativeBaseImportPath).toEqual(
+      '../../../../../../apps/myproject/app'
+    )
+  })
+
+  it('should generate correct base import path for custom projects', () => {
+    const plugin = new NextTypesPlugin({
+      dir: '/Users/myself/code/custom-project/frontend/ui',
+      distDir: '../dist/ui/.next',
+      appDir: '/Users/myself/code/custom-project/frontend/ui/app',
+      dev: false,
+      isEdgeServer: false,
+      pageExtensions: ['tsx', 'ts', 'jsx', 'js'],
+      typedRoutes: false,
+      originalRewrites: undefined,
+      originalRedirects: undefined,
+    })
+    expect(plugin.relativeBaseImportPath).toEqual('../../../../../ui/app')
+  })
+})
diff --git a/packages/next/src/build/webpack/plugins/next-types-plugin.ts b/packages/next/src/build/webpack/plugins/next-types-plugin.ts
index 0d5bd01f8f72..b6617679c563 100644
--- a/packages/next/src/build/webpack/plugins/next-types-plugin.ts
+++ b/packages/next/src/build/webpack/plugins/next-types-plugin.ts
@@ -435,6 +435,8 @@ declare module 'next/link' {
 }`
 }
 
+const appTypesBasePath = path.join('types', 'app')
+
 export class NextTypesPlugin {
   dir: string
   distDir: string
@@ -463,6 +465,11 @@ export class NextTypesPlugin {
     }
   }
 
+  get relativeBaseImportPath() {
+    const distDirAbs = path.join(this.dir, this.distDir)
+    return path.relative(path.join(distDirAbs, appTypesBasePath), this.appDir)
+  }
+
   collectPage(filePath: string) {
     if (!this.typedRoutes) return
 
@@ -503,9 +510,6 @@ export class NextTypesPlugin {
   }
 
   apply(compiler: webpack.Compiler) {
-    // From dist root to project root
-    const distDirRelative = path.relative(this.distDir + '/..', '.')
-
     // From asset root to dist root
     const assetDirRelative = this.dev
       ? '..'
@@ -542,14 +546,12 @@ export class NextTypesPlugin {
       }
 
       const typePath = path.join(
-        'types',
-        'app',
+        appTypesBasePath,
         relativePathToApp.replace(/\.(js|jsx|ts|tsx|mjs)$/, '.ts')
       )
       const relativeImportPath = path
         .join(
-          distDirRelative,
-          path.relative(typePath, ''),
+          this.relativeBaseImportPath,
           relativePathToRoot.replace(/\.(js|jsx|ts|tsx|mjs)$/, '')
         )
         .replace(/\\/g, '/')