NextJS styles break after removing getServerSideProps

Support
, ,
1

I have a NextJS project which I’m hosting on Netlify because I’m using netlify-cms.
https://nextjs-test-agtz.netlify.app
Index page looks like this:

//import matter from 'gray-matter'
import ContactForm from '../components/ContactForm'

export default function Home() {

  return (
    <>

      <h2>Intento de recuperar</h2>
      <img src="/uploads/unnamed.jpg" alt="intento" />
      <p>Lorem ipsum amet mamadas</p>

      <ContactForm />

      <h2>Intento de recuperar</h2>
      <img src="/uploads/unnamed.jpg" alt="intento" />
      <p>Lorem ipsum amet mamadas</p>


    </>

  )
}

// export async function getServerSideProps() {
//   const response = await fetch("https://api.weather.gov/gridpoints/MFL/109,49/forecast")
//   const weatherData = await response.json()

//   return {
//     props: {
//       forecast: weatherData.properties.periods[0].detailedForecast
//     }
//   }
// }

If I uncomment the last function, it works as expected, however, I’m not currently using it and I want it removed since that causes issues with Netlify forms. If I comment/remoce the getServerSideProps function, it will break the styles of the whole website and look like this:

2864×1454 137 KB

I have seen that this is a common error with Nextjs however I haven’t found the solution for this

The reason why I need to remove the serverSideProps is because Netlify forms will not work if I have it in that page, more comments here: Netlify forms + NextJS + MUI not working inside component

Here’s the package.json file

{
  "name": "learngin-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@mui/material": "^5.13.1",
    "@netlify/plugin-nextjs": "^4.37.2",
    "gray-matter": "^4.0.3",
    "next": "^13.4.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-markdown": "^6.0.3",
    "sharp": "^0.32.1"
  },
  "devDependencies": {
    "babel-plugin-styled-components": "^2.1.3"
  }
}
2

I checked now and I don’t see any style issues on your website. Has this been resolved?

3

Hi, no , I haven’t been able to solve it. I have uncommented that part of the code since I’m under a deadline and I need to keep developing other parts of the website , but as of now the contact form is not working and that’s why I want to remove the getServerSideProps.

Thanks for looking at it, I can revert that page to the non-working version if you’re willing to take a look

4

Done, I have commented the getServerSideProps now . The broken styles are now the issue, not the contact form

5

Please turn off post processing > asset optimization from your site settings.

6

How do I do that? I read that before but I have no configuration set to the best of my knowledge

7

Disable this: Netlify App

8

Thank you very much! Why is that option breaking styles ? I would like to understand

9

This is listed as a limitation: Next.js on Netlify | Netlify Docs

1 Like
10

Thanks again! I didn’t know it was active by default

11

I don’t think it is, it needs to be manually activated, or at least that used to be the case. If you say it’s automatically activated, it would break almost all Next.js sites now - which doesn’t seem to be the case.

13

That’s odd. I didn’t activate it , this is the first time that I’m using next js and the site didn’t break until I attempted to remove the SSR from that particular page.

14

Weird. Anyways, I suppose all the matters now is that it’s working fine.

1 Like