日本語全文検索を導入したいのでFessに入門してNext.jsで使ってみた

import { useState } from 'react'
import { useForm } from '@mantine/form'
import { Box, Button, TextInput } from '@mantine/core'

export function Search() {
  const [items, setItems] = useState([])

  const form = useForm({
    initialValues: {
      query: '',
    }
  })

  const fessSearch = async () => {
    const res = await fetch(`/api/fess?q=${form.values.query}`)
    const data = await res.json()
    setItems(data.items)
  }

  return (
    <Box>
      <form onSubmit={form.onSubmit(() => fessSearch())}>
        <TextInput
          label="キーワード"
          placeholder="キーワード"
          {...form.getInputProps('query')}
        />
        <Button type="submit">検索</Button>
      </form>
      {items.length > 0 && (
        <p>検索結果</p>
        <ul>
          {items.map((item: Item) => (
            <li key={item.url}>
              <a href={item.url}>{item.title}</a>
            </li>
          ))}
        </ul>
      )}
    </Box>
  )
}