nextjs bundled translations example

locale.ts

import { Locale, Path } from '../types'

const removeRegion = (locale: string): string => {
  const [noRegion] = locale.split('-')
  return noRegion
}
const validateLocale = (locale: string, defaultLocale: string): Locale => {
  if (locale === Locale.sv || locale === Locale.en) {
    return locale
  } else {
    return defaultLocale as Locale
  }
}
export const makeLocale = (locale = 'sv', defaultLocale = 'sv'): Locale => {
  if (!locale) {
    return defaultLocale as Locale
  }
  if (locale.includes('-')) {
    const noRegion = removeRegion(locale)
    return validateLocale(noRegion, defaultLocale)
  } else {
    return validateLocale(locale, defaultLocale)
  }
}

nextjs_bundled_translations_example.tsx

import { useRouter } from 'next/router'

import { Locale } from '../../../types'
import { makeLocale } from '../../../utils/locale'
import { ContactForm } from '../03-organisms/contact-form'

type Translation = {
  headline: string
  subline: string
  fud: string
  description: string
}
type Translations = {
  [key in Locale]: Translation
}
const translations: Translations = {
  sv: {
    headline: 'Säg hej.',
    subline: 'Det är ett formulär. Du vet vad du ska göra.',
    fud: 'Osäker på var du ska börja?',
    description:
      'Berätta för oss om din produkt, din tidslinje, hur du hörde om oss och var du är baserad.',
  },
  en: {
    headline: 'Say hey.',
    subline: "It's a form. You know what to do.",
    fud: 'Not sure where to start?',
    description:
      "Tell us about your product, your timeline, how you heard about us, and where you're located.",
  },
}

export const ContactFormWrapper = () => {
  const router = useRouter()
  const locale = makeLocale(router.locale, router.defaultLocale)
  const translation = translations[locale as Locale]
  return (
    <div className="relative bg-white lg:h-screen">
      <div className="absolute inset-0 lg:h-full">
        <div className="absolute inset-y-0 left-0 w-1/2 bg-blue-grey-50"></div>
      </div>
      <div className="relative max-w-7xl mx-auto lg:grid lg:grid-cols-5 lg:h-full">
        <div className="bg-blue-grey-50 py-16 px-4 sm:px-6 lg:col-span-2 lg:px-8 lg:py-24 xl:pr-12">
          <div className="max-w-lg mx-auto">
            <h2 className="text-2xl font-extrabold tracking-tight text-blue-grey-900 sm:text-3xl">
              {translation.headline}
            </h2>
            <p className="mt-3 text-lg leading-6 text-blue-grey-500">{translation.subline}</p>
            <p className="mt-6 text-base text-blue-grey-500 font-semibold">{translation.fud}</p>
            <p className="mt-6 text-base text-blue-grey-400 font-light">
              {translation.description}
            </p>
          </div>
        </div>
        <div className="bg-white py-16 px-4 sm:px-6 lg:col-span-3 lg:py-24 lg:px-8 xl:pl-12">
          <div className="max-w-lg mx-auto lg:max-w-none">
            <ContactForm />
          </div>
        </div>
      </div>
    </div>
  )
}

types.ts

export enum Locale {
  sv = 'sv',
  en = 'en',
}

export enum Path {
  '/' = '/',
  '/contact' = '/contact',
}