Next-zero-intl NPM

Next Zero Intl

Next Zero Intl is a next.js library built on top of google-translate-apis that you can just drop in your projects, and internationalize your app/website with zero config. Checkout this demo. 👇

Installation

npm install next-zero-intl

or, if you're using yarn.

yarn add next-zero-intl

Configuration

First, you need to configure the <TranslationProvider/> in your _app.js file.

// pages/_app.js
import { TranslationProvider } from 'next-zero-intl'

export default function MyApp({ Component, pageProps }) {
  return (
    <TranslationProvider>
      <Component {...pageProps} />
    </TranslationProvider>
  )
}

Now create a translate.js file inside next.js API directory, and add the following code.

// pages/api/translate.js
import { handleTranslation } from 'next-zero-intl/api'

export default handleTranslation

and that's it, you've successfully configured next-zero-intl in your next.js app.

Usage

We provide you two simple hooks useTranslation & and useLocale to very simply add internationalization in your app. A simple example of how you'd use the translation hook is below.

import { useTranslation } from 'next-zero-intl'

const { t } = useTranslation()

function SomeComponent() {
  render(<p>{t('Hello')}</p>)
}

We try to be as less opinionated as possible, in order to change the text in above component, you can write a simple select component that uses useLocale hook.

import { useLocale } from 'next-zero-intl'
import { useState } from 'react'

export default function ChangeLocale() {
  const [locale, setLocale] = useLocale()
  const [selected, setSelected] = useState(locale)

  const onSelectHandler = e => {
    setSelected(e.target.value)
    setLocale(e.target.value)
  }

  return (
    <select onChange={onSelectHandler} value={selected}>
      <option value="en">English</option>
      <option value="hi">Hindi</option>
    </select>
  )
}

Check out the full list of all the locales here.