Episode 16 • Making Websites With Next.js And Strapi

Image Component And Customizing Strapi Response

In this episode we are going to take quick a look at new Image component in Next.js 10 and learn how to add additional data to our Strapi response.

Next.js 10 came out recently and it brought with it new out of the box Image component. This component will make images on your site much more performat, smaller in size and they will be lazy loaded wich can add a lot of benefits to your sites perfomance with very little actual work from you.

However Nextjs Image component has two required props, and those are width and height. Unfortunately Strapi doesn't give us width and height of the images in our API out of the box. So we would have to customize our response to include those values. And in Strapi this is a peice of cake.

Download code

Wanna ask a question about this video?

Like This Video?

Consider supporting me on Patreon.

...or you can share this video, that also helps ;)

  • Episode 01 • Duration 18:49

    Setup And First Steps

  • Episode 02 • Duration 24:03

    CSS in JS

  • Episode 03 • Duration 15:25

    Fetching The Data

  • Episode 04 • Duration 18:33

    Layouts With Reflexbox

  • Episode 05 • Duration 19:34

    Static Routes, Nested Routes, And Navigation

  • Episode 06 • Duration 19:50

    Dynamic routes

  • Episode 07 • Duration 21:19

    Pagination

  • Episode 08 • Duration 08:59

    Next SEO

  • Episode 09 • Duration 12:28

    Using Context API

  • Episode 10 • Duration 27:34

    Deploy To Digital Ocean

  • Episode 11 • Duration 09:53

    getStaticProps

  • Episode 12 • Duration 07:10

    Incremental Static Regeneration

  • Episode 13 • Duration 34:08

    Multi language

  • Episode 14 • Duration 27:08

    User Authentication

  • Episode 15 • Duration 13:57

    Add Data To Strapi From Next.js

  • Episode 16 • Duration 29:04

    Image Component And Customizing Strapi Response

  • Episode 17 • Duration 14:04

    PropTypes

  • Episode 01 • Duration 18:49

    Setup And First Steps

  • Episode 02 • Duration 24:03

    CSS in JS

  • Episode 03 • Duration 15:25

    Fetching The Data

  • Episode 04 • Duration 18:33

    Layouts With Reflexbox

  • Episode 05 • Duration 19:34

    Static Routes, Nested Routes, And Navigation

  • Episode 06 • Duration 19:50

    Dynamic routes

  • Episode 07 • Duration 21:19

    Pagination

  • Episode 08 • Duration 08:59

    Next SEO

  • Episode 09 • Duration 12:28

    Using Context API

  • Episode 10 • Duration 27:34

    Deploy To Digital Ocean

  • Episode 11 • Duration 09:53

    getStaticProps

  • Episode 12 • Duration 07:10

    Incremental Static Regeneration

  • Episode 13 • Duration 34:08

    Multi language

  • Episode 14 • Duration 27:08

    User Authentication

  • Episode 15 • Duration 13:57

    Add Data To Strapi From Next.js

  • Episode 16 • Duration 29:04

    Image Component And Customizing Strapi Response

  • Episode 17 • Duration 14:04

    PropTypes