さくっと全文検索を導入できるAlgoliaをNext.js（SSG）で使う

import os

import fire
from algoliasearch.search_client import SearchClient
from dotenv import load_dotenv

load_dotenv()


def algolia_save():
    client = SearchClient.create(
        os.environ["ALGOLIA_APP_ID"], os.environ["ALGOLIA_API_KEY"]
    )
    index = client.init_index("test_index")

    obj = {
        "title": "サンプルコンテンツ",
        "description": "Pythonの楽しさを伝えます！",
        "updated_at": "2023-09-11 00:00:00",
        "tags": "Python,Python3",
    }

    index.save_object(obj, {"autoGenerateObjectIDIfNotExist": True})
    return "Success!"


if __name__ == "__main__":
    fire.Fire()

ALGOLIA_APP_ID={自分のAPP ID}
ALGOLIA_API_KEY={自分のAPI KEY}

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

interface Item {
  title: string
}

export function Search() {
  const [items, setItems] = useState([])
  const algoliaClient = algoliasearch('{AlgoliaのAPP ID}', '{AlgoliaのAPI Key}')

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

  const algoliaSearch = async () => {
    const index = algoliaClient.initIndex('test_index')
    const data = await index.search(form.values.query)
    setItems(data.hits)
  }

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