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.