vercel · devjiwonchoi · Sep 19, 2025 · Sep 8, 2025
diff --git a/packages/next/src/next-devtools/dev-overlay/shared.ts b/packages/next/src/next-devtools/dev-overlay/shared.ts
@@ -251,6 +251,9 @@ function getStackIgnoringStrictMode(stack: string | undefined) {
 const shouldDisableDevIndicator =
   process.env.__NEXT_DEV_INDICATOR?.toString() === 'false'
 
+const devToolsInitialPositionFromNextConfig = (process.env
+  .__NEXT_DEV_INDICATOR_POSITION ?? 'bottom-left') as Corners
+
 export const INITIAL_OVERLAY_STATE: Omit<
   OverlayState,
   'isErrorOverlayOpen' | 'routerType'
@@ -272,9 +275,9 @@ export const INITIAL_OVERLAY_STATE: Omit<
   refreshState: { type: 'idle' },
   versionInfo: { installed: '0.0.0', staleness: 'unknown' },
   debugInfo: { devtoolsFrontendUrl: undefined },
-  devToolsPosition: 'bottom-left',
+  devToolsPosition: devToolsInitialPositionFromNextConfig,
   devToolsPanelPosition: {
-    [STORE_KEY_SHARED_PANEL_LOCATION]: 'bottom-left',
+    [STORE_KEY_SHARED_PANEL_LOCATION]: devToolsInitialPositionFromNextConfig,
   },
   devToolsPanelSize: {},
   scale: NEXT_DEV_TOOLS_SCALE.Medium,

diff --git a/test/development/app-dir/devtools-position/app/layout.tsx b/test/development/app-dir/devtools-position/app/layout.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/development/app-dir/devtools-position/app/page.tsx b/test/development/app-dir/devtools-position/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}
diff --git a/test/development/app-dir/devtools-position/bottom-left.test.ts b/test/development/app-dir/devtools-position/bottom-left.test.ts
@@ -0,0 +1,20 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getDevIndicatorPosition } from './utils'
+
+describe('devtools-position-bottom-left', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    nextConfig: {
+      devIndicators: {
+        position: 'bottom-left',
+      },
+    },
+  })
+
+  it('should devtools indicator position initially be bottom-left when configured', async () => {
+    const browser = await next.browser('/')
+    const style = await getDevIndicatorPosition(browser)
+    expect(style).toContain('bottom: 20px')
+    expect(style).toContain('left: 20px')
+  })
+})
diff --git a/test/development/app-dir/devtools-position/bottom-right-position.test.ts b/test/development/app-dir/devtools-position/bottom-right-position.test.ts
@@ -0,0 +1,20 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getDevIndicatorPosition } from './utils'
+
+describe('devtools-position-bottom-right', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    nextConfig: {
+      devIndicators: {
+        position: 'bottom-right',
+      },
+    },
+  })
+
+  it('should devtools indicator position initially be bottom-right when configured', async () => {
+    const browser = await next.browser('/')
+    const style = await getDevIndicatorPosition(browser)
+    expect(style).toContain('bottom: 20px')
+    expect(style).toContain('right: 20px')
+  })
+})
diff --git a/test/development/app-dir/devtools-position/default-position.test.ts b/test/development/app-dir/devtools-position/default-position.test.ts
@@ -0,0 +1,15 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getDevIndicatorPosition } from './utils'
+
+describe('devtools-position-default', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should devtools indicator position initially be bottom-left by default', async () => {
+    const browser = await next.browser('/')
+    const style = await getDevIndicatorPosition(browser)
+    expect(style).toContain('bottom: 20px')
+    expect(style).toContain('left: 20px')
+  })
+})
diff --git a/test/development/app-dir/devtools-position/position-persistence.test.ts b/test/development/app-dir/devtools-position/position-persistence.test.ts
@@ -0,0 +1,31 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getDevIndicatorPosition } from './utils'
+
+describe('devtools-position-persistence', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    nextConfig: {
+      devIndicators: {
+        position: 'top-right',
+      },
+    },
+  })
+
+  it('should maintain devtools indicator position after navigation', async () => {
+    const browser = await next.browser('/')
+
+    let style = await getDevIndicatorPosition(browser)
+
+    expect(style).toContain('top: 20px')
+    expect(style).toContain('right: 20px')
+
+    // Navigate and check devtools indicator position is maintained
+    await browser.refresh()
+    await browser.waitForIdleNetwork()
+
+    style = await getDevIndicatorPosition(browser)
+
+    expect(style).toContain('top: 20px')
+    expect(style).toContain('right: 20px')
+  })
+})
diff --git a/test/development/app-dir/devtools-position/top-left-position.test.ts b/test/development/app-dir/devtools-position/top-left-position.test.ts
@@ -0,0 +1,20 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getDevIndicatorPosition } from './utils'
+
+describe('devtools-position-top-left', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    nextConfig: {
+      devIndicators: {
+        position: 'top-left',
+      },
+    },
+  })
+
+  it('should devtools indicator position initially be top-left when configured', async () => {
+    const browser = await next.browser('/')
+    const style = await getDevIndicatorPosition(browser)
+    expect(style).toContain('top: 20px')
+    expect(style).toContain('left: 20px')
+  })
+})
diff --git a/test/development/app-dir/devtools-position/top-right-position.test.ts b/test/development/app-dir/devtools-position/top-right-position.test.ts
@@ -0,0 +1,20 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getDevIndicatorPosition } from './utils'
+
+describe('devtools-position-top-right', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    nextConfig: {
+      devIndicators: {
+        position: 'top-right',
+      },
+    },
+  })
+
+  it('should devtools indicator position initially be top-right when configured', async () => {
+    const browser = await next.browser('/')
+    const style = await getDevIndicatorPosition(browser)
+    expect(style).toContain('top: 20px')
+    expect(style).toContain('right: 20px')
+  })
+})
diff --git a/test/development/app-dir/devtools-position/utils.ts b/test/development/app-dir/devtools-position/utils.ts
@@ -0,0 +1,19 @@
+import type { Playwright } from '../../../lib/next-webdriver'
+import { assertHasDevToolsIndicator } from 'next-test-utils'
+
+export async function getDevIndicatorPosition(browser: Playwright) {
+  // assert before eval() to prevent race condition
+  await assertHasDevToolsIndicator(browser)
+
+  const style = await browser.eval(() => {
+    return (
+      [].slice
+        .call(document.querySelectorAll('nextjs-portal'))
+        .find((p) => p.shadowRoot.querySelector('[data-nextjs-toast]'))
+        // portal
+        ?.shadowRoot?.querySelector('[data-nextjs-toast]')
+        ?.getAttribute('style') || ''
+    )
+  })
+  return style || ''
+}