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.