如何在Next.js TypeScript项目中使用并初始化Algolia Places？

实现方案 #

places.js 依赖浏览器 DOM 环境运行，而 Next.js 存在服务端渲染阶段，服务端运行时无 document 对象，且初始化需要对应 input 元素已经挂载到 DOM 上，所以初始化逻辑要放在客户端组件挂载完成的生命周期中。

推荐用 React useRef 绑定输入框替代 ID 选择器，避免页面多组件冲突，完整实现代码如下：

// Next.js 13+ App Router 需在首行添加客户端组件指令
'use client'

import { useEffect, useRef } from 'react'
import places from 'places.js'

const Algolia = () => {
  // 绑定输入框DOM节点
  const addressInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    // 仅在DOM节点挂载完成后执行初始化
    if (!addressInputRef.current) return

    const placesAutocomplete = places({
      appId: '替换为你的Places应用ID',
      apiKey: '替换为你的Places公开API密钥',
      container: addressInputRef.current
    })

    // 组件卸载时销毁实例，避免内存泄漏
    return () => placesAutocomplete.destroy()
  }, []) // 空依赖数组保证逻辑仅在首次挂载后执行一次

  return (
    <div>
      <input
        type="search"
        ref={addressInputRef}
        placeholder="Where are we going?"
      />
    </div>
  )
}

export default Algolia

如果 TypeScript 提示找不到 places.js 的类型声明，可以在项目的全局类型声明文件（通常为 global.d.ts 或 env.d.ts）中添加以下声明：

declare module 'places.js'

注意：不要将初始化逻辑写在组件顶层、服务端数据获取函数（如 getServerSideProps、generateStaticParams）等服务端执行的位置，这些位置无法获取浏览器DOM对象，会触发运行报错。

内容的提问来源于stack exchange，提问作者bigBadWolf