Next.js 13 - Chakra UI - 暗模式白屏 Flash - FOUC（无样式内容的 Flash）

问题描述 投票：0回答：1

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

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

刷新时从 cookies 和 localStorage 访问和应用设置似乎存在延迟。不确定此 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/[区域设置]/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/[语言环境]/(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"
  }
}
typescript next.js loading next.js13 chakra-ui
1个回答
0
投票

enter image description here

如果您将 next js 13 与 chakra ui 一起使用，那么这里是快速修复，您可以申请停止 next js 中的启动闪烁问题。添加颜色模式脚本

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.