NextJS + Netlify breaks styles after removing serversideprops

23 Views Asked by At

I have a NextJS project which I'm hosting on Netlify because I'm using netlifycms. Index page looks like this:

//import ReactMarkdown from 'react-markdown'
//import fs from 'fs'
//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: enter image description here

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

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"
  }
}
0

There are 0 best solutions below