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.