Part 64: Revamping the HomePage: Optimizing Images and Enhancing Layout with Next.js

[App] Image Optimization

[App] Image Optimization

In modern web development, creating a visually appealing and performant website is crucial. With Next.js, developers have robust tools at their disposal to achieve these goals. This blog post will walk you through the process of updating a HomePage by leveraging the Next Image component for image optimization and enhancing the layout to improve the user experience.

From Single to Multiple Reviews

Initially, our HomePage displayed a single review, which left a lot of empty space on larger screens. This was not ideal, especially when considering the potential of our content-rich CMS. To create a more engaging layout, we decided to showcase multiple reviews.

Fetching Multiple Reviews

Instead of fetching just one featured review, we opted to display the latest three reviews. This change requires a small update to our data-fetching logic. By modifying our getReviews function to accept a pageSize argument, we can control the number of reviews fetched for different pages.

export async function getReviews(pageSize) {
  const { data } = await fetchReviews({
    fields: ['slug', 'title', 'subtitle', 'publishedAt'],
    populate: { image: { fields: ['url'] } },
    sort: ['publishedAt:desc'],
    pagination: { pageSize },
  });
  return data.map(toReview);
}

With this function in place, we can call getReviews(3) on the HomePage to retrieve and display the latest three reviews.

Displaying Reviews with Flexbox

To present these reviews attractively, we wrapped them in a flexbox layout. This approach allows us to easily manage spacing and alignment between the review cards.

import { getReviews } from '@/lib/reviews';

export default async function HomePage() {
  //const review = await getFeaturedReview();
  const reviews = await getReviews(3);
  console.log('[HomePage] rendering');
  return (
    <>
      <Heading>Featured Review</Heading>
      <p className="text-center mb-4">
        Only the best indie games, reviewed for you.
      </p>
      <ul className="flex flex-row flex-wrap gap-3">
        {reviews.map((review, index) => (
          <li key={review.slug} className="bg-white border rounded shadow w-80 hover:shadow-xl sm:w-full">
          <Link href={`/reviews/${review.slug}`} className="flex flex-col sm:flex-row">
            <Image src={review.image} alt="" priority={index === 0} width="320" height="180" className="rounded-t sm:rounded-l sm:rounded-r-none" />
            <h2 className="font-orbitron font-semibold py-1 text-center sm:px-2">
              {review.title}
            </h2>
          </Link>
        </li>
        ))}
      </ul>
      
    </>
  );
}

By adding a gap between items and using flexbox, we ensure that the cards are well-spaced and visually appealing across different screen sizes.

Image Optimization with Next Image

One of the critical improvements was replacing the standard img tag with the Next Image component. This change not only enhances image loading performance but also automatically optimizes images, converting them to modern formats and resizing them appropriately.

Implementing Next Image

Here's how we implemented the Next Image component in our HomePage:

<Image src={review.image} alt="" priority={index === 0} width="320" height="180" className="rounded-t sm:rounded-l sm:rounded-r-none" />

We set the priority prop to true for the first image to ensure it loads immediately. For subsequent images, lazy loading is applied automatically, improving the page's initial load time.

Final Touches

With these updates, our HomePage is now more engaging and optimized. We've removed the unused getFeaturedReview function and ensured our HomePage calls getReviews instead. Furthermore, by running lint checks, we verified that our code is clean and free of warnings.

npm run lint

With no warnings or errors, we've successfully integrated Next.js's image optimization features across our site, enhancing both performance and user experience.

Conclusion

By updating the HomePage to display multiple reviews and optimizing images with Next.js, we've significantly improved the visual appeal and performance of our site. These changes demonstrate how leveraging Next.js's powerful features can lead to better user experiences and more efficient web applications. Keep experimenting with layout and optimization techniques to further enhance your projects!