diff --git a/packages/next/index.d.ts b/packages/next/index.d.ts
index 5d7a7b9cd2059..cba2b1dd4e056 100644
--- a/packages/next/index.d.ts
+++ b/packages/next/index.d.ts
@@ -1,5 +1,5 @@
 /// <reference types="./types/global" />
-/// <reference path="./dist/styled-jsx/global.d.ts" />
+/// <reference path="./dist/styled-jsx/types/global.d.ts" />
 /// <reference path="./amp.d.ts" />
 /// <reference path="./app.d.ts" />
 /// <reference path="./config.d.ts" />
diff --git a/packages/next/package.json b/packages/next/package.json
index 0acc58eedc285..63020bea1c6ea 100644
--- a/packages/next/package.json
+++ b/packages/next/package.json
@@ -257,7 +257,7 @@
     "string-hash": "1.1.3",
     "string_decoder": "1.3.0",
     "strip-ansi": "6.0.0",
-    "styled-jsx": "5.0.2",
+    "styled-jsx": "5.0.3",
     "tar": "6.1.11",
     "taskr": "1.1.0",
     "terser": "5.14.1",
diff --git a/packages/next/taskfile.js b/packages/next/taskfile.js
index 198100f9a0cb5..67f660129e6e4 100644
--- a/packages/next/taskfile.js
+++ b/packages/next/taskfile.js
@@ -44,7 +44,7 @@ export async function copy_regenerator_runtime(task, opts) {
 
 // eslint-disable-next-line camelcase
 export async function copy_styled_jsx_assets(task, opts) {
-  // we copy the styled-jsx types so that we can reference them
+  // we copy the styled-jsx assets and types so that we can reference them
   // in the next-env.d.ts file so it doesn't matter if the styled-jsx
   // package is hoisted out of Next.js' node_modules or not
   const styledJsxPath = dirname(require.resolve('styled-jsx/package.json'))
@@ -53,33 +53,22 @@ export async function copy_styled_jsx_assets(task, opts) {
     cwd: styledJsxPath,
   })
   const outputDir = join(__dirname, 'dist/styled-jsx')
-  let typeReferences = ``
+  // Separate type files into different folders to avoid conflicts between
+  // dev dep `styled-jsx` and `next/dist/styled-jsx` for duplicated declare modules
+  const typesDir = join(outputDir, 'types')
+  let typeReferences = ''
 
   await fs.ensureDir(outputDir)
+  await fs.ensureDir(typesDir)
 
   for (const file of typeFiles) {
     const fileNoExt = file.replace(/\.d\.ts/, '')
     const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
-    const exportsIndex = content.indexOf('export')
-
-    let replacedContent =
-      `${content.substring(0, exportsIndex)}\n` +
-      `declare module 'styled-jsx${
-        file === 'index.d.ts' ? '' : '/' + fileNoExt
-      }' {
-        ${content.substring(exportsIndex)}
-      }`
-    if (file === 'index.d.ts') {
-      replacedContent = replacedContent
-        .replace(/export function StyleRegistry/g, 'export function IRegistry')
-        .replace(/StyleRegistry/g, 'IStyleRegistry')
-        .replace(/IRegistry/g, 'Registry')
-    }
-    await fs.writeFile(join(outputDir, file), replacedContent)
+    await fs.writeFile(join(typesDir, file), content)
     typeReferences += `/// <reference types="./${fileNoExt}" />\n`
   }
 
-  await fs.writeFile(join(outputDir, 'global.d.ts'), typeReferences)
+  await fs.writeFile(join(typesDir, 'global.d.ts'), typeReferences)
 
   for (const file of jsFiles) {
     const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
@@ -1806,7 +1795,12 @@ export async function path_to_regexp(task, opts) {
 
 export async function precompile(task, opts) {
   await task.parallel(
-    ['browser_polyfills', 'path_to_regexp', 'copy_ncced'],
+    [
+      'browser_polyfills',
+      'path_to_regexp',
+      'copy_ncced',
+      'copy_styled_jsx_assets',
+    ],
     opts
   )
 }
@@ -1965,7 +1959,6 @@ export async function compile(task, opts) {
       // we compile this each time so that fresh runtime data is pulled
       // before each publish
       'ncc_amp_optimizer',
-      'copy_styled_jsx_assets',
     ],
     opts
   )
diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts
index 02a3d342988ce..e13257f7bee37 100644
--- a/packages/next/types/misc.d.ts
+++ b/packages/next/types/misc.d.ts
@@ -18,11 +18,6 @@ declare module 'next/dist/compiled/@next/react-refresh-utils/dist/ReactRefreshWe
   export = m
 }
 
-declare module 'next/dist/styled-jsx' {
-  import m from 'styled-jsx'
-  export = m
-}
-
 declare module 'next/dist/compiled/node-html-parser' {
   export * from 'node-html-parser'
 }
@@ -289,6 +284,11 @@ declare module 'next/dist/compiled/postcss-scss' {
   import m from 'postcss-scss'
   export = m
 }
+declare module 'next/dist/styled-jsx' {
+  import m from 'styled-jsx'
+  export = m
+}
+
 declare module 'next/dist/compiled/text-table' {
   function textTable(
     rows: Array<Array<{}>>,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1b29baf8d4b9..c723f18aa8d45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -561,7 +561,7 @@ importers:
       string_decoder: 1.3.0
       string-hash: 1.1.3
       strip-ansi: 6.0.0
-      styled-jsx: 5.0.2
+      styled-jsx: 5.0.3
       tar: 6.1.11
       taskr: 1.1.0
       terser: 5.14.1
@@ -750,7 +750,7 @@ importers:
       string_decoder: 1.3.0
       string-hash: 1.1.3
       strip-ansi: 6.0.0
-      styled-jsx: 5.0.2_@babel+core@7.18.0
+      styled-jsx: 5.0.3_@babel+core@7.18.0
       tar: 6.1.11
       taskr: 1.1.0
       terser: 5.14.1
@@ -20560,8 +20560,8 @@ packages:
       postcss-load-plugins: 2.3.0
     dev: true
 
-  /styled-jsx/5.0.2_@babel+core@7.18.0:
-    resolution: {integrity: sha512-LqPQrbBh3egD57NBcHET4qcgshPks+yblyhPlH2GY8oaDgKs8SK4C3dBh3oSJjgzJ3G5t1SYEZGHkP+QEpX9EQ==}
+  /styled-jsx/5.0.3_@babel+core@7.18.0:
+    resolution: {integrity: sha512-v82oihjxFj2WJtQiodZIDjJpnmVcE71HTCVylxdcQHU0ocnI0rGhJ0+5A3311NMQUx0KFJ+18RSHNlfIgcSU8g==}
     engines: {node: '>= 12.0.0'}
     peerDependencies:
       '@babel/core': '*'