Next.js is not rendering CSS in Server Side Rendering

Question

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:

SSR

Did you use a local http server to host the SSR version?

danieltan95
– danieltan95

2021-03-31 01:19:14 +00:00
Commented Mar 31, 2021 at 1:19 — danieltan95
– danieltan95, Commented Mar 31, 2021 at 1:19

enoch · Accepted Answer · 2021-03-21 18:06:19Z

6

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

answered Mar 21, 2021 at 18:06

enoch

3,2012 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sravis Over a year ago

I just did next build and next start to check the production build. Still same issue.

enoch Over a year ago

i have created a new next project and also did next build and next start, styles is loaded. what version are you using?

jackstride Over a year ago

I should read the docs better but cheers for this info

insivika Over a year ago

Hey @sravis did you figure out a solution for this?

Low Over a year ago

This works for me. Was wrecking my brain why this was not working on local

armin yahya · Accepted Answer · 2021-03-30 15:03:49Z

0

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'

answered Mar 30, 2021 at 15:03

armin yahya

1,5169 silver badges17 bronze badges

2 Comments

armin yahya Over a year ago

of course, you should leave empty styles object there.

MatanCo Over a year ago

Named import into object doesn't work :(

Collectives™ on Stack Overflow

Next.js is not rendering CSS in Server Side Rendering

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related