Next.jsのAPIで文字化けしてしまう

Question

前提

現在Next.js+Typescriptでアプリケーションを作成しています。その際Google検索した際に出てくるサジェストを取るAPIを作ろうと思い、apiディレクトリにsuggest.tsを作り、呼び出したところ、アプリケーション自体から呼び出した場合もブラウザ上から呼び出した場合も、日本語が文字化けしてしまいます。どのようにすれば文字化けが解消するでしょうか？
ソースコードは以下のとおりです。エラーは特に出ていません。またGoogleのAPIはXMLが返ってくる仕様だったので、node-html-parserを使用してXMLを解析しています。

該当のソースコード

import { NextApiRequest, NextApiResponse } from "next";
import { parse } from 'node-html-parser';

export default async function postsuggest(req:NextApiRequest,res:NextApiResponse){
    const resXML=await fetch("http://www.google.com/complete/search?hl=ja&output=toolbar&q="+req.query.word,).then(res=>res.text())
    const root=parse(resXML)
    const returnArray=root.querySelectorAll("suggestion").map((tag)=>tag.getAttribute("data"))
    const returnString=returnArray.join(",")

    res.status(200).send(JSON.stringify({wordList:returnString,test:"日本語テスト"}, null, 2))
}

youtubeと入力し出力させてみた例

( http://localhost:3000/api/suggest?word=youtube にアクセス)

{
  "wordList": "youtube,youtube �ｽ_�ｽE�ｽ�ｽ�ｽ�ｽ�ｽ[�ｽh,youtube music,youtube mp3,youtube�ｽv�ｽ�ｽ�ｽ~�ｽA�ｽ�ｽ,youtube premium,youtube studio,youtube�ｽ�ｽ�ｽ�ｽ,youtube�ｽX�ｽ^�ｽW�ｽI,youtube �ｽ�ｽ�ｽ�ｽﾈゑｿｽ",
  "test": "譌･譛ｬ隱槭ユ繧ｹ繝�"
}

このように、XMLの部分だけでなく、日本語をそのまま出力しているtestの部分も文字化けしています。

試したこと

調べたのですがわからなかったのでBingAIに聞き、10行目の部分を
「res.status(200).json({wordList:returnString,test:"日本語テスト"})」
から
「res.status(200).send(JSON.stringify({wordList:returnString,test:"日本語テスト"}, null, 2))」
に変えたのですが、特に意味はありませんでした。

使用している環境

OS : Ubuntu 22.04
ブラウザ : vivaldi 5.7.2921.63
Node.js : v18.15.0
npm : 9.5.0

Answer 1

文字化けの問題は、エンコーディングの設定が原因であることが多いです。

今回の場合、GoogleのAPIから返ってくるXMLのエンコーディングがおそらくUTF-8ではないため、文字化けが発生していると考えられます。まずは、GoogleのAPIから返ってくるXMLのエンコーディングをUTF-8に変換することを試みてみましょう。

iconv-liteというパッケージを使用して、エンコーディングを変換できます。

import { NextApiRequest, NextApiResponse } from "next";
import { parse } from "node-html-parser";
import iconv from "iconv-lite";

export default async function postsuggest(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const response = await fetch(
    "http://www.google.com/complete/search?hl=ja&output=toolbar&q=" +
      req.query.word
  );
  const buffer = await response.arrayBuffer();
  const decodedData = iconv.decode(Buffer.from(buffer), "Shift_JIS"); // エンコーディングをShift_JISからUTF-8に変換
  const root = parse(decodedData);
  const returnArray = root
    .querySelectorAll("suggestion")
    .map((tag) => tag.getAttribute("data"));
  const returnString = returnArray.join(",");

  res.setHeader("Content-Type", "application/json; charset=utf-8"); // 応答のContent-Typeを設定
  res
    .status(200)
    .send(
      JSON.stringify({ wordList: returnString, test: "日本語テスト" }, null, 2)
    );
}

上記が修正例です。手元の環境では、これで正常に文字化けなく動作しました。