Frontend AI Integration: Next.js và AI API Best Practices

Việc tích hợp AI vào ứng dụng Next.js đã trở thành xu hướng tất yếu trong năm 2026. Tuy nhiên, với hàng chục nhà cung cấp AI API trên thị trường, việc lựa chọn giải pháp tối ưu về chi phí và hiệu suất không hề đơn giản. Bài viết này sẽ hướng dẫn bạn từng bước cách xây dựng hệ thống AI integration với Next.js, so sánh chi phí chi tiết giữa các nhà cung cấp, và giới thiệu giải pháp tối ưu nhất cho thị trường Việt Nam.

Bảng giá AI API 2026 - So sánh chi phí chi tiết

Trước khi đi vào phần kỹ thuật, hãy cùng xem bảng so sánh giá từ các nhà cung cấp AI hàng đầu thế giới tính đến tháng 1/2026:

Phù hợp / không phù hợp với ai

Nên sử dụng khi:

• Bạn đang phát triển ứng dụng web với Next.js cần tích hợp AI features
• Startup Việt Nam cần giải pháp AI tiết kiệm chi phí với ngân sách hạn chế
• Doanh nghiệp cần xử lý lượng lớn request AI hàng tháng (trên 5M tokens)
• Cần độ trễ thấp dưới 50ms cho trải nghiệm người dùng mượt mà
• Thanh toán qua WeChat/Alipay hoặc USD đều thuận tiện

Không phù hợp khi:

• Dự án cá nhân nhỏ với ít hơn 100K tokens/tháng (chi phí khác nhau không đáng kể)
• Cần SLA cam kết 99.99% uptime cho hệ thống mission-critical
• Yêu cầu pháp lý về dữ liệu không được lưu trữ tại Việt Nam

Xây dựng AI Integration Layer cho Next.js

Trong phần này, mình sẽ hướng dẫn các bạn cách xây dựng một AI integration layer hoàn chỉnh với Next.js 15, App Router, và streaming response support. Đây là kiến trúc mình đã áp dụng thành công cho nhiều dự án thực tế tại các công ty startup Việt Nam.

1. Cài đặt và cấu hình cơ bản

// package.json dependencies cần thiết
{
  "dependencies": {
    "next": "^15.0.0",
    "@ai-sdk/openai": "^0.0.66",
    "ai": "^3.4.0",
    "zod": "^3.23.0"
  }
}

// Hoặc chạy lệnh cài đặt
npm install next@latest @ai-sdk/openai ai zod

2. Tạo AI Service Layer với HolySheep API

Đây là điểm mấu chốt - các bạn cần sử dụng đăng ký tại đây để lấy API key và bắt đầu tích hợp. Mình khuyên các bạn nên dùng pattern factory để có thể switch giữa các provider một cách linh hoạt.

// lib/ai/providers.ts
import { createOpenAI } from '@ai-sdk/openai';

// Cấu hình HolySheep - KHÔNG dùng api.openai.com
const holySheepConfig = {
  baseURL: 'https://api.holysheep.ai/v1',
  apiKey: process.env.HOLYSHEEP_API_KEY, // Đăng ký tại holysheep.ai/register
};

export const holySheepProvider = createOpenAI({
  name: 'holySheep',
  baseURL: holySheepConfig.baseURL,
  apiKey: holySheepConfig.apiKey,
});

// Factory function để lấy model theo nhu cầu
export function getAIProvider() {
  const provider = process.env.AI_PROVIDER || 'holysheep';
  
  switch (provider) {
    case 'holysheep':
      return holySheepProvider;
    case 'openai':
      return createOpenAI({ apiKey: process.env.OPENAI_API_KEY });
    default:
      return holySheepProvider; // Default về HolySheep để tiết kiệm chi phí
  }
}

// Hàm helper lấy model phù hợp với use case
export function getModelForTask(task: 'chat' | 'embedding' | 'reasoning') {
  const isHolySheep = process.env.AI_PROVIDER !== 'openai';
  
  if (isHolySheep) {
    switch (task) {
      case 'chat':
        return holySheepProvider('gpt-4.1'); // $8/MTok
      case 'embedding':
        return holySheepProvider('text-embedding-3-large');
      case 'reasoning':
        return holySheepProvider('claude-sonnet-4.5'); // $15/MTok
      default:
        return holySheepProvider('gpt-4.1');
    }
  }
  
  // Fallback sang OpenAI native nếu cần
  return holySheepProvider('gpt-4o');
}

3. Server Action cho Chat Integration

// app/api/chat/actions.ts
'use server';

import { streamText, CoreMessage } from 'ai';
import { getModelForTask } from '@/lib/ai/providers';

interface ChatRequest {
  messages: CoreMessage[];
  systemPrompt?: string;
  temperature?: number;
  maxTokens?: number;
}

