React Material UI CardMedia issue

Question

I used CardMedia to show images, when I go to home page, it doesn't show the images and have some errors. When I click some links and use 'Go Back' button in Browser, images come back.

I use getInitialProps() to get image url in Home component and pass as a property to child (Catalog) component.

I thought Image url would be received in Home component then CardMedia will render the image receiving from Home component as a prop. Any thoughts?

export default function Home({ categories }) {
 
    return (
        <div>
            <Header categories={ categories}/>
            <Carousel />
       
            <Catalog categories={ categories}/>
            <Footer/>
        </div>
    )
}

Home.getInitialProps = async () => {
    const response = await fetch('http://localhost:1337/categories/')
    const categories = await response.json();
    return {
      categories:categories
    }
  }

export default function Catalog(props) {
  const classes = useStyles();
  const cards = props.categories
  const server = 'http://localhost:1337'
  console.log(cards)
  return (
    <React.Fragment>
      <CssBaseline />

      <main>
        {/* Hero unit */}
        <div className={classes.heroContent}>
          <Container maxWidth="sm">
            <Typography component="h1" variant="h2" align="center" color="textPrimary" gutterBottom>
              Album layout
            </Typography>
            <Typography variant="h5" align="center" color="textSecondary" paragraph>
              Something short and leading about the collection below—its contents, the creator, etc.
              Make it short and sweet, but not too short so folks don&apos;t simply skip over it
              entirely.
            </Typography>
          </Container>
        </div>
        <Container className={classes.cardGrid} maxWidth="md">
          {/* End hero unit */}
          <Grid container spacing={4}>
            {cards.map((card) => (
              <Link as={`/products/${card.category}`} href='/products/[bathroom]' key={card.id}>
                <Grid item key={card.category} xs={12} sm={6} md={4} >
                  <Card className={classes.card}>
                    <CardMedia
                      className={classes.cardMedia}
                      image={server+ card.img.url}
                      category={card.category}

                    />
                    <CardContent className={classes.cardContent}>
                      <Typography gutterBottom variant="h5" component="h2">
                        {card.category}
                      </Typography>
                      <Typography>
                        Product description.
                    </Typography>
                    </CardContent>

                  </Card>
                </Grid>
              </Link>


            ))}
          </Grid>
        </Container>
      </main>
      {/* Footer */}

      {/* End footer */}
    </React.Fragment>
  );
}

Answer 1

It turns out that CSS rendering is a bit different in Next.js. see this doc https://material-ui.com/guides/server-rendering/