Speedrun по Next.js
Давайте за несколько минут создадим новое приложение и локализуем его с помощью GT.
Обзор
В этом руководстве мы разберём две задачи:
- Создание нового приложения на Next.js
- Локализация с помощью General Translation
В сумме это займёт менее 10 минут.
Предварительные требования
Мы исходим из того, что у вас уже есть опыт работы с React и вы знакомы с TypeScript.
Шаг 1: Создайте новое приложение Next.js
Сначала в терминале перейдите в нужный каталог и выполните следующую команду:
npx create-next-app next-quickstart --ts --tailwind --eslint --app --use-npm --src-dirОткроется мастер настройки — можете просто оставить значения по умолчанию для каждого параметра.
Шаг 2: Установка библиотек
Перейдите в корневой каталог проекта Next.js и выполните:
cd next-quickstart
npm i gt-next
npm i gtx-cliШаг 3: Добавьте переменные окружения.
Перейдите в Dashboard.
Откройте страницу Dev API Keys на панели навигации и создайте новый API key и Project ID.
Затем добавьте их в файл .env.
GT_API_KEY="YOUR_GT_API_KEY"
GT_PROJECT_ID="YOUR_GT_PROJECT_ID"Шаг 4: Запустите CLI‑инструмент
Запустите CLI‑инструмент, чтобы подготовить кодовую базу к переводу.
npx gtx-cli setupШаг 5: Измените корневой макет
Измените проп lang в теге <html> в файле src/app/layout.tsx.
Для получения текущей локали используйте await getLocale().
import { GTProvider, getLocale } from "gt-next";
...
export default async function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
const locale = await getLocale();
return (
<html lang={locale}> // [!code highlight]
<GTProvider>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</GTProvider>
</html>
);
}Шаг 6: Запустите приложение
Ваше приложение готово к интернационализации! 🎉 Давайте его протестируем!
Изменим языковые настройки браузера.
Запустите приложение Next.js.
npm run devОткройте приложение в используемом вами браузере (обычно по адресу http://localhost:3000). Если всё настроено правильно, вы увидите приложение на языке, выбранном в вашем браузере.
Устранение неполадок
Примечания
- Переводите произвольный JSX с помощью компонента
<T>. - Если перевод не применяется после смены языка, проверьте cookie в вашем браузере.
Что дальше
- Поставьте звёздочку нашему репозиторию на GitHub gt-next.
- Настройте поддержку языков с письмом справа налево.
Насколько полезно это руководство?