Next.js + styled components -> @media breakpoint + change image content ?

[michalfialadev]

Hi! I have following piece of code, which runs swimmingly in dev mode (npm run dev), but bugs out, when published live (npm run build + export [nextjs static site]):

import styled from "styled-components";
import { breakpoint } from "../../../styles/breakpoints";

const ProjectPage = (props) => {

  const ProjectImage = styled.div`
    width: 90vw;
    height: 45vw;
    margin-left: 0.5rem;
    border-radius: 20px 0 20px 0;
    content: url(${props.pageData.imgMedium});

    @media ${breakpoint.ld} {
      content: url(${props.pageData.imgLarge});
    }
  `;

 return (
	..
        <ProjectImage />
	..
 );
};

When the screen size changes, and the media query fires, the image gets properly replaced by its ld/md version. This is a requirement No1 and works using the styled-components @media queries. However, when i follow a <Link> to another page (same page component- just different data), the old image stays in place (does not get replaced by a new image). This 'bug' only happens in static site on a live server, no bug happens when running 'npm run dev' mode.

It might be a problem with DOM not getting refreshed by NextJS (but only for static export/live)?
As soon as i remove the 'content' css property and replace it with an in-component prop
<ProjectImage />
to
<ProjectImage src={props.pageData.imgMedium} />
then everything works. But then i can not provide different image sizes (versions) for different screen resolutions (which is actually what i want to achieve).. So my question actually relates to how to correctly provide different images for different breakpoints/screen resolutions across multiple places of same container type, but filled with different data? Should i not use @media query? What is the best-practice and what code should i use in this case?

The project uses styled-components, sorry if this is sc related issue, im a beginner and a bit lost. Help! :)