diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 4f9b720298332..12d6af29c6867 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -473,10 +473,17 @@ export default async function getBaseWebpackConfig(
   )
   let webpackConfig: webpack.Configuration = {
     externals: !isServer
-      ? undefined
+      ? // make sure importing "next" is handled gracefully for client
+        // bundles in case a user imported types and it wasn't removed
+        // TODO: should we warn/error for this instead?
+        ['next']
       : !isServerless
       ? [
           (context, request, callback) => {
+            if (request === 'next') {
+              return callback(undefined, `commonjs ${request}`)
+            }
+
             const notExternalModules = [
               'next/app',
               'next/document',
diff --git a/test/integration/production/pages/next-import.js b/test/integration/production/pages/next-import.js
new file mode 100644
index 0000000000000..24cccb8866a0d
--- /dev/null
+++ b/test/integration/production/pages/next-import.js
@@ -0,0 +1,14 @@
+import Link from 'next/link'
+// Leave below import, testing that importing "next"
+// doesn't stall the build
+// eslint-disable-next-line no-unused-vars
+import next from 'next'
+
+export default () => (
+  <div>
+    <Link href="/about">
+      <a>About Page</a>
+    </Link>
+    <p className="index-page">Hello World</p>
+  </div>
+)