Next.js is not rendering CSS in Server Side Rendering

user_1570901 0
Viewed 4491

I have created next.js application using npx create-next-app and have not made any changes to it.

I noticed that imported .css styles are being rendered properly in Client Side Render but not on Server Side Render.

According to Next.js document imported .css should work just fine.

_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:

enter image description here

SSR

enter image description here

server-side-rendering next.js css javascript
2 Answers

If you are not in production mode, it's a normal behavior.

The doc stated this: if you disable JavaScript the CSS will still be loaded in the production build (next start). During development, we require JavaScript to be enabled to provide the best developer experience with Fast Refresh.

Reference

user_118530320

I could reproduce this broken css you shared by removing this line:

// pages/index.js
import styles from '../styles/Home.module.css'

and not:

import '../styles/globals.css'
user_93549340
Related