Building AI Features with Next.js 16 and Abstrakt

npm install next@16 react@19 react-dom@19

ABSTRAKT_API_KEY=abs_your_api_key_here

// lib/abstrakt.ts
export async function generateImage(prompt: string) {
  const response = await fetch('https://api.abstrakt.one/v1/models/flux-schnell/run', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.ABSTRAKT_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ input: { prompt } }),
  });
  return response.json();
}

// app/generate/page.tsx
export default async function GeneratePage({ searchParams }) {
  if (!searchParams.prompt) return <PromptForm />;
  
  const result = await generateImage(searchParams.prompt);
  return <img src={result.result.images[0].url} alt={searchParams.prompt} />;
}

// app/actions.ts
'use server'
export async function generateAction(formData: FormData) {
  const prompt = formData.get('prompt') as string;
  const result = await generateImage(prompt);
  return { imageUrl: result.result.images[0].url };
}

// Form component
'use client'
export function GenerateForm() {
  const [state, action, pending] = useActionState(generateAction, null);
  return (
    <form action={action}>
      <input name="prompt" disabled={pending} />
      <button disabled={pending}>{pending ? 'Generating...' : 'Generate'}</button>
      {state?.imageUrl && <img src={state.imageUrl} />}
    </form>
  );
}

import { Suspense } from 'react';

export default function Page({ searchParams }) {
  return (
    <Suspense fallback={<div className="animate-pulse" />}>
      <GeneratedImage prompt={searchParams.prompt} />
    </Suspense>
  );
}

// app/api/webhooks/abstrakt/route.ts
export async function POST(request: NextRequest) {
  const body = await request.text();
  const signature = request.headers.get('x-abstrakt-signature');
  
  // Verify signature and process webhook
  const payload = JSON.parse(body);
  if (payload.event === 'job.completed') {
    await handleJobCompleted(payload);
  }
  return NextResponse.json({ received: true });
}