Skip to main content

Next.js integration

Tairu provides a high-level integration with Next.js using the @tairu/next package.

Installation

npm install @tairu/next

Tiles rendering

The Tile component simply needs to be provided the Tile URL to load and render:

page.jsx
import { Tile } from '@tairu/next'
import { Suspense } from 'react'

export default function ExamplePage() {
return (
<Suspense>
<Tile url="http://localhost:3210" />
</Suspense>
)
}

This package supports Server Components, so Tiles can be loaded and rendered server-side, with interaction handlers then added client-side.

A Suspense boundary need to be present in order to load the Tile as a server component.

Tiles handling

Tile handlers as presented in the quick start guide can be defined as Next.js route handlers using the @tairu/next/server module instead of the @tairu/handler package to create handlers:

route.jsx
import { Text, Tile, handle } from '@tairu/next/server'

export const { GET } = handle(() => (
<Tile title="Hello Next">
<Text>My first Tile</Text>
</Tile>
))

The handle() function returns an object containing the GET, POST and OPTIONS handlers supported by Next.js.