В этой статье мы поговорим о том, как вручную переключать языки в приложении next.js. Чтобы настроить эту функцию, вы можете вернуться к моей предыдущей статье. Итак, я предполагаю, что ваше приложение уже может захватывать различные сценарии из сценариев на соответствующих языках. Кроме того, я построил репо, чтобы продемонстрировать это, так что не стесняйтесь посещать его.
Добавить кнопку
Во-первых, я воспользуюсь помощью material-UI, чтобы просто добавить кнопку для переключения языков. Вы можете запустить это:
npm install @material-ui/icons @material-ui/core
Затем после успешной установки вы можете импортировать эти компоненты, которые мы будем использовать:
import TranslateIcon from "@material-ui/icons/Translate" import { Button } from "@material-ui/core"
Вот несколько простых кодов:
<Button aria-controls="simple-menu" aria-haspopup="true" color="primary" startIcon={<TranslateIcon />}>
Switch Language
</Button>
получаем кнопку для переключения языков👇
Заставьте эту кнопку работать!
Теперь пора заставить его работать, присвоив кнопке onClick метод, подобный этому:
<Button aria-controls="simple-menu" aria-haspopup="true" color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
Switch Language
</Button>
В функции handleClick нам нужно сделать две вещи:
- Определите, какой язык мы используем прямо сейчас.
- Переключите язык на другой.
Помните, в прошлой статье мы говорили о том, как настроить файл с именем i18n.js? Нам нужно импортировать из него i18n вот так:
import { withTranslation, i18n } from "../i18n"
И тогда мы можем использовать этот i18n.
Чтобы определить, какой язык используется, используйте i18n.language. В нашем случае он скажет вам, какой язык - zh или en.
Чтобы переключить язык, просто используйте прилагаемый к нему метод: changeLanguage. Вы можете назвать это так: i18n.changeLanguage(the new language).
Итак, теперь мы можем использовать эти два метода в нашей функции handleClick. Поскольку в приложении нам, вероятно, нужно много использовать этот язык (чтобы выбрать значок или другой пользовательский интерфейс), поэтому я предпочитаю использовать state для сохранения языка и использования его позже. Итак, я сначала установил состояние language и использую его в своей функции handleClick:
const [language, setLanguage] = useState("en")
const handleClick = () =>{
language=="en"? setLanguage("zh") : setLanguage("en")
i18n.changeLanguage(language)
}
В первой строке я решаю, какой язык сейчас используется, и устанавливаю language на другой, а затем меняю его во второй строке кода. Это связывает мое состояние с i18n языком.
Бонус: если вы хотите, чтобы на кнопке отображался ваш текущий язык, просто измените коды на кнопке следующим образом:
<Button aria-controls="simple-menu" aria-haspopup="true" color="primary" onClick={handleClick} startIcon={<TranslateIcon />}>
{i18n.language=="en"? "English" : "中文"}
</Button>
Таким образом, в зависимости от используемого языка будет отображаться соответствующий текст!
Конец
На этой неделе все! В следующий раз я продолжу и напишу о добавлении в приложение URL-адреса для конкретного языка с помощью localSubPaths. Спасибо за прочтение!
