Root Html

The RootHtml component is mostly for creating the root html for next.js applications that defaults to setting the dir="ltr" and lang="en". Additional props can be passed to the root <html> and <body> elements and children can be rendered before and after the <body> if needed.

Example Next.js Setup

src/app/layout.tsx

import { RootHtml } from "@react-md/core/RootHtml";
import { Roboto_Flex } from "next/font/google";
import { type PropsWithChildren, type ReactElement } from "react";

const roboto = Roboto_Flex({
  subsets: ["latin"],
  variable: "--roboto",
});

export default function RootLayout(props: PropsWithChildren): ReactElement {
  const { children } = props;

  return <RootHtml className={roboto.variable}>{children}</RootHtml>;
}

This Website's Implementation

The RootHtml component supports additional props like beforeBodyChildren, affterBodyChildren, bodyProps, bodyClassName, etc allowing for additional customization as needed.

Here's this website's RootLayout implementation for a reference:

import { RootHtml } from "@react-md/core/RootHtml";
import { cnb } from "cnbuilder";
import { Roboto_Flex, Source_Code_Pro } from "next/font/google";
import { type ReactElement, type ReactNode } from "react";

import { GtagAnalytics } from "@/components/GtagAnalytics.jsx";
import { LoadThemeStyles } from "@/components/LoadThemeStyles/LoadThemeStyles.jsx";
import { MainLayout } from "@/components/MainLayout/MainLayout.jsx";
import { RootProviders } from "@/components/RootProviders.jsx";
import { PRISM_THEMES_ID, getPrismThemeHref } from "@/utils/prismThemes.js";
import { getInitialState } from "@/utils/serverState.js";

import "./layout.scss";

export { metadata } from "@/constants/metadata.js";

// import localFont from "next/font/local";
// const roboto = localFont({
//   src: "./RobotoFlex.ttf",
//   display: "swap",
//   variable: "--roboto",
// });
// const sourceCodePro = localFont({
//   src: "./SourceCodePro.ttf",
//   display: "swap",
//   variable: "--source-code-pro",
// });

const roboto = Roboto_Flex({
  subsets: ["latin"],
  display: "swap",
  variable: "--roboto",
});
const sourceCodePro = Source_Code_Pro({
  subsets: ["latin"],
  display: "swap",
  variable: "--source-code-pro",
});

export interface RootLayoutProps {
  children: ReactNode;
}

export default async function RootLayout(
  props: RootLayoutProps
): Promise<ReactElement> {
  const { children } = props;
  const { themeStyles, customProperties, ...providerProps } =
    await getInitialState();
  const { defaultPrismTheme } = providerProps;

  return (
    <RootHtml
      style={customProperties}
      className={cnb(
        roboto.variable,
        sourceCodePro.variable,
        themeStyles.container
      )}
      beforeBodyChildren={
        <head>
          <link
            id={PRISM_THEMES_ID}
            rel="stylesheet"
            href={getPrismThemeHref(defaultPrismTheme)}
          />
        </head>
      }
      afterBodyChildren={<GtagAnalytics />}
    >
      <RootProviders {...providerProps}>
        <LoadThemeStyles />
        <MainLayout>{children}</MainLayout>
      </RootProviders>
    </RootHtml>
  );
}