Next.js 13 App Router + Chakra UI = FOUC (flash of unstyled content) #8098
Unanswered
Hulkstance
asked this question in
General
Replies: 2 comments
-
|
same experience with next 14 here. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I have finally found a working solution to this issue on NextJS 14 by manually implementing a cookie based Here is my solution... layout.tsx import { ThemeProvider } from "@/providers/ThemeProvider";
import { cookies } from "next/headers";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const cookiesList = cookies();
const colorMode = cookiesList.get("chakra-ui-color-mode");
return (
<html lang="en>
<link rel="icon" href="/favicon.ico" sizes="any" />
<body>
<ThemeProvider colorMode={colorMode?.value}>
<main className={styles.main}>{children}</main>
</ThemeProvider>
</body>
</html>
);
}ThemeProvider.tsx "use client";
import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
import Theme from "@/lib/theme";
import React from "react";
import { CacheProvider } from "@chakra-ui/next-js";
import { setCookie } from "cookies-next";
export const ThemeProvider = ({
colorMode,
children,
}: {
colorMode?: any;
children: React.ReactNode;
}) => {
return (
<CacheProvider>
<ChakraProvider
colorModeManager={{
type: "cookie",
ssr: true,
get: (init) => colorMode ?? init,
set: (value) => {
setCookie("chakra-ui-color-mode", value);
},
}}
theme={Theme}
>
<ColorModeScript
initialColorMode={Theme.initialColorMode}
type="cookie"
/>
{children}
</ChakraProvider>
</CacheProvider>
);
}; |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I've been going through the latest Next.js 13 (with /app folder) changes and created a simple application. When I refresh the page:
How do you guys solve that FOUC (flash of unstyled content)? I'm aware that this happens because the Chakra UI stylesheets from
<ChakraProvider />{:tsx}are not loaded server-side but only client-side.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" } }Beta Was this translation helpful? Give feedback.
All reactions