Documentation
← Back to Integrations

Next.js Integration

Integrate Flux Relay into your Next.js application with server-side rendering support

Installation

bun add @postacksolutions/flux-relay-sdk

Environment Variables

.env.local
# .env.local
NEXT_PUBLIC_FLUX_RELAY_API_URL=https://flux.postacksolutions.com/api
NEXT_PUBLIC_FLUX_RELAY_SERVER_ID=your-server-id
NEXT_PUBLIC_FLUX_RELAY_API_KEY=your-api-key

# Server-side only (for API routes)
FLUX_RELAY_API_URL=https://flux.postacksolutions.com/api
FLUX_RELAY_SERVER_ID=your-server-id
FLUX_RELAY_API_KEY=your-api-key

Initialization

lib/flux-relay.ts
import { FluxRelay } from '@postacksolutions/flux-relay-sdk';

const client = new FluxRelay({
      apiUrl: process.env.NEXT_PUBLIC_FLUX_RELAY_API_URL || 'https://flux.postacksolutions.com/api',
  serverId: process.env.NEXT_PUBLIC_FLUX_RELAY_SERVER_ID!,
  apiKey: process.env.NEXT_PUBLIC_FLUX_RELAY_API_KEY!,
});

Server-Side Authentication

Use Server Actions or API Routes for secure authentication:

app/api/auth/route.ts
// app/api/auth/route.ts (Server Action or API Route)
'use server';

import { FluxRelay } from '@postacksolutions/flux-relay-sdk';

export async function authenticateUser(externalUserId: string, username: string) {
  const client = new FluxRelay({
    apiUrl: process.env.FLUX_RELAY_API_URL!,
    serverId: process.env.FLUX_RELAY_SERVER_ID!,
    apiKey: process.env.FLUX_RELAY_API_KEY!,
  });

  try {
    const auth = await client.authenticateUser({
      externalUserId,
      username,
      metadata: { email: `${username}@example.com` },
    });

    return auth;
  } catch (error) {
    throw error;
  }
}

Client Component Example

Use Flux Relay in client components for real-time messaging:

components/Chat.tsx
'use client';

import { useEffect, useState } from 'react';
import { FluxRelay, Conversation, Message } from '@postacksolutions/flux-relay-sdk';

export default function ChatComponent() {
  const [client, setClient] = useState<FluxRelay | null>(null);
  const [conversations, setConversations] = useState<Conversation[]>([]);
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    // Initialize client
    const fluxRelay = new FluxRelay({
      apiUrl: process.env.NEXT_PUBLIC_FLUX_RELAY_API_URL!,
      serverId: process.env.NEXT_PUBLIC_FLUX_RELAY_SERVER_ID!,
      apiKey: process.env.NEXT_PUBLIC_FLUX_RELAY_API_KEY!,
    });

    // Authenticate user
    fluxRelay.authenticateUser({
      externalUserId: 'user_123',
      username: 'john_doe',
    }).then(() => {
      setClient(fluxRelay);
      
      // Load conversations
      fluxRelay.getConversations().then(setConversations);
    });
  }, []);

  const sendMessage = async (conversationId: string, content: string) => {
    if (!client) return;
    
    const message = await client.sendMessage(conversationId, {
      content,
      type: 'text',
    });
    
    setMessages([...messages, message]);
  };

  return (
    <div>
      {/* Your chat UI */}
    </div>
  );
}

Next Steps

  • Set up your environment variables in .env.local
  • Get your Server ID and API Key from your Flux Relay dashboard
  • Check out the API Reference for more endpoints
  • See the React guide for React-specific patterns