Apply optimization to middleware when using babel (#51067)

Like how we handled RSC loader transform before, we also apply swc
loader to middleware to make sure the imports optimization is applied so
og package won't be bundled

Fixes #50492

packages/next/src/build/webpack-config.ts

@@ -899,7 +899,14 @@ export default async function getBaseWebpackConfig(
     : []
   const swcLoaderForMiddlewareLayer = useSWCLoader
     ? getSwcLoader({ hasServerComponents: false })
-    : getBabelLoader()
+    : // When using Babel, we will have to use SWC to do the optimization
+      // for middleware to tree shake the unused default optimized imports like "next/server".
+      // This will cause some performance overhead but
+      // acceptable as Babel will not be recommended.
+      [
+        getSwcLoader({ hasServerComponents: false, isServerLayer: false }),
+        getBabelLoader(),
+      ]
 
   // Loader for API routes needs to be differently configured as it shouldn't
   // have RSC transpiler enabled, so syntax checks such as invalid imports won't

test/e2e/app-dir/with-babel/middleware.js

@@ -0,0 +1,5 @@
+import { NextResponse } from 'next/server'
+
+export async function middleware() {
+  return NextResponse.next()
+}

test/e2e/app-dir/with-babel/with-babel.test.ts

@@ -6,10 +6,18 @@ createNextDescribe(
     files: __dirname,
     skipDeployment: true,
   },
-  ({ next }) => {
+  ({ next, isNextStart }) => {
     it('should support babel in app dir', async () => {
       const $ = await next.render$('/')
       expect($('h1').text()).toBe('hello')
     })
+
+    if (isNextStart) {
+      it('should contain og package files in middleware', async () => {
+        const middleware = await next.readFile('.next/server/middleware.js')
+        // @vercel/og default font should be bundled
+        expect(middleware).not.toContain('noto-sans-v27-latin-regular.ttf')
+      })
+    }
   }
 )