Using SynthLink with Next.js

Overview

This guide shows how to integrate the SynthLink API into a Next.js 14+ app using the App Router. We'll fetch documents server-side, handle authentication securely, and render the results with proper error handling.

Prerequisites

• A SynthLink API key stored in .env.local as SYNTHLINK_KEY
• Next.js 14 or above with the App Router enabled
• Basic familiarity with server components and fetch

Set up your environment

Add your API key to .env.local. Never expose it to the client.

SYNTHLINK_KEY=sk_live_your_key_here

Fetch documents in a server component

Server components can read environment variables directly and make authenticated requests without exposing the key to the browser.

async function getDocuments() {
  const res = await fetch(
    "https://synth-link.com/api/v1/documents?limit=10",
    {
      headers: {
        "X-SYNTHLINK-KEY": process.env.SYNTHLINK_KEY!,
      },
      next: { revalidate: 3600 },
    }
  );

  if (!res.ok) throw new Error("Failed to fetch");
  return res.json();
}

export default async function Page() {
  const documents = await getDocuments();

  return (
    <ul>
      {documents.map((doc) => (
        <li key={doc.id}>{doc.title}</li>
      ))}
    </ul>
  );
}

Error handling

Add an error.tsx file alongside your page to catch fetch errors and show a fallback UI.