feat(next): add support for custom props on the html element (#11738)

isBatak · web-flow · commit f9f53a65cb9c · 2025-03-20T16:25:33.000-04:00
This PR adds support for passing additional props to the HTML element of Next.js `RootLayout`. #### Context In our setup, we use several custom Chakra UI components. This change enables us to add a custom font `className` to the HTML element, following the official Chakra UI documentation: [Using custom fonts in Chakra UI with Next.js](https://v2.chakra-ui.com/getting-started/nextjs-app-guide#using-custom-font) #### Example Usage With this update, we can now pass a `className` for custom fonts like this: ```tsx import { Rubik } from 'next/font/google' const rubik = Rubik({ subsets: ['latin'], variable: '--font-rubik', }) const Layout = ({ children }: Args) => { return ( <RootLayout htmlProps={{ className: rubik.variable }}> {children} </RootLayout> ); } ```
diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx
@@ -25,11 +25,13 @@ export const RootLayout = async ({
   config: configPromise,
   importMap,
   serverFunction,
+  htmlProps = {},
 }: {
   readonly children: React.ReactNode
   readonly config: Promise<SanitizedConfig>
   readonly importMap: ImportMap
   readonly serverFunction: ServerFunctionClient
+  readonly htmlProps?: React.HtmlHTMLAttributes<HTMLHtmlElement>
 }) => {
   checkDependencies()
 
@@ -105,6 +107,7 @@ export const RootLayout = async ({
       dir={dir}
       lang={languageCode}
       suppressHydrationWarning={config?.admin?.suppressHydrationWarning ?? false}
+      {...htmlProps}
     >
       <head>
         <style>{`@layer payload-default, payload;`}</style>
