nextjs：警告：道具 `className` 不匹配。 服務器：“x” 客戶端：“y”

Question

這是我的代碼：

export default function Nav() {
    const { userLogin } = useUser()
    console.log(userLogin)
    
    return (
        <nav className={styles.nav}>
            {!userLogin ? (
                <Link href={"/login"}><a className={`${styles.top}`}></a></Link>
            ) : (
                <Link href={"/profile"}><a className={`${styles.userLogged}`}></a></Link>
            )}
        </nav>
    )
}

這是useUser ：

export default function useUser(){
    var userLogin = false

    const cookies = parseCookies()
    if (cookies.token) {
        userLogin = true
    }

    return { userLogin }
}

因此，如果userLogin為false ，則一切正常。

但如果userLogin為true ，我會收到此錯誤：

Warning: Prop `className` did not match. Server: "x" Client: "y"

當我使用 cookies 時顯示此錯誤。

我不想使用next/dynamic 。 因為點擊時再次dynamic重新加載組件。

Answer 1

如果 parseCookies 僅發生在客戶端，也就是使用document ，那么接下來的 HTML 將與客戶端不同，這發生在我的 localStorage 上，因為我使用的是window 。

但是因為您使用的是 cookies 您可以從 getInitialProps 的 req 參數中獲取它們：

App.getInitialProps = async ({ ctx }) => {
  const { req } = ctx;

  const cookies = parseCookies(req ? req.headers.cookie : document.cookie);

  return {
    pageProps:  { cookies }
  };
};

如果您使用nookies ，他們與const cookies = parseCookies(ctx)有一個很酷的集成，它允許您將ctx作為第一個參數傳遞，如下ctx ：

見https://github.com/maticzav/nookies/blob/c4b1ca461e7b04877d295cb740fa8cbc1db2ad36/packages/nookies/src/index.ts?_pjax=%23js-repo-pjax-container%2D%2220div%5%%3divtype 2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L15