After creating my next.js application using the command npx create-next-app, I realized that the styles from the imported .css files are rendering correctly on Client Side Render but not on Server Side Render.
The Next.js documentation states that imported .css should work without any issues.
_app.js
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
package.json
{
"name": "next-test",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "10.0.9",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}
CSR:
https://i.sstatic.net/ujVzA.png
SSR