NextJS

Yuzu documentation assumes you are using App router. If you are using Pages, the client libraries will likely "just work," but see the next-international docs or ask on discord if you run into issues.

Build

During the build command, Yuzu creates server.ts and client.ts files following the specification of next-international. By keeping these in sync with your config file, you only have to worry about editing in one place.

Resources

There are a variety of other setup tasks, including configuring middleware.ts and adding a language switcher to your app. For both, we offer templates and components that you are free to use. We do this via copy/paste to avoid making assumptions about your project. This way you can make the components truly yours and account for things like authentication stack.

Middleware

There are also docs on next-international, but these work with your Yuzu config file to avoid having to duplicate configuration.

import { NextRequest } from 'next/server'
import { createI18nMiddleware } from 'next-international/middleware'
import yuzuConfig from '@/yuzu.config'
 
const I18nMiddleware = createI18nMiddleware({
  locales: yuzuConfig.locales.map(locale => locale.code),
  defaultLocale: yuzuConfig.defaultLocale,
  urlMappingStrategy: 'rewriteDefault'
}) 
 
export function middleware(req: NextRequest) {
  return I18nMiddleware(req)
}
 
export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)']
}

import { NextRequest } from 'next/server'
import { createI18nMiddleware } from 'next-international/middleware'
import yuzuConfig from '@/yuzu.config'
 
const I18nMiddleware = createI18nMiddleware({
  locales: yuzuConfig.locales.map(locale => locale.code),
  defaultLocale: yuzuConfig.defaultLocale,
  urlMappingStrategy: 'rewriteDefault'
}) 
 
export function middleware(req: NextRequest) {
  return I18nMiddleware(req)
}
 
export const config = {
  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)']
}

Language Switcher

Lastly, you'll need a way to let users change the language. As a starting point, we provide a <LanguageSwitcher /> component that you can copy & paste into your project and customize as needed.