Next.jsにおいてauth0-reactライブラリを使用しloginWithRedirectを呼び出した時に正しいURLに遷移できない

前提

Next.js(TypeScript)でAuth0を使用したユーザー認証機能があるページを作っています。

実現したいこと

Auth0のログイン画面に遷移する

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

LoginボタンをクリックしてonClickを発火させloginWithRedirectを呼び出してもエラー画面に遷移してしまいます。

URLから考えるに本来、ドメインとクライアントIDとリダイレクトURLがセットされてURLが完成するところに、なんらかの理由でそれらが空文字のままセットされていることが原因かと思われるがそれがなぜ生じるのかが分からない。

該当URL：https://authorize/?client_id=&redirect_uri=&scope=openid%20profile%20email&response_type=code&response_mode=query&state=[ただしそうな値]&nonce=[ただしそうな値]&code_challenge=[ただしそうな値]&code_challenge_method=S256&auth0Client=[ただしそうな値]
該当エラー：DNS_PROBE_FINISHED_NXDOMAIN

該当のソースコード

TypeScript
1import {useAuth0} from "@auth0/auth0-react";
2import {Button} from "@mui/material";
3
4const AuthButton = () => {
5    const {
6        isAuthenticated,
7        loginWithRedirect,
8        logout
9    } = useAuth0();
10
11    return (
12        <div className="left" >
13        {isAuthenticated && (
14            <Button color="inherit" onClick={() => logout()}>Logout</Button>
15        )}
16        {!isAuthenticated && (
17            <Button color="inherit" onClick={() => loginWithRedirect()}>Login</Button>
18        )}
19        </div>
20    )
21}
22
23export default AuthButton

TypeScript
1import '../styles/globals.css'
2import type { AppProps } from 'next/app'
3import Header from "../components/atomic/Header";
4import {Auth0Provider} from "@auth0/auth0-react";
5
6function MyApp({ Component, pageProps }: AppProps) {
7    const redirectUrl = process.env.AUTH0_REDIRECT_URL ?? ""
8    const domain = process.env.AUTH0_DOMAIN ?? ""
9    const clientId = process.env.AUTH0_CLIENT_ID ?? ""
10
11    return (
12        <Auth0Provider
13            domain={domain}
14            clientId={clientId}
15            redirectUri={redirectUrl}
16        >
17            <Header/>
18            <Component {...pageProps} />
19        </Auth0Provider>
20    )
21}
22
23export default MyApp