Guides
Next.js
Use Gridland with Next.js
Install
bun add @gridland/webnpm install @gridland/webyarn add @gridland/webpnpm add @gridland/webConfigure Next.js
Use the withGridland plugin to configure webpack automatically:
import { withGridland } from "@gridland/web/next-plugin"
export default withGridland({
// ... other Next.js config
})If you provide your own webpack function, withGridland will chain it.
Your config runs first, then opentui aliases and shims are applied on top.
Create Your Component
Mark your page as a client component and use TUI:
"use client"
import { TUI } from "@gridland/web"
function GridlandDemo() {
return (
<box border borderStyle="rounded" padding={1}>
<text fg="#a3be8c">Hello from Next.js!</text>
</box>
)
}
export default function Home() {
return (
<TUI style={{ width: "100vw", height: "100vh" }}>
<GridlandDemo />
</TUI>
)
}SSR Safety
TUI is SSR-safe by default. On the server it renders an empty
container div. On the client it hydrates and creates the canvas. No
dynamic(() => import(...), { ssr: false }) wrapper is needed.