Add warning when importing "next" directly

errors/import-next.md

@@ -0,0 +1,17 @@
+# Invalid "next" Import
+
+#### Why This Error Occurred
+
+Somewhere in your application in imported `next` directly which is only meant to be used with legacy custom servers.
+
+You should not need to import `next` inside of pages or components.
+
+#### Possible Ways to Fix It
+
+Ensure any usage of `import next from "next"` is specific to custom server usage and isn't included in your pages or components.
+
+Also ensure any type imports are kept inside of TypeScript files.
+
+### Useful Links
+
+- [Custom Server Documentation](https://nextjs.org/docs/advanced-features/custom-server)

errors/manifest.json

@@ -641,6 +641,10 @@
         {
           "title": "client-flush-effects",
           "path": "/errors/client-flush-effects.md"
+        },
+        {
+          "title": "import-next",
+          "path": "/errors/import-next.md"
         }
       ]
     }

packages/next/build/webpack-config.ts

@@ -841,6 +841,12 @@ export default async function getBaseWebpackConfig(
       // absolute paths.
       (process.platform === 'win32' && path.win32.isAbsolute(request))
 
+    // make sure import "next" shows a warning when imported
+    // in pages/components
+    if (request === 'next') {
+      return `commonjs next/dist/lib/import-next-warning`
+    }
+
     // Relative requires don't need custom resolution, because they
     // are relative to requests we've already resolved here.
     // Absolute requires (require('/foo')) are extremely uncommon, but

packages/next/lib/import-next-warning.ts

@@ -0,0 +1,5 @@
+import * as Log from '../build/output/log'
+
+Log.warn(
+  `"next" should not be imported directly, imported in ${module.parent?.filename}\nSee more info here: https://nextjs.org/docs/messages/import-next`
+)

test/production/required-server-files.test.ts

@@ -19,6 +19,7 @@ describe('should set-up next', () => {
   let server
   let appPort
   let errors = []
+  let stderr = ''
   let requiredFilesManifest
 
   beforeAll(async () => {
@@ -109,6 +110,7 @@ describe('should set-up next', () => {
           if (msg.includes('top-level')) {
             errors.push(msg)
           }
+          stderr += msg
         },
       }
     )
@@ -118,6 +120,14 @@ describe('should set-up next', () => {
     if (server) await killApp(server)
   })
 
+  it('should warn when "next" is imported directly', async () => {
+    await renderViaHTTP(appPort, '/gssp')
+    await check(
+      () => stderr,
+      /"next" should not be imported directly, imported in/
+    )
+  })
+
   it('`compress` should be `true` by default', async () => {
     expect(
       await fs.readFileSync(join(next.testDir, 'standalone/server.js'), 'utf8')

test/production/required-server-files/pages/gssp.js

@@ -1,5 +1,7 @@
 import fs from 'fs'
 import path from 'path'
+// eslint-disable-next-line
+import next from 'next'
 import { useRouter } from 'next/router'
 
 export async function getServerSideProps({ res }) {