Quickstart: use the Credicorp public API in Next.js

Call the API from Next.js

// app/products/page.tsx (Server Component)
export default async function Products() {
  const res = await fetch('https://api.credicorp.co.uk/public/v1/products', {
    next: { revalidate: 3600 },  // cache for an hour
  });
  const { data } = await res.json();
  return <ProductGrid products={data} />;
}

Fetch in a Server Component so the call happens on your server, out of the browser, and use `next.revalidate` to cache the catalogue. This is also the right place to add partner-ring calls later, since server components keep secrets server-side.

Point at sandbox in development

Set the base URL to https://sandbox.credicorp.co.uk/public/v1 in development and CI, and to https://api.credicorp.co.uk/public/v1 in production — driven by the one environment variable your framework already exposes. See choosing a base URL.

Next steps

From here you can add a quote form, an enquiry submission or an embeddable product picker. Send applicants to apply to start a real journey.