NextJS 13 Hero Component - How to Use Next/Image for Cover

See in the above example how my cover image looks. At the time of writing this, this page is MyChefAI.com/diabetes. Here is my full hero image component import { styled } from "@mui/system"; import Link from "next/link"; import Image from 'next/image'; //MUI Components import { Box, Button, Typography } from "@mui/material"; function DiabetesLandingHero({handleScroll}) { const HeroImage = styled("div")(({ theme }) => ({ position: "relative", height: "80vh", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", color: "white", textAlign: "center", textShadow: "1px 1px 3px rgba(0, 0, 0, 0....

June 11, 2023 · 2 min · chart