React Routerの設定について

実現したいこと

https://reffect.co.jp/react/react-firebase-auth#React_Router
このサイトの7 React Routerの設定の最初の部分を実装したいです。

前提

6のユーザー情報の共有の部分まではできていて実際に動いているのですが、
<BrowserRouter>を書いた途端に以下のエラーが出て動いてくれません。
react-router-domは記事に倣ってv5を入れてます。

"react-router-dom": "5.2.0"

発生している問題・エラーメッセージ

Server Error
Error: Invariant failed: Browser history needs a DOM

該当のソースコード

js
1//_app.js
2import '@/styles/globals.css'
3import React  from 'react';
4import SignUp from './components/SignUp';
5import {AuthProvider} from './context/AuthContext';
6import {BrowserRouter,Route} from 'react-router-dom';
7
8
9export default function App({ Component, pageProps }) {
10  return (
11    <AuthProvider>
12      <div style={{ margin: '2em' }}>
13      <BrowserRouter>
14        <Route exact path="/signup" component={SignUp} />
15      </BrowserRouter>
16      </div>
17    </AuthProvider>
18  );
19}

js
1//SignUp.js
2import {auth} from '../../firebase';
3import { useAuthContext } from '../context/AuthContext';
4
5const SignUp = () => {
6    const handleSubmit = (event) =>{
7        event.preventDefault();
8        const{email,password} = event.target.elements;
9        auth.createUserWithEmailAndPassword(email.value,password.value);
10    };
11
12    return (
13        
14        <div>
15            <h1>ユーザ登録</h1>
16            <form onSubmit={handleSubmit}>
17                <div>
18                    <label>メールアドレス</label>
19                    <input name='email' type='email' placeholder="email" />
20                </div>
21                <div>
22                    <label>パスワード</label>
23                    <input name='password' type="password" />
24                </div>
25                <div>
26                    <button>登録</button>
27                </div>
28            </form>
29
30        </div>
31
32    )
33
34
35  };
36  
37  export default SignUp;
38

json
1{
2  "name": "frontend",
3  "version": "0.1.0",
4  "private": true,
5  "scripts": {
6    "dev": "next dev",
7    "build": "next build",
8    "start": "next start",
9    "lint": "next lint"
10  },
11  "dependencies": {
12    "@emotion/core": "^11.0.0",
13    "@emotion/react": "^11.10.6",
14    "@emotion/styled": "^11.10.6",
15    "autoprefixer": "10.4.14",
16    "axios": "^1.3.5",
17    "eslint": "8.38.0",
18    "eslint-config-next": "13.3.0",
19    "firebase": "^9.20.0",
20    "history": "4.10.1",
21    "next": "13.3.0",
22    "postcss": "8.4.21",
23    "react": "18.2.0",
24    "react-dom": "18.2.0",
25    "react-router-dom": "5.2.0",
26    "tailwindcss": "3.3.1"
27  },
28  "devDependencies": {
29    "@types/react-router-dom": "^5.3.3"
30  }
31}
32

試したこと

ChatGPTにひたすら聞いてやってみたんですけど

BrowserRouter を HashRouter に変更する =>ページが表示されない

BrowserRouter を使用する場合、クライアントサイドでのみ使用するようにする =>　document is not defindって出てソレの解消もわからん

これらの方法を試して、問題を解決できるかどうか確認してみてください。

また、回答にあるように、BrowserRouter を使用する場合、以下のようにクライアントサイドでのみ使用する必要があります。

javascript
1if (typeof window !== 'undefined') {
2  const BrowserRouter = require('react-router-dom').BrowserRouter;
3  ReactDOM.render(
4    <BrowserRouter>
5      <App />
6    </BrowserRouter>,
7    document.getElementById('root')
8  );
9}