Next font sever/client mismatch in app dir
Hi trying to include a style tag which sets css vars based on next font but get the following error
seems likes next font is adding ' on the server, tried logging it but didn't appear in logs ty for any help
here is the layout.tsx (root layout)
Text content did not match. Server: ":root {
--font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}" Client: ":root {
--font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
at style
at body
at html
at RedirectErrorBoundary
...
at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
at RSCComponent
at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)Text content did not match. Server: ":root {
--font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}" Client: ":root {
--font-p: '__Montserrat_656221', '__Montserrat_Fallback_656221';
}"
at style
at body
at html
at RedirectErrorBoundary
...
at Router (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:90:11)
at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:62:9)
at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/error-boundary.js:87:11)
at AppRouter (webpack-internal:///(app-client)/./node_modules/next/dist/client/components/app-router.js:372:13)
at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:154:11)
at RSCComponent
at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:171:11)seems likes next font is adding ' on the server, tried logging it but didn't appear in logs ty for any help
here is the layout.tsx (root layout)
import { Montserrat } from 'next/font/google'
const font_p = Montserrat({
subsets: ['latin'],
variable: '--font-p',
})
const var_styles = `:root {
--font-p: ${font_p.style.fontFamily};
}`
export default async function RootLayout({ children }: {children: React.ReactNode,}) {
return <html lang="en">
<body className={`${font_p.variable}`}>
<style>{var_styles}</style>
{children}
</body>
</html>
}import { Montserrat } from 'next/font/google'
const font_p = Montserrat({
subsets: ['latin'],
variable: '--font-p',
})
const var_styles = `:root {
--font-p: ${font_p.style.fontFamily};
}`
export default async function RootLayout({ children }: {children: React.ReactNode,}) {
return <html lang="en">
<body className={`${font_p.variable}`}>
<style>{var_styles}</style>
{children}
</body>
</html>
}Solution
It looks like it’s encoding the
''. What happens if you dangerously set html for var styles