Menu
I have a website built with Nextjs that break styles on page refresh or when a user visits the website directly to a specific route and not the root route. Eg https://vinnieography.web.app/contacts (The site link if it looks ok, try to refresh and see)
The website is hosted on Firebase Functions and uses Nextjs and Ant design components.
Screenshot of the site before a refresh
Screenshot of the site after a refresh (Notice the missing Nav)
The Nav is not completely missing but it became a mobile nav whose icon is not shown but you get a dropdown with Nav links when hovering around the Nav area.
My next.config.js
const withCss = require('@zeit/next-css') module.exports = withCss({ webpack: (config, { isServer }) => { if (isServer) { const antStyles = /antd\/.*?\/style\/css.*?/ const origExternals = [...config.externals] config.externals = [ (context, request, callback) => { if (request.match(antStyles)) return callback() if (typeof origExternals[0] === 'function') { origExternals[0](context, request, callback) } else { callback() } }, ...(typeof origExternals[0] === 'function' ? [] : origExternals), ] config.module.rules.unshift({ test: antStyles, use: 'null-loader', }) } // Fixes npm packages that depend on `fs` module config.node = { fs: 'empty' } return config }, distDir: "../../dist/client" })Versions of Nextjs, React & Antd.
"antd": "^3.24.2", "next": "^9.0.2", "react": "^16.8.6", "react-dom": "^16.8.6", "@zeit/next-css": "^1.0.1", 
792
In this article, we will learn about the Fast refresh in the NextJS project. Fast Refresh is a new hot reloading experience that gives you instantaneous feedback on edits made to your React components. It is now enabled by default for all projects on Next.
If we talk about Next. js applications, they are extremely fast because of the static destinations and server-side rendering. Of course, they are viable due to many performance enhancement features, such as Image Optimization.
Material ui always seems to break on refresh in next js. Is there a configuration setup I have to do? This is probably because your server does not render your styles. Did you try to inject them like the official Mui repo suggests in this example?
Fast Refresh is enabled by default in all Next.js applications on 9.4 or newer. With Next.js Fast Refresh enabled, most edits should be visible within a second, without losing component state. If you edit a file that only exports React component (s), Fast Refresh will update the code only for that file, and re-render your component.
Versions of Nextjs, React & Antd. "antd": "^3.24.2", "next": "^9.0.2", "react": "^16.8.6", "react-dom": "^16.8.6", "@zeit/next-css": "^1.0.1", You have hydration issues involving the styled-components package.
As more of your codebase moves to function components and Hooks, you can expect state to be preserved in more cases. Fast Refresh preserves React local state in function components (and Hooks) by default. Sometimes you might want to force the state to be reset, and a component to be remounted.
I got this issue when working with NextJS 9.4 with MaterialUI.
I got this warning in console whenever styles are broken
Warning: Prop
classNamedid not match. Server: "MuiBox-root MuiBox-root-5" Client: "MuiBox-root MuiBox-root-1" in span (created by Styled(MuiBox))
This is how I fixed.
We need custom document.js and custom app.js as mentioned in MaterialUI NextJS example
Copy _document.js and _app.js from here https://github.com/mui-org/material-ui/tree/master/examples/nextjs/pages
to pages folder
Copy theme.js from https://github.com/mui-org/material-ui/tree/master/examples/nextjs/src and place it somewhere and update the import links in _document.js and _app.js
The styles should work now.
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
