Сегмент языка в NextJS

Код языка удобно оформить как имя папки в каталоге app. Тогда адрес /en обрабатывает файл page.jsx внутри [lang], а /ru - тот же компонент, но с другим значением сегмента.

В серверном компоненте параметры маршрута приходят в пропсе params. Его нужно разобрать через await, после чего поле lang содержит строку из адреса. Давайте перенесем главную в src/app/[lang]/page.jsx и выведем код языка на экран:

export default async function HomePage({ params }) {
	let { lang } = await params;
	
	return <p>{lang}</p>;
}

Создайте сегмент [lang] и выведите на главной полученный код языка внутри заголовка первого уровня.

Проверьте в браузере адреса /en и /ru - текст заголовка должен совпадать с сегментом.