当我刷新页面时，在Next.js中收到以下错误。

在NavBar中，它是

import Link from "next/link"
import { useRouter} from "next/router"
import { useTranslation, useLanguageQuery, LanguageSwitcher } from 'next-export-i18n'
import { useEffect, useState } from 'react'

const NavBar = ({...props}) => {
    const router = useRouter()
    const { t } = useTranslation('navbar')
    var [queryLanguage] = useLanguageQuery()
    const [language, setLanguage] = useState(null)

    useEffect(() => {
        if(queryLanguage){
            setLanguage(queryLanguage.lang)
        }
    },[queryLanguage])

    return(
        <div id="app-sidepanel" className="app-sidepanel sidepanel-hidden">
            <div id="sidepanel-drop" className="sidepanel-drop">
            </div>
            <div className="sidepanel-inner d-flex flex-column">
                <a href="#" id="sidepanel-close" className="sidepanel-close d-xl-none">&times;</a>
                <div className="app-branding">

                    <Link href={{ pathname: '/', query: (router.query.lang) ? 'lang='+router.query.lang : null }} as={{ pathname: '/', query: (router.query.lang) ? 'lang='+router.query.lang : null }}>
                        <a className="app-logo">
                            <img src="/images/sa-logo.svg" alt="" width={150} height={75}  />
                        </a> 
                    </Link>
                </div>
                <nav id="app-nav-main" className="app-nav app-nav-main flex-grow-1">
                    <ul className="app-menu list-unstyled accordion" id="menu-accordion">

                        <li className={router.pathname == "/" ? "active-link nav-item" : "nav-item"}>

                            <Link href={{ pathname: '/', query: (router.query.lang) ? 'lang='+router.query.lang : null }} as={{ pathname: '/', query: (router.query.lang) ? 'lang='+router.query.lang : null }}>
                                <a className="nav-link">
                                    <span className="nav-icon">
                                        <img src="/icons/dashboard.png" width="28" height="28"  alt=""   />
                                    </span>
                                    <span className="nav-link-text">{t('live_view')}</span>
                                </a>
                            </Link>

                        </li>
                        <li className={router.pathname.startsWith('/settings') ? "active-link nav-item dropdown" : "nav-item dropdown"}>
                            <a
                                className="nav-link dropdown-toggle"
                                href="#"
                                id="navbarDropdown"
                                role="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="true"
                            >
                                <span className="nav-icon"><img src="/icons/setting.png" alt="" width="28" height="28"  /> </span>
                                <span className="nav-link-text">{t('settings')}</span>
                            </a>

                            <ul className="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li className={router.pathname.startsWith('/settings/locations') ? "active-link" : ""}>
                                    <Link href="/settings/locations">
                                        <a className="dropdown-item">{t('locations')}</a>
                                    </Link>
                                </li>
                                <li className={router.pathname.startsWith('/settings/employeetypes') ? "active-link" : ""}>
                                    <Link className="dropdown-item" href='/settings/employeetypes'>
                                        <a className="dropdown-item">{t('employee_type')}</a>
                                    </Link>
                                </li>
                                <li className={router.pathname.startsWith('/settings/employeestatuses') ? "active-link" : ""}>
                                    <Link href='/settings/employeestatuses'>
                                        <a className="dropdown-item">{t('employee_status')}</a>
                                    </Link>
                                </li>
                                <li className={router.pathname.startsWith('/settings/vehicletypes') ? "active-link" : ""}>
                                    <Link href='/settings/vehicletypes/'>
                                        <a className="dropdown-item" >{t('vehicle_type')}</a>
                                    </Link>
                                </li>
                                <li className={router.pathname.startsWith('/settings/vehiclestatuses') ? "active-link" : ""}>
                                    <Link href='/settings/vehiclestatuses/'>
                                        <a className="dropdown-item" href="#">{t('vehicle_status')}</a>
                                    </Link>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

                <div className="app-sidepanel-footer">
                    <nav className="app-nav app-nav-footer">
                        <ul className="app-menu footer-menu list-unstyled">
                            <li className="nav-item">
                                <div className="form-check form-check-inline multi-language-switch">

                                    {(queryLanguage) ? (queryLanguage.lang == 'en') ? <img src="/icons/tick.png" alt="" width="20" height="20" /> : '' : ''}
                                    <LanguageSwitcher lang="en">English</LanguageSwitcher> |{' '}

                                </div>
                                <div className="form-check form-check-inline multi-language-switch">

                                    {(queryLanguage) ? (queryLanguage.lang == 'ar') ? <img src="/icons/tick.png" alt="" width="20" height="20" /> : '' : ''}
                                    <LanguageSwitcher lang="ar">Arabic</LanguageSwitcher>

                                </div>
                            </li>

                            <li className="nav-item">
                                <a className="nav-link" href="mailto:deepanshu@rkmarketing.net" target="_blank" rel="noreferrer">
                                    <span className="nav-icon"><img src="/icons/contact.png" alt="" width="28" height="28"  /></span>
                                    <span className="nav-link-text">{t('contact_administrator')}</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    )
}

导出默认导航栏
项目页面结构为：

pages
   index.js
   _app.js
    settings / locations / index.js
                           add.js
                           edit / [...id].js

            / employeetypes  / index.js
                          add.js
                          edit / [...id].js

我使用next-export-i18n模块进行语言切换，因为使用next-i18next我无法导出构建。