Next.js 구글번역을 이용한 웹페이지 번역

쿠키관련 사용부분 업데이트

 

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

 앞쪽에 auto를 붙여서 사용하는 코드로  변경

 

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

사용시에는  split으로 잘라서 사용

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

 return부분도  잘라서 사용하는 코드로 변경

export default function LanguageSelector({ onChange, value }: LanguageSelectorProps) {
  return (
    <Select
      className='w-[70px] py-0.5'
      onChange={onChange}
      value={value ? value : 'ko'}
    >
      {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" />
            {/* {lang.label} */}
          </p>
        </Option>
      ))}
    </Select>
  );
}

LanguageSelector에서 값이 없을 시 'ko'로 처리하도록 변경

 

import { cookies } from 'next/headers';

export const getPrefLangCookie = () => {
  return cookies().get("googtrans")?.value ?? "ko";
};


return(
   <Layout settingData={parsedSettingData} langCookie={langCookie}>{children}</Layout>
)

 

서버컴포넌트 내에서 쿠키값 가져온 뒤 prop으로 전달