Prop `href` did not match. Server in Next.js

Question

I am getting the following error in Next.js when I refresh the page.

In NavBar, it is

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>
    )
}

export default NavBar

Project pages structure is :

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

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

I am using the next-export-i18n module for language switching because using next-i18next I was unable to export the build.

Answer 1

TLDR If there is ANY link on the page you are trying to load with href="#" you will get this error when appending a query to the url.

I just ran into the same issue in development. In my case:

• The error occurred when typing in my browser: http://localhost:3000/login?msg=abcd - so the source of the issue could not be a router.push or anything.
• It happened on a page without any getServerSideProps etc

As it turns out, the page itself contains a link with href="#". This will trigger the error.

NB: I tried with other anchor links, but the problem seems to be only with href="#" links. Anchor links with eg href="#welcome" work fine.

I found my problem case here

Answer 2

Here the Error says, that the Next Js client knows /?lang=ar# but the href from props received gives /# so Next Js is throwing an error due to the wrong href.

To solve this change your prop data from /# to # This should work.

In my error I was passing contact-us without / in the start, the link was working but Next js shows an error that it's not a valid link and not good for Search Engines and Robots, so to solve just changed it to /contact-us. And that's it, solved!