| import type { Metadata } from 'next' | |
| import type React from 'react' | |
| import './globals.css' | |
| export const metadata: Metadata = { | |
| title: 'Next.js Bundle Analyzer', | |
| description: | |
| 'Visualize and analyze your Next.js bundle sizes with interactive treemap and dependency analysis', | |
| } | |
| export default function RootLayout({ | |
| children, | |
| }: Readonly<{ | |
| children: React.ReactNode | |
| }>) { | |
| return ( | |
| <html | |
| lang="en" | |
| // Suppress hydration warnings here specifically because we'll modify the | |
| // classname for the theme before React hydates. This is to prevent a flash | |
| // of incorrect theme. | |
| suppressHydrationWarning | |
| > | |
| <head> | |
| <script | |
| // biome-ignore lint/security/noDangerouslySetInnerHtml: Needed to prevent flash of incorrect theme | |
| dangerouslySetInnerHTML={{ | |
| __html: ` | |
| (function() { | |
| const theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; | |
| document.documentElement.classList.toggle('dark', theme === 'dark'); | |
| window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => | |
| ) | |
| } | |