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-sdkEnvironment 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-keyInitialization
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