Xây dựng component tự động hoàn thành địa chỉ trong React/Next.js cho Việt Nam

Trình duyệt (<AddressAutocomplete/>)
  -> Next.js /api/address/suggest   (proxy, gắn X-API-Key)
  -> GoGoDuk /v1/suggest            (gợi ý theo input)
  -> người dùng chọn 1 prediction (placeId)
  -> Next.js /api/address/resolve   (proxy)
  -> GoGoDuk /v1/place/resolve      (lấy lat/lon + địa chỉ chuẩn)
  -> trả về giá trị ổn định để lưu / geocode

import { NextResponse } from "next/server";
 
const API_URL = process.env.GOGODUK_API_URL ?? "https://api.gogoduk.com";
 
export async function GET(req: Request) {
  const url = new URL(req.url);
  const input = url.searchParams.get("input")?.trim() ?? "";
  // /v1/suggest cần tối thiểu 2 ký tự — chặn sớm để khỏi gọi thừa.
  if (input.length < 2) {
    return NextResponse.json({ predictions: [] });
  }
 
  const upstream = new URL("/v1/suggest", API_URL);
  upstream.searchParams.set("input", input);
  upstream.searchParams.set("lang", "vi");
  upstream.searchParams.set("country", "VN");
 
  // Gộp các lần gõ thành một phiên billing: truyền sessionToken xuống.
  const sessionToken = url.searchParams.get("sessionToken");
  if (sessionToken) upstream.searchParams.set("sessionToken", sessionToken);
 
  const response = await fetch(upstream, {
    cache: "no-store",
    headers: { "X-API-Key": process.env.GOGODUK_API_KEY! },
  });
 
  return NextResponse.json(await response.json(), {
    status: response.status,
  });
}

GOGODUK_API_URL=https://api.gogoduk.com
GOGODUK_API_KEY=gdk_live_your_key

"use client";
 
import { useEffect, useId, useRef, useState } from "react";
 
type Prediction = {
  placeId: string;
  text: string;
  mainText: string;
  secondaryText: string;
};
 
export type ResolvedPlace = {
  placeId: string;
  address: string;
  lat: number;
  lon: number;
  district: string | null;
  city: string | null;
};
 
export function AddressAutocomplete({
  onSelect,
}: {
  onSelect: (place: ResolvedPlace) => void;
}) {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState<Prediction[]>([]);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(-1);
  // Một sessionToken cho mỗi phiên autocomplete (gõ -> chọn).
  const sessionToken = useRef(crypto.randomUUID());
  const listboxId = useId();
 
  useEffect(() => {
    const input = query.trim();
    if (input.length < 2) {
      setItems([]);
      return;
    }
 
    const controller = new AbortController();
    const timer = setTimeout(async () => {
      const params = new URLSearchParams({
        input,
        sessionToken: sessionToken.current,
      });
      const res = await fetch(`/api/address/suggest?${params}`, {
        signal: controller.signal,
      });
      const data = await res.json();
      setItems(data.predictions ?? []);
      setOpen(true);
      setActive(-1);
    }, 250);
 
    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [query]);
 
  async function select(prediction: Prediction) {
    setQuery(prediction.text);
    setOpen(false);
 
    const params = new URLSearchParams({
      id: prediction.placeId,
      sessionToken: sessionToken.current,
    });
    const res = await fetch(`/api/address/resolve?${params}`);
    const { result } = await res.json();
 
    onSelect({
      placeId: result.placeId,
      address: result.address,
      lat: result.lat,
      lon: result.lon, // chú ý: lon, KHÔNG phải lng
      district: result.district ?? null,
      city: result.city ?? null,
    });
 
    // Phiên đã kết thúc -> tạo token mới cho lần sau.
    sessionToken.current = crypto.randomUUID();
  }
 
  return (
    <div style={{ position: "relative" }}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onKeyDown={(e) => onKeyDown(e, { items, active, setActive, setOpen, select })}
        role="combobox"
        aria-expanded={open}
        aria-controls={listboxId}
        aria-activedescendant={active >= 0 ? `${listboxId}-${active}` : undefined}
        autoComplete="off"
        placeholder="Nhập địa chỉ…"
      />
      {open && items.length > 0 && (
        <ul id={listboxId} role="listbox">
          {items.map((item, i) => (
            <li
              key={item.placeId}
              id={`${listboxId}-${i}`}
              role="option"
              aria-selected={i === active}
              onMouseDown={(e) => e.preventDefault()}
              onClick={() => select(item)}
            >
              <strong>{item.mainText}</strong>
              <span>{item.secondaryText}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

type KeyCtx = {
  items: Prediction[];
  active: number;
  setActive: (n: number) => void;
  setOpen: (v: boolean) => void;
  select: (p: Prediction) => void;
};
 
function onKeyDown(e: React.KeyboardEvent, ctx: KeyCtx) {
  const { items, active, setActive, setOpen, select } = ctx;
  if (!items.length) return;
 
  switch (e.key) {
    case "ArrowDown":
      e.preventDefault();
      setActive(Math.min(active + 1, items.length - 1));
      break;
    case "ArrowUp":
      e.preventDefault();
      setActive(Math.max(active - 1, 0));
      break;
    case "Enter":
      if (active >= 0) {
        e.preventDefault();
        select(items[active]);
      }
      break;
    case "Escape":
      setOpen(false);
      break;
  }
}

import { NextResponse } from "next/server";
 
const API_URL = process.env.GOGODUK_API_URL ?? "https://api.gogoduk.com";
 
export async function GET(req: Request) {
  const url = new URL(req.url);
  const id = url.searchParams.get("id")?.trim();
  if (!id) {
    return NextResponse.json({ error: "missing id" }, { status: 400 });
  }
 
  const upstream = new URL("/v1/place/resolve", API_URL);
  upstream.searchParams.set("id", id);
  upstream.searchParams.set("lang", "vi");
 
  // Dùng đúng sessionToken của phiên suggest để billing gộp đúng.
  const sessionToken = url.searchParams.get("sessionToken");
  if (sessionToken) upstream.searchParams.set("sessionToken", sessionToken);
 
  const response = await fetch(upstream, {
    cache: "no-store",
    headers: { "X-API-Key": process.env.GOGODUK_API_KEY! },
  });
 
  return NextResponse.json(await response.json(), {
    status: response.status,
  });
}

function CheckoutForm() {
  const [place, setPlace] = useState<ResolvedPlace | null>(null);
 
  return (
    <form>
      <AddressAutocomplete onSelect={setPlace} />
      {place && (
        <input type="hidden" name="placeId" value={place.placeId} />
      )}
      {/* place.lat / place.lon đã sẵn sàng để tính ship hoặc gán vùng */}
    </form>
  );
}