Repository: vercel/next.js
Pull request: [dev-overlay] always display bundler name on version info

### Why?

Previously, we indicated the bundler name only for Turbopack. To better indicate the user which bundler the app is running (especially when sharing errors via screenshot), always display bundler name on version info.

| Webpack | Rspack |
|--------|--------|
| ![CleanShot 2025-04-02 at 19 04 34@2x](https://github.com/user-attachments/assets/621a1057-f05f-4dc4-98d9-beaa7dc2eba1) | ![CleanShot 2025-04-02 at 19 04 04@2x](https://github.com/user-attachments/assets/1529a189-65c9-4c02-9c71-8a4f95b2ef05) | 

Closes NDX-986

Changed files:
filename: packages/next/src/build/webpack/plugins/define-env-plugin.ts
patch: @@ -133,6 +133,11 @@ export function getDefineEnv({
         }),
     'process.turbopack': isTurbopack,
     'process.env.TURBOPACK': isTurbopack,
+    'process.env.__NEXT_BUNDLER': isTurbopack
+      ? 'Turbopack'
+      : process.env.NEXT_RSPACK
+        ? 'Rspack'
+        : 'Webpack',
     // TODO: enforce `NODE_ENV` on `process.env`, and add a test:
     'process.env.NODE_ENV':
       dev || config.experimental.allowDevelopmentBuild

filename: packages/next/src/client/components/react-dev-overlay/ui/components/errors/error-overlay-nav/error-overlay-nav.tsx
patch: @@ -17,8 +17,12 @@ export function ErrorOverlayNav({
   activeIdx,
   setActiveIndex,
   versionInfo,
-  isTurbopack,
 }: ErrorOverlayNavProps) {
+  const bundlerName = (process.env.__NEXT_BUNDLER || 'Webpack') as
+    | 'Webpack'
+    | 'Turbopack'
+    | 'Rspack'
+
   return (
     <div data-nextjs-error-overlay-nav>
       <Notch side="left">
@@ -33,7 +37,7 @@ export function ErrorOverlayNav({
         <Notch side="right">
           <VersionStalenessInfo
             versionInfo={versionInfo}
-            isTurbopack={isTurbopack}
+            bundlerName={bundlerName}
           />
         </Notch>
       )}

filename: packages/next/src/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.stories.tsx
patch: @@ -88,6 +88,15 @@ export const Turbopack: Story = {
     versionInfo: {
       ...mockVersionInfo.fresh,
     },
-    isTurbopack: true,
+    bundlerName: 'Turbopack',
+  },
+}
+
+export const Rspack: Story = {
+  args: {
+    versionInfo: {
+      ...mockVersionInfo.fresh,
+    },
+    bundlerName: 'Rspack',
   },
 }

filename: packages/next/src/client/components/react-dev-overlay/ui/components/version-staleness-info/version-staleness-info.tsx
patch: @@ -3,23 +3,21 @@ import { cx } from '../../utils/cx'
 
 export function VersionStalenessInfo({
   versionInfo,
-  isTurbopack,
+  bundlerName,
 }: {
   versionInfo: VersionInfo
-  isTurbopack?: boolean
+  // Passed from parent for easier handling in Storybook.
+  bundlerName: 'Webpack' | 'Turbopack' | 'Rspack'
 }) {
   const { staleness } = versionInfo
   let { text, indicatorClass, title } = getStaleness(versionInfo)
 
+  const isTurbopack = bundlerName === 'Turbopack'
   const shouldBeLink = staleness.startsWith('stale')
   if (shouldBeLink) {
     return (
       <a
-        className={cx(
-          'nextjs-container-build-error-version-status',
-          'dialog-exclude-closing-from-outside-click',
-          isTurbopack && 'turbopack-border'
-        )}
+        className="nextjs-container-build-error-version-status dialog-exclude-closing-from-outside-click"
         target="_blank"
         rel="noopener noreferrer"
         href="https://nextjs.org/docs/messages/version-staleness"
@@ -30,7 +28,9 @@ export function VersionStalenessInfo({
         <span data-nextjs-version-checker title={title}>
           {text}
         </span>
-        {isTurbopack && <span className="turbopack-text">Turbopack</span>}
+        <span className={cx(isTurbopack && 'turbopack-text')}>
+          {bundlerName}
+        </span>
       </a>
     )
   }
@@ -41,7 +41,7 @@ export function VersionStalenessInfo({
       <span data-nextjs-version-checker title={title}>
         {text}
       </span>
-      {isTurbopack && <span className="turbopack-text">Turbopack</span>}
+      <span className={cx(isTurbopack && 'turbopack-text')}>{bundlerName}</span>
     </span>
   )
 }

filename: test/development/acceptance-app/version-staleness.test.ts
patch: @@ -52,10 +52,16 @@ describe('Error Overlay version staleness', () => {
          "Next.js 1.0.0 (outdated)
          Turbopack"
         `)
+    } else if (process.env.NEXT_RSPACK) {
+      expect(await getStaleness(browser)).toMatchInlineSnapshot(`
+         "Next.js 1.0.0 (outdated)
+         Rspack"
+        `)
     } else {
-      expect(await getStaleness(browser)).toMatchInlineSnapshot(
-        `"Next.js 1.0.0 (outdated)"`
-      )
+      expect(await getStaleness(browser)).toMatchInlineSnapshot(`
+         "Next.js 1.0.0 (outdated)
+         Webpack"
+        `)
     }
   })
 
@@ -85,13 +91,19 @@ describe('Error Overlay version staleness', () => {
 
     if (process.env.TURBOPACK) {
       expect(await getStaleness(browser)).toMatchInlineSnapshot(`
-       "Next.js 2.0.0 (outdated)
-       Turbopack"
-      `)
+         "Next.js 2.0.0 (outdated)
+         Turbopack"
+        `)
+    } else if (process.env.NEXT_RSPACK) {
+      expect(await getStaleness(browser)).toMatchInlineSnapshot(`
+         "Next.js 2.0.0 (outdated)
+         Rspack"
+        `)
     } else {
-      expect(await getStaleness(browser)).toMatchInlineSnapshot(
-        `"Next.js 2.0.0 (outdated)"`
-      )
+      expect(await getStaleness(browser)).toMatchInlineSnapshot(`
+         "Next.js 2.0.0 (outdated)
+         Webpack"
+        `)
     }
   })
 
@@ -118,13 +130,19 @@ describe('Error Overlay version staleness', () => {
 
     if (process.env.TURBOPACK) {
       expect(await getStaleness(browser)).toMatchInlineSnapshot(`
-       "Next.js 3.0.0 (outdated)
-       Turbopack"
-      `)
+         "Next.js 3.0.0 (outdated)
+         Turbopack"
+        `)
+    } else if (process.env.NEXT_RSPACK) {
+      expect(await getStaleness(browser)).toMatchInlineSnapshot(`
+         "Next.js 3.0.0 (outdated)
+         Rspack"
+        `)
     } else {
-      expect(await getStaleness(browser)).toMatchInlineSnapshot(
-        `"Next.js 3.0.0 (outdated)"`
-      )
+      expect(await getStaleness(browser)).toMatchInlineSnapshot(`
+         "Next.js 3.0.0 (outdated)
+         Webpack"
+        `)
     }
   })
 })