Next.js – Dynamically change Body’s background image based on screen size

I’m using Next.js 14.2.12 and I’m trying to create a login page with different background images for the <body> element based on screen size. Here’s the basic structure of my src/app/login/page.tsx component:

"use client";

const Login: React.FC = () => {
  return (
    <>
      <p>Some text</p>
    </>
  );
};

export default Login;

Is there a built-in way in Next.js to achieve this? Or do I need to use CSS media queries and JavaScript to dynamically update the background image? If so, how can I do this efficiently without affecting performance?

I am working with the following four screen sizes and I want to apply four different images of PNG format.

enter image description here