From f9f53a65cb9c50876b60aee5cb8aa3841074440e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivica=20Batini=C4=87?= Date: Thu, 20 Mar 2025 21:25:33 +0100 Subject: [PATCH] feat(next): add support for custom props on the html element (#11738) 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 ( {children} ); } ``` --- packages/next/src/layouts/Root/index.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/next/src/layouts/Root/index.tsx b/packages/next/src/layouts/Root/index.tsx index 7f72e347d..24cb25e44 100644 --- 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 readonly importMap: ImportMap readonly serverFunction: ServerFunctionClient + readonly htmlProps?: React.HtmlHTMLAttributes }) => { checkDependencies() @@ -105,6 +107,7 @@ export const RootLayout = async ({ dir={dir} lang={languageCode} suppressHydrationWarning={config?.admin?.suppressHydrationWarning ?? false} + {...htmlProps} >