Next.js

Magic Translate integrates perfectly with Next.js

To get started with Next.js first set up your desired locales by following the official documentation here: https://nextjs.org/docs/pages/building-your-application/routing/internationalization

Then you can automatically translate your Next.js application based on the user's locale by providing the locale to the MagicTranslateProvider . Since Magic Translates language keys do not 1:1 map to UTS locales used by Magic Translate, there is a utility function do determine the language based on the UTS locale:

import { useRouter } from 'next/router'
import { MagicTranslateProvider, utsLocaleToLanguage } from '@magic-translate/react'

const MyApp = () => {
     const router = useRouter()
     const locale = router.locale
     return (
        <MagicTranslateProvider
            language={utsLocaleToLanguage(router.locale)}
            apiKey="<your-api-key>"
        >
            {/* your app */}
         </MagicTranslateProvider>
    )
}

Now your website is automatically translated based on the locale determined by Next.js.