Next.js Discord

Discord Forum

Next14 App Router, MUI using a nonce

Unanswered
Toyger posted this in #help-forum
Open in Discord
ToygerOP
I have followed the docs to create the middleware for the nonce, however MUI's docs on using the nonce don't help and just seem to cause a lot more problems.
https://nextjs.org/docs/app/building-your-application/configuring/content-security-policy
https://mui.com/material-ui/guides/content-security-policy/

Not really sure what else to try or do? I've left just the base code bellow if anyone can provide any help it would be appreciated
The csp header is definitely there with the nonce as I can see it when checking dev tools as well 

// middleware.ts
Exactly the same from docs


// root layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <html>
        <AppRouterCacheProvider options={{ enableCssLayer: true }}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            <NextTopLoader
              color="#2299DD"
              initialPosition={0.08}
              crawlSpeed={200}
              height={3}
              crawl={true}
              showSpinner={true}
              easing="ease"
              speed={200}
              shadow="0 0 10px #2299DD,0 0 5px #2299DD"
              zIndex={9999}
            />

            {/* App bar */}
            <AppBar /
            <React.Suspense fallback={<Loading />}>
              <Box
                component="main"
                sx={{
                  flexGrow: 1,
                  bgcolor: "background.default",
                  mt: ["48px", "56px", "64px"],
                  p: 3,
                }}
              >
                {children}
              </Box>
            </React.Suspense>
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

0 Replies