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

Ответ

Next.js использует файловую систему для маршрутизации – папки и файлы в pages/ автоматически становятся маршрутами (например, pages/about.js/about). Поддерживает SSR, SSG, ISR из коробки.

React Router – клиентская библиотека, требующая явного объявления маршрутов в коде:

<Routes>
  <Route path="/about" element={<About />} />
</Routes>

Ключевые отличия:

  1. Next.js маршрутизация работает на сервере и клиенте, React Router – только на клиенте.
  2. Next.js имеет встроенные оптимизации (пререндеринг), React Router требует дополнительной настройки.
  3. В Next.js динамические маршруты через [id].js, в React Router через path="users/:id".

Пример динамического маршрута в Next.js:

// pages/users/[id].js
export default function User({ data }) {
  return <div>{data.name}</div>
}