Proyek: Galeri Teroptimasi

// lib/photos.ts
export type Photo = {
  id: string;
  title: string;
  width: number;
  height: number;
};

export const photos: Photo[] = [
  { id: "237", title: "Anjing hitam yang setia", width: 800, height: 600 },
  { id: "1025", title: "Pug yang menggemaskan", width: 800, height: 600 },
  // ... total 12 foto dari picsum.photos
];

export function photoUrl(p: Photo, w = 800) {
  return `https://picsum.photos/id/${p.id}/${w}/${Math.round((w * p.height) / p.width)}`;
}

// next.config.ts
import type { NextConfig } from "next";

const config: NextConfig = {
  images: {
    remotePatterns: [{ protocol: "https", hostname: "picsum.photos" }],
  },
};
export default config;

// app/page.tsx
import Image from "next/image";
import Link from "next/link";
import { photos, photoUrl } from "@/lib/photos";

export default function Galeri() {
  return (
    <main className="grid grid-cols-2 md:grid-cols-3 gap-4 p-4">
      {photos.map((p, i) => (
        <Link key={p.id} href={`/foto/${p.id}`}>
          <Image
            src={photoUrl(p, 600)}
            alt={p.title}
            width={600}
            height={Math.round((600 * p.height) / p.width)}
            sizes="(max-width: 768px) 50vw, 33vw"
            priority={i < 3}
            className="rounded-lg"
          />
        </Link>
      ))}
    </main>
  );
}

// app/foto/[id]/page.tsx
import Image from "next/image";
import { notFound } from "next/navigation";
import type { Metadata } from "next";
import { photos, photoUrl } from "@/lib/photos";

export function generateStaticParams() {
  return photos.map((p) => ({ id: p.id }));
}

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const foto = photos.find((p) => p.id === id);
  return { title: foto ? `${foto.title} | Galeri` : "Foto tidak ditemukan" };
}

export default async function DetailFoto({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const foto = photos.find((p) => p.id === id);
  if (!foto) notFound();
  return (
    <main className="p-4">
      <h1>{foto.title}</h1>
      <Image src={photoUrl(foto, 1200)} alt={foto.title} width={1200}
        height={Math.round((1200 * foto.height) / foto.width)} priority />
    </main>
  );
}

// app/layout.tsx
import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"], display: "swap" });

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

// app/sitemap.ts
import type { MetadataRoute } from "next";
import { photos } from "@/lib/photos";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: "https://galeriku.com", lastModified: new Date() },
    ...photos.map((p) => ({
      url: `https://galeriku.com/foto/${p.id}`,
      lastModified: new Date(),
    })),
  ];
}