Translate Next.js Apps

This Next.js application integration guide shows you how to translate Next.js applications in a few easy steps. Follow this tutorial to create a multilingual Next.js application translated to other languages for your international customers.

Below is a step-by-step guide for integrating Localize into your Next.js application.

If you do not have a Localize Project yet, signup here!

Because Next.js generates the HTML for you, the usual Localize Code Snippet method must be modified slightly. There are two approaches for this:

  1. Method 1: Use a Script component from next/script
  2. Method 2: Use inline script tags in the Head component from next/head

Both methods are mentioned in the Next.js Documentation.

Method 1: Using Script from next/script

This involves using the Next.js Script component. In your index.js or base component.

  1. Copy the following Script component
<Script id="localize"
  src="https://global.localizecdn.com/localize.js"
  onLoad={() => {
    !function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);
    Localize.initialize({ key: '[[PROJECT_KEY]]',rememberLanguage: true, });
  }}
/>
  1. Paste the Script inside your index.js or base component:
// index.js
    import Script from 'next/script';
    import React from 'react';

    export default function Home() {
      return (
        <Head>
          <title>Next.js Localize Demo</title>
        </Head>
        {/* Start of Localize code snippet... */}
        <Script id="localize"
          src="https://global.localizecdn.com/localize.js"
          onLoad={() => {
            !function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);
            Localize.initialize({ key: '[[PROJECT_KEY]]',rememberLanguage: true, });
          }}
        />
        {/* ...end of Localize code snippet */}
        <main>
          <h1>My Next.js App!</h1>
          <p>This phrase will be translated.</p>
        </main>
      );
    }
  1. Replace [[PROJECT_KEY]] with the key for your project.

  2. Continue with the Post Installation Instructions below.

Method 2: Using Script Tags in Head from next/head

  1. Copy the modified Localize Code Snippet below:
<script async src="https://global.localizecdn.com/localize.js"></script>
    <script>
      {`!function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);`}
    </script>
    <script>
      {`Localize.initialize({ key: '[[PROJECT_KEY]]', rememberLanguage: true, });`}
    </script>
  1. Paste this snippet into a <Head/> block for the base page in your Next.js application. It should look similar to this:
// index.js
    import Head from 'next/head';
    import React from 'react';

    export default function Home() {
      return (
        <Head>
          <title>Next.js Localize Demo</title>
          {/* Start of Localize code snippet... */}
          <script async src="https://global.localizecdn.com/localize.js"></script>
          <script>
            {`!function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);`}
          </script>
          <script>
            {`Localize.initialize({ key: '[[PROJECT_KEY]]', rememberLanguage: true, });`}
          </script>
          {/* ...end of Localize code snippet */}
        </Head>
        <main>
            <h1>My Next.js App!</h1>
            <p>This phrase will be translated.</p>
        </main>
      );
    }
  1. Replace [[PROJECT_KEY]] with the key for your project.

  2. Continue with the Post Installation Instructions below.

Post Installation Instructions

1. Add Initialization Options

Add any desired options to the Localize.initialize() call above, check here for the full list of possible options.

Some popular options include:

  • autoApprove - use to fully automate your translation workflow
  • localizeImages - allows for localization of images in your site

2. Load your application in a browser.

  1. Visit your application in a browser.
  2. Select one of your target languages using the language switching widget.
  3. Refresh the page.
  4. Lather, rinse, repeat, for each page in your application.

Localize will automatically begin to detect new content on the pages that you visit, and will bring it into your dashboard.

3. Approve phrases

Then head on over to the Manage Phrases page to approve phrases in the Localize dashboard.

4. Phrases not showing up?

If you are not seeing phrases show up in your Pending bin in the Localize dashboard, follow the troubleshooting instructions here.


Need Help?
Contact support for custom integration help or troubleshooting!


Did this page help you?