В чем разница в маршрутизации Next.js и React Router?

Главное различие: в React Router маршруты описываются кодом в клиентском приложении, в Next.js — файловой структурой, и роутинг работает не только на клиенте, но и на сервере.

React Router: код и клиент

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path="products/:id" element={<Product />} />
  </Route>
</Routes>

• Конфигурация — JSX/объекты в коде; полная свобода структуры.
• Работает целиком в браузере (History API): сервер отдаёт один index.html.
• Code splitting по маршрутам — вручную (React.lazy).
• Данные — самостоятельно (React Query, loaders в v6.4+).

Next.js: файловая система и сервер

app/
  layout.tsx        → общий layout
  page.tsx          → /
  products/
    [id]/page.tsx   → /products/:id

• Маршрут = папка/файл; конвенции: page, layout, loading, error, not-found.
• Серверная составляющая: страницы рендерятся на сервере (SSR/SSG/ISR), App Router делает их серверными компонентами по умолчанию; загрузка данных — прямо в компоненте маршрута (async).
• Автоматический code splitting по маршрутам, префетч ссылок из коробки (<Link> подгружает следующий маршрут заранее).
• Вложенные layout'ы сохраняют состояние при навигации; middleware, перехват маршрутов, параллельные маршруты.

Практические следствия

• React Router — часть SPA: полный контроль, но всё (SSR, сплиттинг, данные) собираешь сам.
• Next.js — фреймворк: конвенции вместо конфигурации, SEO и производительность из коробки, но меньше свободы и привязка к структуре файлов.

Коротко для собеседования

React Router: маршруты в коде, чисто клиентская навигация, всё остальное — вручную. Next.js: файловый роутинг с конвенциями (page/layout/loading), серверный рендеринг и серверные компоненты, автоматический сплиттинг и префетч. По сути сравнение «библиотека в SPA» против «полноценный фреймворк с сервером».