Реализован i18n без использования сторонних библиотек
- middleware.ts - основной функционал работы i18n
- getLang() - возвращает выбранный язык
en | ru - useLang() - как
getLang(), только для клиентского компонента - getDictionary() - возвращает объект с переводами
ключ-значение - useDictionary() - как
getDictionary(), только для клиентского компонента - type Dictionary
- /dictionary - директория с json файлами переводов
- Link - компонент Link для i18n
Все компоненты Link экспортируем из @/shared/config/i18n !
Не нужно прокидывать props в каждый компонент, где используется перевод:
- export const Navbar = ({ dict }: { dict: Dictionary['ui'] }) => {...}
+ export const Navbar = async () => {
+ const dictionary = await getDictionary();Не нужно передавать язык в getDictionary(lang), как это реализовано в документации Next.js:
- getDictionary(lang)
+ getDictionary()Просто используем в любом серверном компоненте const dict = await getDictionary();, прокидываем в клиентский компонент как props { dict }: { dict: Dictionary['ui'] } или используем useDictionary()
MDX синхронизирован с i18n
app/[lang]/projects/[category]/[name]/page.tsx- layout для mdx файлов проектов;app/[lang]/projects/[category]/page.tsx- страница отображения проектов из категории;- getMdx() - получение metadata и контента из mdx;
- getProject(category, name) - получение проекта по категории и имени;
- getProjectsByCategory(category) - получение всех проектов в выбранной категории;
- getProjects() - получение всех категорий и проектов;
- mdx-components.tsx - настройка отображения mdx;
- MDXRemote - общая настройка MDXRemote;
- rehypeExtractCodeProps - самописный rehype-плагин для чтения пар ключ-значение в коде.
Вывод mdx страниц и метаданных происходит за счёт преобразования его через gray-matter. Рендер mdx через MDXRemote next-mdx-remote/rsc для серверного рендеринга (смотреть MDXRemote)
Проект написан в соответствии с архитектурной методологией Feature-Sliced Design и AppRouter (Next.js).