Thursday, 25 March 2021

Next.js is not rendering CSS in Server Side Rendering

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



from Next.js is not rendering CSS in Server Side Rendering

No comments:

Post a Comment