Next.js | Create a simple Card using the Image Component

Published: 28 December 2020
on channel: Pragmatic Reviews
6,442
39

In this video we are going to create a simple card using the Next.js Image Component.
➥ Repo: https://gitlab.com/pragmaticreviews/n...
➥ Buy Me a Coffee: https://buymeacoff.ee/pragmatic

➥➥ Learn even more! ➥➥
Learn Next.js ➥ https://bit.ly/PragmaticNext
Learn Contentful ➥ https://bit.ly/PragmaticContentful
Learn Strapi ➥ http://bit.ly/PragmaticStrapi
Learn Gatsby ➥ https://bit.ly/PragmaticGatsby
Learn Deno ➥ https://bit.ly/LearnDeno
Learn GraphQL ➥ https://bit.ly/LearnGraphQL
Golang in the Cloud ➥ https://bit.ly/LearnGolangCloud
Gin Crash Course ➥ http://bit.ly/2SXdJu2
Golang Crash Course ➥ http://bit.ly/39ZH8dy
Zapier Crash Course ➥ http://bit.ly/37q1BGt

Timestamps:

Intro - 0:00
Refactoring the code to add a Card Component - 1:08
Adding the Image Component to the Card - 2:56
Finishing the Card Component - 3:51
Importing the Card Component from the Page - 4:28
Making some CSS changes (Flexbox and box-shadow) - 6:10
Modifying the Prisma Schema and running the migration to add the language property - 7:56
Modifying the Image Component to get the source file name from the new property - 10:00
Testing the Card Component - 11:07
Outro - 11:30

#Next #Image #Component