export async function createChatCompletion({
  messages,
  systemPrompt = 'Bạn là một trợ lý AI hữu ích.',
  temperature = 0.7,
  maxTokens = 2048,
}: ChatRequest) {
  const model = getModelForTask('chat');
  
  // Sử dụng streaming để giảm perceived latency
  const result = streamText({
    model,
    system: systemPrompt,
    messages,
    temperature,
    maxTokens,
    // Enable telemetry nếu cần theo dõi usage
    maxRetries: 3,
    onError: ({ error }) => {
      console.error('AI API Error:', error);
    },
  });

  return result;
}

// Server action không streaming cho batch processing
export async function createCompletion(messages: CoreMessage[]) {
  const model = getModelForTask('chat');
  
  const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': Bearer ${process.env.HOLYSHEEP_API_KEY},
    },
    body: JSON.stringify({
      model: 'gpt-4.1',
      messages,
      temperature: 0.7,
      max_tokens: 2048,
    }),
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(AI API Error: ${error.error?.message || response.statusText});
  }

  return response.json();
}

4. Client Component với Streaming UI

// app/chat/page.tsx
'use client';

import { useState } from 'react';
import { useChat } from 'ai/react';
import { createChatCompletion } from './actions';

export default function ChatPage() {
  const [isStreaming, setIsStreaming] = useState(false);
  
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/api/chat',
    onResponse: (response) => {
      setIsStreaming(true);
      console.log('Stream started, latency:', performance.now());
    },
    onFinish: (message) => {
      setIsStreaming(false);
      console.log('Stream completed, total time:', performance.now());
    },
  });

  return (
    <div className="max-w-4xl mx-auto p-6">
      <h1 className="text-2xl font-bold mb-4">AI Chat Integration Demo</h1>
      
      <div className="bg-gray-100 rounded-lg p-4 mb-4 h-96 overflow-y-auto">
        {messages.map((m) => (
          <div key={m.id} className="mb-4">
            <span className={m.role === 'user' ? 'text-blue-600' : 'text-green-600'}>
              {m.role === 'user' ? 'User: ' : 'AI: '}
            </span>
            {m.content}
          </div>
        ))}
        {isStreaming && (
          <div className="text-gray-400 animate-pulse">Đang trả lời...</div>
        )}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={handleInputChange}
          placeholder="Nhập câu hỏi của bạn..."
          className="flex-1 border rounded-lg px-4 py-2"
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading}
          className="bg-blue-600 text-white px-6 py-2 rounded-lg disabled:opacity-50"
        >
          {isLoading ? 'Đang xử lý...' : 'Gửi'}
        </button>
      </form>
    </div>
  );
}

5. API Route Handler

// app/api/chat/route.ts
import { streamingText } from 'ai/server';
import { CoreMessage } from 'ai';

export const runtime = 'edge';
export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages, model = 'gpt-4.1' } = await req.json();

  // Validate input
  if (!messages || !Array.isArray(messages) || messages.length === 0) {
    return new Response('Messages are required', { status: 400 });
  }

  // Call HolySheep API - baseURL: https://api.holysheep.ai/v1
  const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': Bearer ${process.env.HOLYSHEEP_API_KEY},
    },
    body: JSON.stringify({
      model: model,
      messages: messages,
      stream: true,
      temperature: 0.7,
      max_tokens: 2048,
    }),
  });

  if (!response.ok) {
    const error = await response.json();
    return new Response(JSON.stringify({ error: error.message }), { 
      status: response.status 
    });
  }

  // Transform và stream về client
  return new Response(response.body, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

Tối ưu chi phí và hiệu suất

Chiến lược Token Optimization

Qua kinh nghiệm triển khai hàng chục dự án, mình nhận ra rằng việc tối ưu token usage có thể tiết kiệm đến 60% chi phí hàng tháng. Dưới đây là các best practices đã được kiểm chứng:

// lib/ai/token-optimizer.ts

interface TokenStats {
  inputTokens: number;
  outputTokens: number;
  estimatedCost: number;
}

// Ước tính chi phí dựa trên model
export function calculateCost(stats: TokenStats, model: string): number {
  const pricing: Record<string, { input: number; output: number }> = {
    'gpt-4.1': { input: 2.40, output: 8.00 }, // $/MTok
    'claude-sonnet-4.5': { input: 3.75, output: 15.00 },
    'gemini-2.5-flash': { input: 0.30, output: 2.50 },
    'deepseek-v3.2': { input: 0.14, output: 0.42 },
  };

  const p = pricing[model] || pricing['gpt-4.1'];
  const inputCost = (stats.inputTokens / 1_000_000) * p.input;
  const outputCost = (stats.outputTokens / 1_000_000) * p.output;
  
  return inputCost + outputCost;
}

// Tool để đếm tokens (sử dụng tiktoken pattern)
export function countTokens(text: string): number {
  // Rough estimation: ~4 characters per token cho tiếng Anh
  // ~2 characters per token cho tiếng Việt
  return Math.ceil(text.length / 2.5);
}

// Context compression cho messages dài
export function compressMessages(messages: any[], maxTokens: number = 8000) {
  let totalTokens = 0;
  const compressed: any[] = [];
  
  // Duyệt từ cuối lên đầu để giữ context gần nhất
  for (let i = messages.length - 1; i >= 0; i--) {
    const msgTokens = countTokens(JSON.stringify(messages[i]));
    if (totalTokens + msgTokens > maxTokens) break;
    
    compressed.unshift(messages[i]);
    totalTokens += msgTokens;
  }
  
  return compressed;
}

// Batch processing để giảm API calls
export async function batchProcess

// ❌ SAI - Hardcode API key trong code
const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
  headers: {
    'Authorization': 'Bearer sk-xxxxxx-xxx-xxx', // KHÔNG LÀM THẾ NÀY!
  },
});

