Using Next.js 13 Image Optimization with AWS Amplify Hosting and Amazon S3 | Amazon Web Services

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

Website mentioned in the video:

To learn more:

Subscribe:

Subscribe:

ABOUT AWS
Amazon Web Services (AWS) is the world’s most comprehensive and broadly adopted cloud platform, offering over 200 fully featured services from data centers globally. Millions of customers — including the fastest-growing startups, largest enterprises, and leading government agencies — are using AWS to lower costs, become more agile, and innovate faster.

#Amplify #SSR #WebApp #WebHosting #ServerSideRenderedApp #Nextjs #Nextjs13 #NextjsImageComponent #AWS #AmazonWebServices #CloudComputing
  1. Amazon Web Services
  2. AWS
  3. Amazon Web Services
  4. Cloud
  5. AWS Cloud
  6. Cloud Computing
Рекомендации по теме
Using Images in 0:09:10

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

Next.js Image Optimization 0:19:48

Next.js Image Optimization with Image Component | Responsive Images

How to Correctly 0:01:00

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

Build an Image 0:09:44

Build an Image Gallery with Next.js 13 #6 - Responsive Image Optimization

Using Next.js 13 0:03:19

Using Next.js 13 Image Optimization with AWS Amplify Hosting and Amazon S3 | Amazon Web Services

How to Optimize 0:02:13

How to Optimize Images in Next.js for Faster Performance | Next.js 14 Guide | Geekboots

Image Optimization with 0:07:19

Image Optimization with Next.js 13 & Prismic / Imgix integration

Next.js Tips: How 0:00:53

Next.js Tips: How To Optimize Your Images In Next.js

Performance Mistakes | 0:47:41

Performance Mistakes | Paul Calvano | performance.now() 2024

⭐️ NextJS image, 0:01:00

⭐️ NextJS image, explained!

Next.js Image - 0:36:01

Next.js Image - Never struggle again (+ ImageKit)

The Only Library 0:20:36

The Only Library You Need for React / Next.js Image Optimization and File Uploading

SIZE MATTERS 👀 0:01:00

SIZE MATTERS 👀 when you Optimize Responsive Images in Next.js

Optimize Images, Responsive 0:10:52

Optimize Images, Responsive Sizing, & AI Cropping in Next.js with Next Cloudinary

Blurred placeholder for 0:12:02

Blurred placeholder for dynamic images in NextJs

Next.js Image Component 0:28:09

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

Mercury - Disable 0:01:16

Mercury - Disable image optimization for static HTML export in NextJS

NextJS Image Layout 0:13:08

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

Next.js Image Optimization 0:08:38

Next.js Image Optimization on Build Time (Static Export)

Optimized Image Component 0:01:39

Optimized Image Component in Next.js - Preview

5. Image Optimization 1:11:42

5. Image Optimization in NextJS 13 App Router | Learning in Public

How to Import 0:08:31

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

Let’s talk about 0:14:38

Let’s talk about Image Optimization with Next.js - Saad Irfan - (Next.js Conf 2021)

Next.js Image Optimization 0:03:00

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

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

Could you show how you setup the environment variables? The docs are a bit confusing about what exactly I need to add to the build config.

wilstaley
Автор

My NextJs image component seems to load all the images from the cached images directory on the server. Did you specify a custom loader for the NextJS Images, so that they are not optimized by Next, and rather are by AWS?

tech
Автор

Does the code exist in a repository somewhere? It is too small and blurry to read in the video.

goodstuffread
Автор

Hi, Am having difficulty with nextjs Image component using my src from amplify storage <Image
className="w-500 h-500 bg-contain bg-center rounded-full sm:mx-0 sm:shrink-0"
src={course.image}
alt="image"
/>

ChibuezeLawsonLoctech
Автор

Does next/image work only server side? That is, do you have to grab the images using the server side props? I have the user making specific graphql requests client-side to get particular images, can I still use next/image optimisation on amplify? I can't get it to work, no matter what I try :(

stanleyagius
Автор

Dude, why do you skip the important parts, this video served no help to anyone.
you need to show your code more than a flicker so that people can at least see what you did, or is it you are just ashamed of your code.
I am really starting to hate landing on your videos it is disgusting how bad they are.

There is not 1 comment here saying, hey thanks for that great video, no everyone is asking questions how do you do this how do you do that. because no one knows!

NZTechArc