Style not working properly using Material-ui with Next js.
Getting warning:
"Warning: Prop
className
did not match. Server:"
I have used below Nextjs With Material-ui example.
Environment:
Ubuntu : 18.10
Material-ui: 3.9.3
NextJs : 8.0.4
I have created custom server file (server.js) for production (PM2 server.js) Its working fine on the local machine using npm run dev
command but on the live server, I think there is some issue with custom server.js
file.
Server.js
const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV === "production";
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("*", (req, res) => {
return handle(req, res);
});
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});
Packege.json file
{
"name": "nextjs-next",
"version": "4.0.0",
"private": true,
"dependencies": {
"@material-ui/core": "next",
"@material-ui/icons": "^3.0.2",
"@material-ui/styles": "next",
"apollo-boost": "^0.3.1",
"clsx": "latest",
"express": "^4.16.4",
"graphql": "^14.2.0",
"isomorphic-unfetch": "^3.0.0",
"joi-browser": "^13.4.0",
"jss": "next",
"next": "latest",
"prop-types": "latest",
"react": "latest",
"react-apollo": "^2.5.3",
"react-dom": "latest"
},
"scripts": {
"dev": "node server.js",
"build": "next build",
"prod_start": "NODE_ENV=production node server.js"
}
}
Anyone please suggest possible solutions to fix this issue.
Thanks