<PlaceholderImage />

A wrapper around next/image that automatically handles placeholder generation using a Server Action.

Props

action (Required): The Server Action wrapping getPlaceholder.
placeholderOptions: Optional configuration for generation.
fallback: React Node to show while loading.
All other standard next/image props.

1. Define Server Action

First, create a Server Action that wraps getPlaceholder. This is necessary because <PlaceholderImage /> is a Client Component and cannot import server-side logic directly.

"use server";

import { getPlaceholder } from "next-image-placeholder";

export async function getPlaceholderAction(url: string) {
    return getPlaceholder(url);
}

2. Usage

'use client'
import { PlaceholderImage } from 'next-image-placeholder/react'
import { getPlaceholderAction } from './actions'

export function Gallery({ src }: { src: string }) {
  return (
    <PlaceholderImage
      src={src}
      action={getPlaceholderAction}
      width={400}
      height={300}
      alt="Gallery Image"
      className="rounded-lg"
      fallback={<div className="bg-neutral-200 w-[400px] h-[300px]" />}
    />
  )
}