Next.js Integration Guide

1. Next.js Client Proxy Route

To prevent exposing your master API key in client browsers, create a catch-all proxy route under app/api/logix-logs/[types]/route.ts:

// app/api/logix-logs/[types]/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { auth } from '@clerk/nextjs/server';

export async function GET(
  req: NextRequest,
  { params }: { params: { types: string } }
) {
  const { getToken } = auth();
  const token = await getToken();

  if (!token) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const apiKey = process.env.LOGIX_API_KEY;
  if (!apiKey) {
    return NextResponse.json({ error: 'API key unconfigured' }, { status: 500 });
  }

  const targetType = params.types; // 'logs' or 'stream'
  const searchParams = req.nextUrl.searchParams.toString();
  const backendUrl = `${process.env.NEXT_PUBLIC_LOGIX_SERVER_URI}/logs${
    targetType === 'stream' ? '/stream' : ''
  }?${searchParams}`;

  const response = await fetch(backendUrl, {
    headers: { 'x-api-key': apiKey },
    cache: 'no-store',
  });

  return new NextResponse(response.body, {
    status: response.status,
    headers: {
      'Content-Type': response.headers.get('Content-Type') || 'application/json',
      'Cache-Control': 'no-cache',
      Connection: 'keep-alive',
    },
  });
}

2. Logging inside Next.js Server Actions

'use server';

import { logger } from '@/lib/logger';

export async function processPaymentAction(formData: FormData) {
  const amount = Number(formData.get('amount'));

  try {
    // Business logic...
    logger.info('Payment processed successfully', { amount });

    // Always flush buffer before server action resolves/redirects
    await logger.flush();
    return { success: true };
  } catch (err: any) {
    logger.error('Payment processing exception', { error: err.message });
    await logger.flush();
    throw err;
  }
}