NextJS 应用程序目录仅项目 FOUC 控制台错误答案

【问题标题】：NextJS app directory only project FOUC with console errorNextJS 应用程序目录仅项目 FOUC 控制台错误
【发布时间】：2023-02-18 09:16:08
【问题描述】：

刚刚使用 app 目录启动了一个全新的 NextJS 13 项目。我正在使用脉轮用户界面。我在控制台中看到一闪而过的无样式内容和错误。该页面是我的登录页面，我的中间件在未登录时重定向到该页面。我在登录页面目录中确实有一个加载，但它从未显示过。

我的package.json 文件

  "dependencies": {
    "@chakra-ui/pro-theme": "^0.0.57",
    "@chakra-ui/react": "^2.4.3",
    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@types/node": "18.11.10",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "cookies-next": "^2.1.1",
    "eslint": "8.28.0",
    "eslint-config-next": "13.0.5",
    "framer-motion": "^6.5.1",
    "next": "13.0.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.7.1",
    "typescript": "4.9.3"
  }
}

我的middleware.ts

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
import hasSession from "./helpers/gate/hasSession";

export const config = {
  matcher: [
    /*
     * Match all request paths except for  the ones starting with:
     */
    "/((?!login|favicon.ico).*)",
  ],
};

export function middleware(request: NextRequest) {
  // if it is internal (like css etc), just allow it
  // console.log(request.url);
  if (request.nextUrl.pathname.startsWith("/_next/")) {
    return NextResponse.next();
  }

  // Example function to validate auth
  if (hasSession(request)) {
    return NextResponse.next();
  }

  const loginUrl = new URL("/login", request.url);
  // loginUrl.searchParams.set("from", request.nextUrl.pathname);
  return NextResponse.redirect(loginUrl);
}

app下的根布局文件

import Chakra from "../lib/ChakraProvider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head />
      <body>
        <Chakra>{children}</Chakra>
      </body>
    </html>
  );
}

和chakraprovider文件

"use client";

import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import { theme as proTheme } from "@chakra-ui/pro-theme";

export default function Chakra({ children }: { children: React.ReactNode }) {
  return (
    <ChakraProvider theme={proTheme}>
      <ColorModeScript initialColorMode={"dark"} />
      {children}
    </ChakraProvider>
  );
}

【问题讨论】：

尝试删除所有情绪和脉轮包并将它们添加回去
出于什么目的？
仅凭经验，我也有过一次FOUC。据我所知，这些包在使用 yarn 或 npm 安装时也可能很敏感。

标签： reactjs next.js emotion chakra-ui

【解决方案1】：

我遇到了这个问题，this post 帮助我解决了 FOUC 的问题。正如作者建议的那样：“发生这种情况是因为来自的 Chakra UI 样式表未在服务器端加载，仅在客户端加载“

解决方案： ”使用@emotion/cache 和@emotion/server 来防止初始无样式的内容”

【讨论】：