App
Root Layout
Wire Tulip's root layout, metadata, styles, and top-level providers into a Next.js app.
The root layout is the outer shell for a Tulip app.
It should import global styles, register app-level server setup, generate metadata from config, and wrap pages in Tulip providers.
Example
import "./globals.css";
import "../server/router/register.js";
import { Providers } from "@tulip-systems/app/components/client";
import { generateRootLayoutMetadata, RootLayout } from "@tulip-systems/app/components/server";
import type { PropsWithChildren } from "react";
import { config } from "@/lib/config/base";
export const { metadata, viewport } = generateRootLayoutMetadata(config);
export default function Layout({ children }: PropsWithChildren) {
return (
<RootLayout>
<Providers>{children}</Providers>
</RootLayout>
);
}Responsibilities
- import global CSS once
- configure metadata and viewport
- render the HTML/body shell through
RootLayout - include shared providers around the app