Условный рендеринг изображения на сервере в Next.js

Я решил использовать медиа-запросы, чтобы сначала посмотреть, будет ли это отображаться на сервере, и, похоже, он делает то, что я хочу!

    <>
      <Image
        height = {800}
        width = {800}
        className = "w-full max-lg:min-h-[515px] max-lg:scale-[1]  lg:hidden"
        src = {heroMobile.src}
        alt = "hero"
      />
      <Image
        height = {1600}
        width = {1600}
        className = "hidden lg:flex"
        src = {hero.src}
        alt = "hero"
      />
    </>

Но если у кого-то есть другое решение, пожалуйста, поделитесь.

Обновлено: Извините, я разместил это до обновления и увидел ответы.