[devtools] add feature flag for new panel ui (#80251)

Closes NEXT-4517

---------

Co-authored-by: Sebastian Sebbie Silbermann <[email protected]>

Author: devjiwonchoi

packages/next/src/build/define-env.ts

@@ -289,6 +289,8 @@ export function getDefineEnv({
       : {}),
     'process.env.__NEXT_DEVTOOL_SEGMENT_EXPLORER':
       config.experimental.devtoolSegmentExplorer ?? false,
+    'process.env.__NEXT_DEVTOOL_NEW_PANEL_UI':
+      config.experimental.devtoolNewPanelUI ?? false,
 
     // The devtools need to know whether or not to show an option to clear the
     // bundler cache. This option may be removed later once Turbopack's

packages/next/src/server/config-schema.ts

@@ -500,6 +500,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
           .optional(),
         globalNotFound: z.boolean().optional(),
         devtoolSegmentExplorer: z.boolean().optional(),
+        devtoolNewPanelUI: z.boolean().optional(),
       })
       .optional(),
     exportPathMap: z

packages/next/src/server/config-shared.ts

@@ -696,9 +696,14 @@ export interface ExperimentalConfig {
   globalNotFound?: boolean
 
   /**
-   * Enable segment viewer for the app directory in dev tool.
+   * Enable segment viewer for the app directory in Next.js DevTools.
    */
   devtoolSegmentExplorer?: boolean
+
+  /**
+   * Enable new panel UI for the Next.js DevTools.
+   */
+  devtoolNewPanelUI?: boolean
 }
 
 export type ExportPathMap = {