Next.js에서 Google 무료 번역 API 사용하기

'use client';
import { useState } from 'react';
 
const TranslateButton = () => {
  const [visible, setVisible] = useState(false);
 
  const handleClick = () => {
    const element = document.getElementById('google_translate_element');
    if (element) {
      element.style.display = visible ? 'none' : 'block';
    }
    setVisible(!visible);
  };
 
  return (
    <button
      onClick={handleClick}
      aria-label="번역 버튼"
      className="border p-2"
      type="button"
    >
      번역하기
    </button>
  );
};
 
export default TranslateButton;

'use client';
import Script from 'next/script';
 
declare global {
  interface Window {
    googleTranslateElementInit: () => void;
    google: any;
  }
}
 
const GoogleTranslate = () => {
  return (
    <>
      <Script
        src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        strategy="afterInteractive"
        id="google-translate-script"
        onLoad={() => {
          window.googleTranslateElementInit = () => {
            new window.google.translate.TranslateElement(
              {
                pageLanguage: 'ko', // 기본 언어 설정
                includedLanguages: 'en,ko,ja,zh-CN,zh-TW"', // 지원할 언어 설정
              },
              'google_translate_element'
            );
          };
        }}
      />
      <div
        id="google_translate_element"
        style={{ display: 'none' }}
        className="absolute right-0 top-[80px] min-w-[160px] bg-white px-[16px]"
      />
    </>
  );
};
 
export default GoogleTranslate;
 

import TranslateButton from '../components/TranslateButton';
import GoogleTranslate from '../components/GoogleTranslate';
 
export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <TranslateButton />
      <GoogleTranslate />
    </div>
  );
}

#goog-gt-tt {
  display: none !important;
}