23.04.2024 в 22:18

Реализация многоязычной поддержки в Next.js с помощью next-i18next

Сегодня мы поделимся тем, как реализовать многоязычную поддержку в ваших приложениях Next.js с помощью пакета next-i18next. Этот подход улучшает пользовательский опыт за счет предоставления контента на разных языках, что имеет решающее значение для глобального охвата.

Понимание фрагмента кода

Вот более детальный взгляд на фрагмент кода, используемый для настройки next-i18next:

import { nextI18NextMiddleware } from 'next-i18next/serverSideTranslations'
import NextI18Next from 'next-i18next'
const nextI18n = new NextI18Next({ defaultLanguage: 'en', otherLanguages: ['de'] })
export const getServerSideProps = async ({ req, res }) => {
    await nextI18NextMiddleware(req, res, nextI18n)
    return { props: { ...await serverSideTranslations(req.locale, ['common', 'footer']) } }
}

Пошаговая разбивка

Импорт модулей: nextI18NextMiddleware и NextI18Next импортируются для облегчения интернационализации.

Инициализация nextI18Next: создается экземпляр NextI18Next с английским в качестве языка по умолчанию и немецким в качестве другого варианта. Это закладывает основу для перевода контента на основе предпочтений пользователя/языковых настроек.

Функция getServerSideProps: эта асинхронная функция имеет решающее значение для рендеринга на стороне сервера в Next.js. Промежуточное программное обеспечение nextI18NextMiddleware применяется к объектам запроса и ответа, обеспечивая загрузку переводов в соответствии с локалью входящего запроса.

Возврат переводов: окончательный результат getServerSideProps включает переведенные строки, необходимые для страницы, в частности, из пространств имен 'common' и 'footer'. Это делает эти переводы доступными в качестве реквизита в компонентах вашей страницы Next.js.

Практическое использование и преимущества

Использование next-i18next не только упрощает управление переводами, но и автоматизирует многие сложности переключения языков. Такая настройка гарантирует, что ваше приложение сможет обслуживать более широкую аудиторию, адаптируясь к ее языковым предпочтениям, что является ключевым моментом для международных приложений.

Заключение

Реализация многоязычной поддержки в ваших приложениях Next.js с помощью next-i18next повышает доступность и удобство использования. Чтобы увидеть, как эти методы применяются в реальных приложениях, посетите наши проекты, такие как Online Archive Extractor, Online Image Compressor и OCR Free. Эти инструменты демонстрируют эффективную многоязычную реализацию, повышающую вовлеченность пользователей в разных регионах.

Эффективное использование next-i18next позволит вашим приложениям Next.js легко работать по всему миру, охватывая более широкую и разнообразную аудиторию.

Источник:

Exit fullscreen mode

#Next.js