Slide 1
-----------
Part 1: Learn to supercharge your NextJS app! We'll explore image optimisation with the Image component, covering local and remote images, plus font optimisation using next/font for both Google and custom fonts. Boost performance, enhance UX, and make your blog shine!
Slide 2
-----------
Part 1: In this section, we're tackling image and font optimisation in NextJS. This is essential for building fast and user-friendly web applications, especially for our blog project.
Part 2: Optimised images and fonts lead to quicker loading times, prevent layout shifts, and ultimately, keep users happy and engaged with our blog content.
Part 3: The great news is that NextJS offers powerful, built-in features that make optimising these assets a breeze. We'll explore these tools today.
Slide 3
-----------
Part 1: Let's start with static assets. In Next.js, we organize these files, like images and fonts, within a folder called public at the root of our project. Think of it as the media library for our blog.
Part 2: Anything placed inside the public folder becomes directly accessible from the base URL of our website. For example, if we have cat.png inside public, we can access it via /cat.png in our code.
Part 3: Here's a simple example. We use a standard img tag, and the src attribute points directly to the image within our public folder. No complex paths needed!
Slide 4
-----------
Part 1: Now, let's talk about images. NextJS provides a special component, Image, which enhances the standard HTML img tag with optimisation superpowers. It's imported from the next/image package.
Part 2: The Image component handles crucial aspects like automatically serving appropriately sized images, preventing layout shifts, lazy loading images for better performance, and even resizing images on demand. It's a one-stop shop for image optimisation.
Part 3: Here's how we use it to import the local image.
Part 4: We import the Image component and the image.
Part 5: Then, we use it like a regular image tag. We set the src to our local image, catPic, which is imported from the public folder, provide an alt description, and specify the width and height. These dimensions are essential for preventing layout shifts.
Part 6: The image component has many other options and truly is a powerhouse for modern web development. Check out the complete documentation at the link provided.
Slide 5
-----------
Part 1: What if our images aren't stored locally but are hosted on a service like AWS S3? The Image component handles that too.
Part 2: We must provide the width and height properties for remote images, as NextJS can't automatically determine them. We can also configure allowed image domains for increased security in our next config js.
Part 3: Here's the code. The src points to our remote image URL.
Part 4: In the next config js, we specify the allowed remote pattern as specific as possible for our S3 bucket. This ensures that only images from this location are permitted, improving security.
Slide 6
-----------
Part 1: Moving on to fonts, NextJS offers the next/font module. This simplifies the process of optimising fonts for both performance and privacy.
Part 2: A key feature is automatic self-hosting. This means fonts are served directly from our own domain, eliminating external requests and improving page load times. This works for both Google Fonts and fonts we host ourselves.
Part 3: For Google Fonts, we import the font we want, in this case, Roboto, from next/font/google ...
Part 4: ... define the weight and subset ...
Part 5: ... and then apply the font to our HTML element using the returned `className`. It's that simple!
Slide 7
-----------
Part 1: We can also self-host our own custom font files. This is useful if we have specific branding requirements.
Part 2: Like images, we typically place our font files, such as woff2 files, inside the public folder.
Part 3: To use a local font, we import localFont from next/font/local and specify the path to our font file within the public folder.
Part 4: Again, we apply the font using the generated className. Next.js handles the rest.
Slide 8
-----------
Part 1: Let's wrap up.
Part 2: Optimizing images and fonts is absolutely crucial for creating a fast, efficient, and visually appealing website.
Part 3: Next.js offers the Image component and the next/font module to make this process straightforward and effective.
Part 4: Use the public folder for static assets, configure the next config js for remote images, and apply fonts using the className property. These practices will help you build high-performing and user-friendly web applications.
1. INTRODUCTION OR MOTIVATION
Hey everyone! Today, we're diving into image and font optimisation in Next.js.
Why is this important? Well, imagine you're visiting a blog – maybe one
featuring adorable cat pictures. If the images take forever to load, or the text
is a jumbled mess because the font's wonky, you're probably going to bounce,
right? Nobody wants a slow or visually broken website. Optimised images and
fonts are crucial for a smooth user experience, which translates to happy
visitors and a successful blog.
Think about our blog application. We want users to enjoy reading articles, not
staring at loading spinners. By optimising images and fonts, we'll make our blog
faster, more visually appealing, and, ultimately, more engaging. Throughout this
lesson, we'll use a single blog post example to demonstrate the concepts.
2. LECTURE: MASTERING IMAGE AND FONT OPTIMIZATION
2.1 HANDLING STATIC ASSETS
First things first, let's talk about where we keep our static files like images
and fonts. Next.js uses a public folder in the root directory for this. It's
like the blog's media library. Any file inside public can be accessed from the
base URL, which makes it super easy to reference in our code. For example, if we
have me.png in the public folder, we can reference it as /me.png in our code.
2.2 OPTIMIZING IMAGES WITH THE <IMAGE> COMPONENT
Next.js provides a powerful component called <Image> (from next/image)
specifically designed for image optimisation. It's not just a regular <img> tag;
it's like a supercharged version. It handles things like:
* Size Optimization: Serving the right-sized image for each device. No more
huge images on tiny phone screens!
* Visual Stability: Prevent those annoying layout shifts where the content
jumps around as images load.
* Faster Page Loads: Lazy loading images so they only load when they're about
to be visible in the viewport.
* Asset Flexibility: Resizing images on the fly, even if they're stored on a
remote server.
Let's see this in action with our blog post example. Imagine a blog post about
"My Cat's Adventures."
SIMPLE EXAMPLE (LOCAL IMAGE):
import Image from 'next/image'
import catPic from './cat.png' // cat.png is in the public folder
export default function BlogPost() {
return (
<article>
<h1>My Cat's Adventures</h1>
<Image src={catPic} alt="Fluffy the cat playing" />
<p>Fluffy loves to chase laser pointers...</p>
</article>
)
}
Here, we import cat.png (from the public folder) and use it in the src attribute
of the <Image> component. Next.js automatically figures out the width and height
and takes care of optimization.
ADVANCED EXAMPLE (REMOTE IMAGE):
Now, let's say the cat picture is hosted on a cloud storage service like AWS S3.
import Image from 'next/image'
export default function BlogPost() {
return (
<article>
<h1>My Cat's Adventures</h1>
<Image
src="https://s3.amazonaws.com/my-bucket/cat.png"
alt="Fluffy the cat playing"
width={500}
height={300}
/>
<p>Fluffy loves to chase laser pointers...</p>
</article>
)
}
Since Next.js can't access remote images during the build, we provide the width
and height manually. We can also configure next.config.js to allow images from
that specific S3 bucket:
// next.config.js
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 's3.amazonaws.com',
pathname: '/my-bucket/**',
},
],
},
}
This ensures that only images from our designated bucket are allowed, preventing
potential security issues.
2.3 OPTIMIZING FONTS WITH NEXT/FONT
Fonts are just as important as images. next/font helps us optimize fonts for
better performance and privacy. It automatically self-hosts fonts, meaning
they're served from our own domain, eliminating external requests and improving
loading times.
SIMPLE EXAMPLE (GOOGLE FONT):
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function BlogPost() {
return (
<html lang="en" className={roboto.className}> {/* Apply font to the <html> tag */}
<body>
<article>
<h1>My Cat's Adventures</h1>
<p>Fluffy loves to chase laser pointers...</p>
</article>
</body>
</html>
)
}
Here, we import the Roboto font from next/font/google, configure it, and then
apply it to our <html> tag using the className property.
ADVANCED EXAMPLE (LOCAL FONT):
Let's say we have a custom font file.
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-custom-font.woff2', // Font file in the public folder
})
export default function BlogPost() {
return (
<html lang="en" className={myFont.className}>
<body>
<article>
<h1>My Cat's Adventures</h1>
<p>Fluffy loves to chase laser pointers...</p>
</article>
</body>
</html>
)
}
We import localFont from next/font/local and provide the path to our font file.
Next.js handles the rest.
3. CONCLUSION
So, what have we learned? Optimizing images and fonts is crucial for a fast and
visually appealing website. Next.js provides the <Image> component and the
next/font module to make this process easy. By using these tools, we can ensure
our blog application provides a great user experience. Remember to use the
public folder for static assets, configure next.config.js for remote images, and
apply fonts using the className property. These best practices will help you
avoid common pitfalls and create a high-performing blog.
Maggie is a generative AI that can help you understand the course content better. You can ask her questions about the lecture, and she will try to answer them. You can also see the questions asked by other students and her responses.
Join the discussion to ask questions, share your thoughts, and discuss with other learners
SkillPies