Next.js Integration

Use LoremFaces with Next.js image optimization for fast, responsive avatars.

Configuration

First, add LoremFaces to your allowed image domains in next.config.js:

// next.config.js (Next.js 13+)
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'www.loremfaces.net',
        pathname: '/**',
      },
    ],
  },
}

module.exports = nextConfig

Basic Usage with next/image

Use the optimized Image component for automatic optimization:

import Image from 'next/image'

export default function UserProfile() {
  return (
    <Image
      src="https://www.loremfaces.net/96/id/1.jpg"
      alt="User avatar"
      width={96}
      height={96}
      className="rounded-full"
    />
  )
}

Reusable Avatar Component

A flexible component using App Router conventions:

components/avatar.tsx

import Image from 'next/image'

type Size = 24 | 42 | 48 | 96 | 128 | 256
type FaceId = 1 | 2 | 3 | 4 | 5

interface AvatarProps {
  id?: FaceId
  size?: Size
  alt?: string
  random?: boolean
  priority?: boolean
  className?: string
}

export function Avatar({
  id = 1,
  size = 96,
  alt = 'User avatar',
  random = false,
  priority = false,
  className = '',
}: AvatarProps) {
  const src = random
    ? `https://www.loremfaces.net/${size}/random.jpg`
    : `https://www.loremfaces.net/${size}/id/${id}.jpg`

  return (
    <Image
      src={src}
      alt={alt}
      width={size}
      height={size}
      priority={priority}
      className={`rounded-full ${className}`}
    />
  )
}

// Usage in App Router
import { Avatar } from '@/components/avatar'

export default function Page() {
  return (
    <div>
      <Avatar id={2} size={128} priority />
      <Avatar random size={48} />
    </div>
  )
}

Server Component Usage

Avatar components work in React Server Components by default:

// app/users/page.tsx (Server Component)
import { Avatar } from '@/components/avatar'

interface User {
  id: number
  name: string
  avatarId: 1 | 2 | 3 | 4 | 5
}

async function getUsers(): Promise<User[]> {
  // Fetch users from your API
  return [
    { id: 1, name: 'Alice', avatarId: 1 },
    { id: 2, name: 'Bob', avatarId: 2 },
    { id: 3, name: 'Charlie', avatarId: 3 },
  ]
}

export default async function UsersPage() {
  const users = await getUsers()

  return (
    <div className="grid gap-4">
      {users.map(user => (
        <div key={user.id} className="flex items-center gap-3">
          <Avatar id={user.avatarId} size={48} />
          <span>{user.name}</span>
        </div>
      ))}
    </div>
  )
}

Avatar Stack with Tailwind

import Image from 'next/image'

interface AvatarStackProps {
  count?: number
  size?: number
}

export function AvatarStack({ count = 5, size = 48 }: AvatarStackProps) {
  const avatars = Array.from(
    { length: Math.min(count, 5) },
    (_, i) => i + 1
  )

  return (
    <div className="flex -space-x-3">
      {avatars.map(id => (
        <Image
          key={id}
          src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
          alt={`Team member ${id}`}
          width={size}
          height={size}
          className="rounded-full ring-2 ring-white"
        />
      ))}
    </div>
  )
}

Without Image Optimization

If you prefer not to use next/image, use a regular img tag:

// No configuration needed for regular img tags
export function SimpleAvatar({ id = 1, size = 96 }) {
  return (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={`https://www.loremfaces.net/${size}/id/${id}.jpg`}
      alt="User avatar"
      width={size}
      height={size}
      className="rounded-full"
      loading="lazy"
    />
  )
}

Next Steps

Check out more integration guides:

• React Integration
• Vue 3 Integration
• Full API Documentation