next.js에 구글 번역 적용하기

입력받은 문자열을 가져오는 부분(antd 이용)

// components/translate/LanguageSelector.tsx

import { Select } from 'antd';

interface LanguageOption {
  label: string;
  value: string;
  src: string;
}

interface LanguageSelectorProps {
  onChange: (value: string) => void;
  value: string | undefined;
}

const languages: LanguageOption[] = [
  { label: "Korea", value: "ko", src: "https://flagcdn.com/h60/kr.png" },
  { label: "English", value: "en", src: "https://flagcdn.com/h60/us.png" },
  { label: "Russia", value: "ru", src: "https://flagcdn.com/h60/ru.png" },
];

const { Option } = Select;

export default function LanguageSelector({ onChange, value }: LanguageSelectorProps) {
  return (
    <Select
      className='w-[70px] py-0.5'
      onChange={onChange}
      value={value}
    >
      {languages.map(lang => (
        <Option key={lang.value} value={lang.value}>
          <p className='flex flex-row items-center'>
            <img src={lang.src} alt={lang.label} className="w-6 h-4" />
          </p>
        </Option>
      ))}
    </Select>
  );
}

 

 

구글 번역 적용부분

// components/translate/GoogleTranslate.tsx

import { useState, useEffect } from 'react';
import Script from 'next/script';
import LanguageSelector from './LanguageSelector';

interface GoogleTranslateProps {
  prefLangCookie: string;
}

const languages = [
  { label: "Korea", value: "ko", src: "https://flagcdn.com/h60/kr.png" },
  { label: "English", value: "en", src: "https://flagcdn.com/h60/us.png" },
  { label: "Russia", value: "ru", src: "https://flagcdn.com/h60/ru.png" },
];

declare global {
  interface Window {
    googleTranslateElementInit: () => void;
    google: any;
  }
}


//languages에서 value값 추출
const includedLanguages = languages.map(lang => lang.value).join(",");


// 초기 로딩을 위한 함수
function googleTranslateElementInit() {
  new window.google.translate.TranslateElement({
    pageLanguage: "auto", includedLanguages
  }, "google_translate_element");
}

// 원래 언어설정으로 돌아오기 위한 함수
function resetGoogleTranslate() {
  const div = document.querySelector<HTMLDivElement>('.skiptranslate');

  if (div) {
    const iframe = document.querySelector<HTMLIFrameElement>('iframe[id="\\:1\\.container"]');
    
    if (iframe) {
      const innerDoc = iframe.contentDocument || iframe.contentWindow?.document;

      if (innerDoc) {
        const closeTranslate = innerDoc.querySelector<HTMLAnchorElement>('a[id="\\:1\\.close"]');

        if (closeTranslate) {
          const event = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true,
          });
          closeTranslate.dispatchEvent(event);
        }
      }
    }
  }
}




export default function GoogleTranslate({ prefLangCookie }: GoogleTranslateProps) {
  const [langCookie, setLangCookie] = useState(prefLangCookie);

  //useEffect를 이용한 초기 함수 설정
  useEffect(() => {
    window.googleTranslateElementInit = googleTranslateElementInit;
  }, []);

  //언어설정값에 따라 useState 변경
  const handleChange = (value: string) => {
    setLangCookie(value);
  };

  //langCookie값 변화에 따라 실행시키는 이벤트 (언어감지)
  useEffect(() => {
    if (langCookie === "ko") {
      resetGoogleTranslate();
    } else {
      const element = document.querySelector<HTMLSelectElement>(".goog-te-combo");
      if (element) {
        element.value = langCookie;
        element.dispatchEvent(new Event("change"));
      }
    }
  }, [langCookie]);

  const selectedOption = languages.find(lang => lang.value === langCookie);

  return (
    <div>
      <div id="google_translate_element" style={{ visibility: "hidden", width: "1px", height: "1px" }}></div>
      <LanguageSelector onChange={handleChange} value={selectedOption?.value} />
      {langCookie !== 'ko' && <Script
        src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        strategy="afterInteractive"
      />}
    </div>
  );
}

 

 

 

필요한 부분에 컴포넌트 호출

   import GoogleTranslate from '@/components/translate/GoogleTranslate';
            <GoogleTranslate prefLangCookie={'ko'} />

 

 

css 덮어쓰기 

body { 
  position: static !important; 
  top: 0px !important; 
}
.skiptranslate{ 
  display: none !important; 
}
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf{
  display: none !important; 
}

 

 

 

실행안되거나 에러날 시 설정파일 만들기

//lib.dom.d.ts (루트경로)
declare global {
  interface Window {
    google: any;
    googleTranslateElementInit: any;
  }
}

 

 

 

 

 

 

 

 

 

 

 

 

참고: https://dev.to/kstulgys/translate-website-with-google-translate-kll

Integrating Google Translate into Your Next.js Website