How can I pass routes in Next.js?

Question

I'm trying to pass routes to my Next.js app but it's returning an error, I've looked everywhere but I can't find the answer.

_App.tsx

import Routes from './Routes'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Index/>
  )
}

export default MyApp

Routes.tsx

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import { SideBar } from './components/sideBar'

const Routes = () => {
  return (
    <div className={styles.container}>
      <Router>
        <Routes>
          <Route path='/' element={<SideBar />}/>
        </Routes>
      </Router>
    </div>
  )
}

export default Routes

My error:

ReferenceError: document is not defined

Answer 1

you can Routes like this

<BrowserRouter>
 <Routes>
  <Route path="/" element={< Home />} />
  <Route path="/yourComponentsPage" element={< yourComponent/>} />
 </Routes>
</BrowserRouter>

regards