К списку правил
Правила создания новых роутов и использования их
Workflow
- Создать роут в app -> [locale]
- Добавить роут в файл shared -> constants -> routes.ts
- Использовать компонент Link из i18n/navigation.ts или next/link
- Использовать объект с роутами Routes
Как добавлять роут в файл
// Добавить тип параметра для динамических роутов
type DynamicRoutes = {
user: { userId: string };
};
export const Routes = {
// Для статичных pathname используем строку
home: '/',
about: '/about',
// Для динамических pathname используем функцию(обязательно типизируем параметр) и возвращаем из нее готовый pathname с вставленным параметром
user: (params: DynamicRoutes['user']) => `/user/${params.userId}`,
} as const;
export type Route = keyof typeof Routes;
Использование
// ❌ НЕ ПРАВИЛЬНО - прописывание роута вручную
import Link from 'next/link'
export function Example(props: UserTableProps) {
return <Link href='/about'>About</Link>
}
// ✅ ПРАВИЛЬНО - использование объекта Routes
import { Link } from '@/i18n/routing'
export function Example() {
return (
<>
<Link href={Routes.about}>About</Link>
<Link href={Routes.user({ userId: '123' })}>User Profile</Link>
</>
)
}