Next.js integration
Tairu provides a high-level integration with Next.js using the @tairu/next
package.
Installation
- npm
- pnpm
npm install @tairu/next
pnpm add @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.