ReTabNews

Quando navego entre páginas percebo que os componentes "piscam" sem estilo

Se está recarregando quando navega entre páginas você está esquecendo de usar o <NextLink>

// layout.tsx
import "./globals.css";
import { CssBaseline, ThemeProvider } from "@mui/material";
import { AppRouterCacheProvider } from "@mui/material-nextjs/v13-appRouter";
import theme from "./MuiTheme";

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1, width=device-width" />
      </head>
      <body className={`antialiased`}>
          <AppRouterCacheProvider options={{ enableCssLayer: true }}>
            <ThemeProvider theme={theme}>
              <CssBaseline enableColorScheme />
              {children}
            </ThemeProvider>
          </AppRouterCacheProvider>
      </body>
    </html>
  );
}

// MuiTheme.tsx
'use client'
import { createTheme } from "@mui/material";
import { ForwardedRef, forwardRef } from "react";
import NextLink from 'next/link';

const LinkBehaviour = forwardRef(function LinkBehaviour(props, ref) {
    return <NextLink ref={ref} {...props} />;
});

export default createTheme({
    colorSchemes: {
        light: true,
        dark: true,
    },
    cssVariables: true,
    components:{
        MuiLink: {
            defaultProps: {
                component: LinkBehaviour,
            }
        }
    }
})

Material UI + Next.js App Router: Estilos "piscam" no carregamento mesmo com CssBaseline