Next.js 13 -脉轮UI -暗模式白色屏幕闪光- FOUC(无样式内容闪光)

a14dhokn 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(121)

当我在用Next.js 13 /app文件夹和Chakra UI构建的应用程序中刷新页面时：

屏幕 Flink 白色一秒钟，然后显示黑暗主题。
在应用保存的首选项之前，国际化和字体设置也会在一瞬间恢复为默认设置。

似乎在刷新时访问和应用 * cookie * 和 localStorage 的设置时有延迟。不确定是否与this GitHub问题有关。
我可以通过合并一个加载栏（如NProgress或类似的加载栏）来解决这个问题吗？
我试过使用loading.tsx，但没有成功：

import { Spinner, Flex } from '@chakra-ui/react';
import { Text } from '@chakra-ui/layout';

const Loading = () => {
  return (
    <Flex
      w="100vw"
      h="100vh"
      direction="column"
      color="white"
      justifyContent="center"
      alignItems="center"
    >
      <Text>Just give us a moment...</Text>
      <Spinner
        thickness="4px"
        speed="0.65s"
        emptyColor="gray.200"
        color="blue.500"
        size="xl"
        mt="1rem"
      />
    </Flex>
  );
};

export default Loading;

字符串
实际上，那个加载条根本没出现。怎么了？

src/app/[locale]/layout.tsx

import React from 'react';
import { NextIntlClientProvider } from 'next-intl';
import { notFound } from 'next/navigation';

export function generateStaticParams() {
  return [{ locale: 'en' }, { locale: 'bg' }];
}

type Props = {
  children: React.ReactNode;
  params: {
    locale: string;
  };
};

const AppLayout = async ({ children, params }: Props) => {
  let messages;
  try {
    messages = (await import(`../../messages/${params.locale}.json`)).default;
  } catch (error) {
    notFound();
  }

  return (
    <html lang="en">
      <body>
        <NextIntlClientProvider locale={params.locale} messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
};

export default AppLayout;

型

src/app/[locale]/（main）/layout.tsx

import React from 'react';
import type { Metadata } from 'next/types';

import { InitializeChakra } from '@/components/InitializeChakra';
import { Header } from '@/components/Header';
import { Footer } from '@/components/Footer';

export const metadata: Metadata = {
  title: 'Quant Logistics',
  description: 'Optimization model for production scheduling',
  keywords: 'quant, logistics, quant logistics, optimization model, optimization model for production scheduling',
};

type Props = {
  children: React.ReactNode;
};

const AppLayout = ({ children }: Props) => {
  return (
    <InitializeChakra>
      <Header />
      {children}
      <Footer />
    </InitializeChakra>
  );
};

export default AppLayout;

型

package.json

{
  "name": "logistics",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write ."
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/next-js": "^2.1.5",
    "@chakra-ui/react": "^2.8.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "framer-motion": "^10.16.4",
    "next": "14.0.0",
    "next-intl": "^2.21.0",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "prettier": "^3.0.3",
    "typescript": "^5"
  }
}

型

next.js

来源：https://stackoverflow.com/questions/77385769/next-js-13-chakra-ui-dark-mode-white-screen-flash-fouc-flash-of-unstyled

1条答案

按热度按时间

ffvjumwh1#

import { CacheProvider } from "@chakra-ui/next-js";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import theme from "@/theme";
import { SessionProvider } from "next-auth/react";
import ReactQueryProvider from "@/provider/react-query-provider";
import { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <SessionProvider>
      <ReactQueryProvider>
        <CacheProvider>
          <ColorModeScript initialColorMode="dark" />
          <ChakraProvider resetCSS theme={theme}>
            {children}
          </ChakraProvider>
        </CacheProvider>
      </ReactQueryProvider>
    </SessionProvider>
  );
}

字符串
如果你正在使用下一个js 13与chakra ui然后这里是快速修复您可以申请停止启动 Flink 的问题在下一个js。添加颜色模式脚本

赞(0）回复(0）举报 2023-11-18

我来回答

Next.js 13 -脉轮UI -暗模式白色屏幕闪光- FOUC(无样式内容闪光)

src/app/[locale]/layout.tsx

src/app/[locale]/（main）/layout.tsx

package.json

1条答案

相关问题

热门标签

最新问答