Nextjs custom components and Hooks

hooks

useSWR() React hook made by Next team. It handles caching, revalidation, focus tracking, refetching on interval, and more
useRouter() If you want to access the Next.js router, you can do so by importing the useRouter hook from next/router.

<Link> is a react component that extends the HTML <a> element to provide prefetching and client side-navigation. it is the primary way to navigate between routes in Next.
<Image> takes care of:
- handles responsiveness.
- optimization
- lazy loading.
  The height and width props should be the desired rendering size. these along with src and alt are required fields.
<Head> allows you to modify the <head> element.
<Script> component that goes inside <Head>
- strategy="lazyOnload"
- OnLoad=
<Component> is a top level React component that wraps all the pages in the app. You can use this component to keep state when navigating thro pages or to add global styles.