estebanmunchjones2019

//Example of card image using <Image /> component

<div className="card" style={{width: "18rem"}}>
  <Image 
  src="/assets/images/unsplash-1.jpeg"
  // just put the original width and height of the original image, in order to provide the right aspect ratio
  // Next.js will automatically reduce the size if the rendered image needs to be smaller.
  width={2400}
  height={1598}
  layout="responsive"

estebanmunchjones2019

<div>
  <img />
</div>

//Or

<div>
  <div>
    <img />
  </div>

estebanmunchjones2019

//Example of background image using <Image> component

<div className="pt-2" style={{  position: 'relative', width: '100vw', height: '66.66vw'}}>
  <Image 
  src="/assets/images/unsplash-1.jpeg"
  layout="fill"
  objectFit="cover"
  />
</div>

estebanmunchjones2019

<Image src={path to your image} />

estebanmunchjones2019

import Image from 'next/image'

estebanmunchjones2019

//Example of a card image with <img>

<div className="card" style={{width: "18rem"}}>
  <img src="/assets/images/unsplash-1.jpeg" class="card-img-top" alt="..." />
  <div className="card-body">
    <h5 className="card-title">Card title</h5>
    <p className="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

estebanmunchjones2019

//Background image example with <img> 

<div className="pt-2">
   <img src="/assets/images/unsplash-1.jpeg" style={{width: "100%", height: "auto"}}/>
</div>

estebanmunchjones2019

// pages/api/subscription.js

export default function handler(req, res){
   //some code here to save the email to a database
   const email = req.body.email;
   return res.status(200).json({text: `${email} successfully subscribed`});
}

estebanmunchjones2019

// this code belongs to some dynamic route page, like /products/:id

export async function getStaticPaths() {
  // some back end code here
  return {
    paths: [
      { params: { ... } } 
    ],
    fallback: true or false 
  };

estebanmunchjones2019

export async function getServerSideProps(context) {
  //some back end code here	
  return {
    props: {}, // will be passed to the page component as props
  }
}