How To Use Next.js Image Component – Part 3.1 Epic Next.js Tutorial for Beginners

preview_player
Показать описание


Key Points
- Create a function to get Strapi url from .env variable
- Create a function that will parse Strapi image url path
- Create Strapi Image component to utilize in out application

-----------------------------------------------------------------------------------------------------------------------
Resources
------------------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------
Strapi
------------------------------------------------------------------------------------------------------------------------
  1. Strapi
  2. Strapi
  3. headless CMS
  4. gatsby
  5. gatsbyjs
  6. react
Рекомендации по теме
Using Images in 0:09:10

Using Images in Next.js (next/image examples)

Next.js Image in-depth 1:34:15

Next.js Image in-depth tutorial

Adding Images in 0:05:24

Adding Images in Nextjs - 07 | NextJS Tutorial For Beginners

How to Correctly 0:01:00

How to Correctly Resize Images in NextJS & Keep Them Responsive (Fill, Sizes)

Next.js Tutorial - 0:10:06

Next.js Tutorial - 58 - Image Component

NextJS Image Layout 0:13:08

NextJS Image Layout Tutorial - next/image Layouts with Examples!

Image Component in 0:11:09

Image Component in NextJS | NextJS in Hindi

Are you optimally 0:03:38

Are you optimally loading your images?

How to Import 0:08:31

How to Import Images in Next JS - Next.js Image Optimization

How to show 0:01:36

How to show Images SMOOTHLY with Next.js Image Component

Generate Images Programmatically 0:02:31

Generate Images Programmatically on the Edge

Building an Image 0:16:24

Building an Image Gallery with Next.js, Supabase, and Tailwind CSS

Is This A 0:15:28

Is This A Better Way To Handle Images in Next.js?

Next.js Image Optimization 0:03:00

Next.js Image Optimization & Dynamic Cropping with Cloudinary - Dev Hints

Next.js Tutorial #9 0:06:01

Next.js Tutorial #9 - Images & Metadata

Build an Image 0:06:46

Build an Image Gallery with Next.js 13 #2 - Pexels API

Next.JS Image Component 0:10:47

Next.JS Image Component & Optimization | Next.JS Tutorial In Hindi #19

Next.js Image Component 0:03:35

Next.js Image Component with Cloudinary (Next.js 12 and below) - Dev Hints

NextJS Tutorial - 0:44:38

NextJS Tutorial - All 12 Concepts You Need to Know

Photo Album Next.js 2:58:04

Photo Album Next.js Tutorial (with Server Actions, Cloudinary, Shadcn)

This is how 0:10:53

This is how I like to do image uploads on my full stack apps

How To Load 0:15:48

How To Load Images Like A Pro

Next.js Image Component 0:28:09

Next.js Image Component and Image Optimization + srcset and sizes explanation

Create OG images 0:06:09

Create OG images for your Next.js application

Комментарии
Автор

GREAT tutorial series. The rate new concepts are introduced is great, and the code written is future-proof and easily maintainable. It helped me a lot and I'm sure beginners will be able to find great value in it

tastymuffinmm
Автор

I like your friendliness. Thank you for your enthusiasm and thank you for doing this. I'm hoping to build my blog / webapp from this tutorial series and am working through it!

lionroot_tv
Автор

Thank you for the videos! Having a great time learning nextjs and you area a great instructor!

andreezy
Автор

It was throwing error Error: connect ECONNREFUSED ::1:1337 So i used hostname as "127.0.0.1", instead of "localhost" in next.config and getStrapiURL() and it worked.
Possibly the conflict between ipv4 and ipv6 i guess.

SulavDeepUprety
Автор

Once I create the component I got error "There seems to be an unexpected error, try again with --debug for more information"

chetos