NextJS

Components in NextJS

next/link

for javascript based navigation

<Link href="link">something</Link>

next/image

<img> tag but better and handles optimization.

<Image
  src="img location" // Route of the image file
  height={value} // Desired size with correct aspect ratio
  width={value} // Desired size with correct aspect ratio
  alt="alt name"
/>

next/head

Whatever we want to include in head tag.

next/script

<Script
src="route to js file"
strategy="how to load"
onLoad={() =>
    code to run after loading javascript file
}
/>

Pre-rendering in NextJS

getStaticProps

NextJS will use props returned by this function at build time to render the page.

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}