Getting Started
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.
TypeScript Setup
Add the Gridland JSX type declarations so TypeScript recognizes custom elements like <box> and <text>:
{
"include": ["next-env.d.ts", "node_modules/@gridland/web/src/gridland-jsx.d.ts", "**/*.ts", "**/*.tsx"]
}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.