Building a multilingual NextJS app using the new app directory

• next-i18next

  26 5,254 7.9 TypeScript

  The easiest way to translate your NextJs apps.

  

With the introduction of app directory, my previous i18n blog is not applicable anymore since next-i18next is not necessary.

• degit

  22 6,643 0.0 JavaScript

  Straightforward project scaffolding

The easiest way to follow this guide is to degit a Nextjs boilerplate.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• i18next-resources-to-backend

  2 49 5.4 JavaScript

  This package helps to transform resources to an i18next backend

  

i18next-resources-to-backend is a very small utility, so you can just copy the implementation if you don't want an additional dependency.

• i18next

  60 7,399 9.2 JavaScript

  i18next: learn once - translate everywhere

  

// app/components/BuiltInFormatsDemo.tsx 'use client'; import React from 'react'; import {useTranslation} from '../i18n/client'; import type {LocaleTypes} from '../i18n/settings'; import {useParams} from 'next/navigation'; const BuiltInFormatsDemo = () => { let locale = useParams()?.locale as LocaleTypes; const {t} = useTranslation(locale, 'built-in-demo'); return (

{/* "number": "Number: {{val, number}}", */} {t('number', { val: 123456789.0123, })} p>

{/* "currency": "Currency: {{val, currency}}", */} {t('currency', { val: 123456789.0123, style: 'currency', currency: 'USD', })} p>

{/* "dateTime": "Date/Time: {{val, datetime}}", */} {t('dateTime', { val: new Date(1234567890123), formatParams: { val: { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', }, }, })} p>

{/* "relativeTime": "Relative Time: {{val, relativetime}}", */} {t('relativeTime', { val: 12, style: 'long', })} p>

{/* "list": "List: {{val, list}}", */} {t('list', { // https://www.i18next.com/translation-function/objects-and-arrays#objects // Check the link for more details on `returnObjects` val: t('weekdays', {returnObjects: true}), })} p> div> ); }; export default BuiltInFormatsDemo;

• i18next-browser-languageDetector

  11 817 5.3 JavaScript

  language detector used in browser environment for i18next

  

Install i18next-browser-languagedetector to simplify language detection in the frontend

• InfluxDB

  www.influxdata.com sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project