Integrating Google Translate into Your Next.js Website

In the global digital landscape, offering your website in multiple languages is not just an option—it's a necessity. This tutorial guides you through the seamless integration of Google Translate into a Next.js website, enabling users to switch languages via a dropdown menu. Let's dive into the code essentials to make your website universally accessible.

Implementing the Language Selection Component

We'll start by creating a component that leverages the Google Translate API to offer a dynamic language selection dropdown. The component will automatically detect the user's preferred language, allowing for an intuitive and personalized user experience.

Prerequisites

This tutorial assumes you have a basic understanding of React and Next.js concepts.

Step 1: Setting Up the Component

First, import the necessary modules and define a list of languages you wish to support:

"use client";
import Script from "next/script";
import React from "react";

const languages = [
  { label: "English", value: "en", src: "https://flagcdn.com/h60/us.png" },
  // Add additional languages as needed
];

Step 2: Initializing Google Translate

Implement the function to initialize Google Translate, specifying the languages your site will support:

const includedLanguages = languages.map(lang => lang.value).join(",");

function googleTranslateElementInit() {
  new window.google.translate.TranslateElement({
    pageLanguage: "auto", includedLanguages
  }, "google_translate_element");
}

Step 3: Managing State and Language Selection

Create a React component to manage the selected language and render the UI for language selection:

export function GoogleTranslate({ prefLangCookie }: { prefLangCookie: string }) {

  const [langCookie, setLangCookie] = React.useState(decodeURIComponent(prefLangCookie));

  React.useEffect(() => {
    window.googleTranslateElementInit = googleTranslateElementInit;
  }, []);

  const onChange = (value: string) => {
    const lang = "/en/" + value;
    setLangCookie(lang);
    const element = document.querySelector(".goog-te-combo");
    element.value = value;
    element.dispatchEvent(new Event("change"));
  };

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

function LanguageSelector({ onChange, value }) {
  const langCookie = value.split("/")[2];
  return (
    <select onChange={(e) => onChange(e.target.value)} value={langCookie}>
      {languages.map((it) => (
        <option value={it.value} key={it.value}>
          {it.label}
        </option>
      ))}
    </select>
  );
}

Step 4: Incorporating Styles to Hide the Default Google Translate Widget

To ensure a cohesive design, apply CSS to hide the default Google Translate widget and only display your custom dropdown:

body { position: "static", top: "0px !important"; }
iframe.skiptranslate { display: "none !important"; }

Step 5: Implementing the Language Cookie

Pass the preferred language cookie from the server component to GoogleTranslate to preserve user language preferences:

<GoogleTranslate prefLangCookie={getPrefLangCookie()}/>

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

Conclusion

By following these steps, you have now equipped your Next.js website with a powerful feature to attract and retain a global audience by breaking down language barriers. This integration not only enhances user experience but also broadens your website's reach. Happy coding!

Blog