API de Unsplash

UNSPLASH_ACCESS_KEY=your_access_key_here

// lib/unsplash.ts
interface UnsplashPhoto {
  id: string;
  alt_description: string | null;
  urls: {
    raw: string;
    full: string;
    regular: string;
    small: string;
    thumb: string;
  };
  user: {
    name: string;
    links: {
      html: string;
    };
  };
  links: {
    download_location: string;
  };
  width: number;
  height: number;
}
 
interface UnsplashSearchResponse {
  total: number;
  total_pages: number;
  results: UnsplashPhoto[];
}
 
const UNSPLASH_BASE = "https://api.unsplash.com";
 
async function unsplashFetch<T>(endpoint: string, params?: Record<string, string>): Promise<T> {
  const url = new URL(`${UNSPLASH_BASE}${endpoint}`);
  if (params) {
    Object.entries(params).forEach(([key, value]) => url.searchParams.set(key, value));
  }
 
  const res = await fetch(url.toString(), {
    headers: {
      Authorization: `Client-ID ${process.env.UNSPLASH_ACCESS_KEY}`,
    },
    next: { revalidate: 3600 },
  });
 
  if (!res.ok) {
    throw new Error(`Unsplash API error: ${res.status} ${res.statusText}`);
  }
 
  return res.json();
}
 
export async function searchPhotos(query: string, page = 1, perPage = 12) {
  return unsplashFetch<UnsplashSearchResponse>("/search/photos", {
    query,
    page: String(page),
    per_page: String(perPage),
    orientation: "landscape",
  });
}
 
export async function getRandomPhotos(count = 6, query?: string) {
  const params: Record<string, string> = { count: String(count) };
  if (query) params.query = query;
  return unsplashFetch<UnsplashPhoto[]>("/photos/random", params);
}
 
export async function trackDownload(downloadLocation: string) {
  await unsplashFetch<void>(downloadLocation.replace(UNSPLASH_BASE, ""));
}

// app/photos/page.tsx
import { searchPhotos } from "@/lib/unsplash";
import { PhotoGrid } from "./photo-grid";
import { SearchForm } from "./search-form";
 
interface PageProps {
  searchParams: Promise<{ q?: string; page?: string }>;
}
 
export default async function PhotosPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const query = params.q || "nature";
  const page = Number(params.page) || 1;
 
  const results = await searchPhotos(query, page);
 
  return (
    <main className="mx-auto max-w-6xl px-4 py-8">
      <h1 className="mb-6 text-3xl font-bold">Búsqueda de Fotos</h1>
      <SearchForm initialQuery={query} />
      <p className="mb-4 text-sm text-gray-500">
        {results.total.toLocaleString()} resultados para "{query}"
      </p>
      <PhotoGrid photos={results.results} />
      <div className="mt-6 flex justify-center gap-4">
        {page > 1 && (
          <a href={`/photos?q=${query}&page=${page - 1}`} className="rounded bg-gray-200 px-4 py-2">
            Anterior
          </a>
        )}
        {page < results.total_pages && (
          <a href={`/photos?q=${query}&page=${page + 1}`} className="rounded bg-gray-200 px-4 py-2">
            Siguiente
          </a>
        )}
      </div>
    </main>
  );
}

// app/photos/search-form.tsx
"use client";
 
import { useRouter } from "next/navigation";
import { useState } from "react";
 
export function SearchForm({ initialQuery }: { initialQuery: string }) {
  const [query, setQuery] = useState(initialQuery);
  const router = useRouter();
 
  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (query.trim()) {
      router.push(`/photos?q=${encodeURIComponent(query.trim())}`);
    }
  }
 
  return (
    <form onSubmit={handleSubmit} className="mb-6 flex gap-2">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Buscar fotos..."
        className="flex-1 rounded-lg border border-gray-300 px-4 py-2"
      />
      <button type="submit" className="rounded-lg bg-black px-6 py-2 text-white hover:bg-gray-800">
        Buscar
      </button>
    </form>
  );
}

// app/photos/photo-grid.tsx
import Image from "next/image";
 
interface Photo {
  id: string;
  alt_description: string | null;
  urls: { regular: string; small: string };
  user: { name: string; links: { html: string } };
  width: number;
  height: number;
}
 
export function PhotoGrid({ photos }: { photos: Photo[] }) {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {photos.map((photo) => (
        <figure key={photo.id} className="group relative overflow-hidden rounded-xl">
          <div className="relative aspect-[3/2]">
            <Image
              src={photo.urls.regular}
              alt={photo.alt_description || "Foto de Unsplash"}
              fill
              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
              className="object-cover transition-transform duration-300 group-hover:scale-105"
            />
          </div>
          <figcaption className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white opacity-0 transition-opacity group-hover:opacity-100">
            Foto de{" "}
            <a
              href={`${photo.user.links.html}?utm_source=your_app&utm_medium=referral`}
              target="_blank"
              rel="noopener noreferrer"
              className="underline"
            >
              {photo.user.name}
            </a>
            {" en "}
            <a
              href="https://unsplash.com/?utm_source=your_app&utm_medium=referral"
              target="_blank"
              rel="noopener noreferrer"
              className="underline"
            >
              Unsplash
            </a>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}

// app/components/random-hero.tsx
import Image from "next/image";
import { getRandomPhotos } from "@/lib/unsplash";
 
export async function RandomHero() {
  const [photo] = await getRandomPhotos(1, "landscape");
 
  return (
    <div className="relative h-[60vh] w-full overflow-hidden">
      <Image
        src={photo.urls.full}
        alt={photo.alt_description || "Imagen heroica"}
        fill
        priority
        sizes="100vw"
        className="object-cover"
      />
      <div className="absolute bottom-4 right-4 text-sm text-white/80">
        Foto de{" "}
        <a href={photo.user.links.html} className="underline">
          {photo.user.name}
        </a>
      </div>
    </div>
  );
}

// Opcional: utiliza el SDK oficial
// npm install unsplash-js
import { createApi } from "unsplash-js";
 
const unsplash = createApi({
  accessKey: process.env.UNSPLASH_ACCESS_KEY!,
});