// ✅ ĐÚNG - Sử dụng environment variable
const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
  headers: {
    'Authorization': Bearer ${process.env.HOLYSHEEP_API_KEY},
  },
});

// Hoặc kiểm tra và throw error rõ ràng
if (!process.env.HOLYSHEEP_API_KEY) {
  throw new Error('HOLYSHEEP_API_KEY is not configured');
}

// ❌ SAI - Gọi API liên tục không giới hạn
async function processAll(items: string[]) {
  return Promise.all(items.map(item => callAI(item)));
}

// ✅ ĐÚNG - Implement exponential backoff
async function callAIWithRetry(prompt: string, maxRetries = 3) {
  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': Bearer ${process.env.HOLYSHEEP_API_KEY},
        },
        body: JSON.stringify({ model: 'gpt-4.1', messages: [{ role: 'user', content: prompt }] }),
      });

      if (response.status === 429) {
        // Exponential backoff: 1s, 2s, 4s...
        const delay = Math.pow(2, attempt) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
        continue;
      }

      if (!response.ok) throw new Error(HTTP ${response.status});
      return await response.json();
      
    } catch (error) {
      if (attempt === maxRetries - 1) throw error;
    }
  }
}

// ✅ HOẶC - Sử dụng batch queue
class RateLimitQueue {
  private queue: Array<() => Promise<any>> = [];
  private processing = false;
  private lastRequestTime = 0;
  private minInterval = 100; // 100ms giữa các request

  async add<T>(fn: () => Promise<T>): Promise<T> {
    return new Promise((resolve, reject) => {
      this.queue.push(async () => {
        try {
          const now = Date.now();
          const waitTime = Math.max(0, this.minInterval - (now - this.lastRequestTime));
          await new Promise(r => setTimeout(r, waitTime));
          this.lastRequestTime = Date.now();
          resolve(await fn());
        } catch (e) {
          reject(e);
        }
      });
      this.process();
    });
  }

  private async process() {
    if (this.processing || this.queue.length === 0) return;
    this.processing = true;
    while (this.queue.length > 0) {
      const fn = this.queue.shift()!;
      await fn();
    }
    this.processing = false;
  }
}

// ❌ SAI - Không handle abort signal
export async function* streamAI(prompt: string) {
  const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
    // ...
  });
  
  const reader = response.body!.getReader();
  const decoder = new TextDecoder();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    yield decoder.decode(value);
  }
}

// ✅ ĐÚNG - Handle abort signal và cleanup
export async function* streamAI(prompt: string, signal?: AbortSignal) {
  const response = await fetch('https://api.holysheep.ai/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': Bearer ${process.env.HOLYSHEEP_API_KEY},
    },
    body: JSON.stringify({
      model: 'gpt-4.1',
      messages: [{ role: 'user', content: prompt }],
      stream: true,
    }),
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.message || 'Stream failed');
  }

  const reader = response.body!.getReader();
  const decoder = new TextDecoder();

  try {
    while (true) {
      // Kiểm tra abort signal
      if (signal?.aborted) {
        reader.cancel();
        throw new DOMException('Aborted', 'AbortError');
      }

      const { done, value } = await reader.read();
      if (done) break;
      
      const chunk = decoder.decode(value, { stream: true });
      // Parse SSE format: data: {...}\n\n
      const lines = chunk.split('\n');
      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const data = line.slice(6);
          if (data === '[DONE]') return;
          try {
            const parsed = JSON.parse(data);
            yield parsed.choices[0]?.delta?.content || '';
          } catch (e) {
            // Ignore parse errors for partial chunks
          }
        }
      }
    }
  } finally {
    reader.releaseLock();
  }
}

// Usage trong component
const abortController = new AbortController();

try {
  for await (const chunk of streamAI('Hello', abortController.signal)) {
    console.log(chunk);
  }
} catch (e) {
  if (e.name === 'AbortError') {
    console.log('Stream was cancelled');
  }
}

// Cleanup khi component unmount
onUnmount(() => {
  abortController.abort();
});