К списку правил

Правила создания новых роутов и использования их

Workflow

  1. Создать роут в app -> [locale]
  2. Добавить роут в файл shared -> constants -> routes.ts
  3. Использовать компонент Link из i18n/navigation.ts или next/link
  4. Использовать объект с роутами 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>
        </>
    )
}