Building a Dynamic Featured Posts Component in Next.js 15 with Prisma

Introduction: The Importance of "Featured Content"

In the digital age, attention is the new currency. When a visitor lands on Wisemix Media, you only have a few seconds to capture their interest. A "Featured Posts" section is not just a list of links; it is a curated gateway to your best content.

In this guide, we will dissect a professional-grade FeaturedPosts component built using the latest Next.js 15 features and Prisma ORM. We will explain why specific technologies were chosen and how the code ensures peak performance.

1. The Tech Stack: Why This Combination?

Next.js Server Components (RSC)

The component is defined as an async function. In Next.js, this means it is a Server Component.

• Why? Unlike traditional React, this code runs on the server. The database query happens before the page reaches the user's browser. This results in zero "loading spinners" and a much faster First Contentful Paint (FCP).

Prisma ORM

We use prisma.post.findMany() to interact with our PostgreSQL database.

• Why? Prisma provides Type-Safety. If we try to access a field that doesn't exist in our PostgreSQL schema, the code will throw an error during development, not after the site is live.

Tailwind CSS

For styling, we utilize utility classes like grid-cols-1 md:grid-cols-2 xl:grid-cols-4.

• Why? It allows for a Mobile-First responsive design. The layout automatically adjusts from a single column on iPhones to four columns on large desktop monitors.

2. Logical Deep Dive: Understanding the Query

Let's break down the logic inside the Prisma fetch:

JavaScript..... before featured posts make menu.jsx

const posts = await prisma.post.findMany({
  where: {
    featured: true,
    published: true,
    ...(excludeIds.length > 0 && {
      id: { notIn: excludeIds },
    }),
  },
  include: { category: true },
  orderBy: { createdAt: "desc" },
  take: 8,
});

how to make dynamic header using isr

The Exclusion Logic (excludeIds)

One of the most professional touches in this code is the excludeIds prop.

• The Problem: If a user is already reading a specific blog post, you don't want that same post to appear again in the "Featured" section at the bottom of the page.

• The Solution: By passing the current post's ID into excludeIds, we use the { notIn: excludeIds } filter to ensure every suggestion is fresh and new.

How Many Posts?

The take: 8 parameter limits the query. In this design, we fetch up to 8 posts.

• On a desktop, this creates two clean rows of four cards.

• Limiting the number of posts is crucial for Core Web Vitals. Fetching 100 posts would increase the "Total Blocking Time" (TBT), but 8 is the "sweet spot" for engagement without sacrificing speed.

3. Performance Optimization: Next/Image

The component uses the next/image component with specific optimizations: