A modern, high-performance, and ultra-lightweight Gravatar URL generator specifically designed for Next.js (App Router & Pages Router).

Why Next Gravatar?

• Modern Hashing: Uses SHA-256 (the current Gravatar standard) instead of legacy MD5.
• Ultra-Lightweight: Only 274 bytes minified.
• Next.js Optimized: Works perfectly with next/image and React Server Components.
• TypeScript: Built-in types for a first-class developer experience.

Install

npm install next-gravatar

Usage

App Router (Server Components)

Since it's synchronous and lightweight, it's perfect for Server Components.

import Image from "next/image";
import { gravatar } from "next-gravatar";

export default function ProfilePage({ user }) {
  const avatarUrl = gravatar(user.email, 200);

  return (
    <div>
      <Image src={avatarUrl} alt="User Avatar" width={200} height={200} />
    </div>
  );
}

Pages Router

Works seamlessly in getStaticProps, getServerSideProps, or directly in your components.

import { gravatar } from "next-gravatar";

export default function UserProfile() {
  const url = gravatar("[email protected]", 80);
  return <img src={url} alt="Avatar" />;
}

Configuration

gravatar(email: string, size?: number)

• email: The user's email address (it will be automatically trimmed and lowercased).
• size: Optional. The image size in pixels (1 to 2048). Defaults to 80.

License

MIT