From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

How images optimize with Next.js

How images optimize with Next.js

From the course: Master Next.js: Elaborate Hands-On Web Development, React Basics, Advanced Next.js, and Deployment

Start my 1-month free trial Buy for my team

How images optimize with Next.js

“

All right, so with Next.js, we can serve assets like images in the public directory. In public, we have a favicon. This is an image. We've got the Versal SVG. These are images. So files inside public can be referenced from the root of the application. That's top level, and that's similar to pages. The public directory is also useful for robots.txt, Google site verifications, and any other type of static assets. You can actually look at the documentation specifically for static file serving from the official Next.js homepage to learn more about that. I won't get too deep into that, but what we could do is let's download a picture of ourselves, and we can use the JPEG format, and let's put it in the public directory and save the picture as a profile JPEG in public images directory, and let's add it to the project. So for me, what I'm going to do is I'll just go ahead and open up Photo Booth here. And okay, so I'm having a bit of a crazy hair day, so please excuse that. But I'm just…

Contents