Modern AI Integration

Next.js App Router and React Server Components provide powerful patterns for building AI-powered web applications. Understanding these patterns helps create performant, scalable applications.

Server Components for AI

Server-Side Rendering

Use Server Components for AI operations that don't need interactivity:

// app/ai-page/page.tsx
export default async function AIPage() {
  const response = await generateAIResponse(prompt);
  
  return (
    

      
{response.title}
      
{response.content}
    
  );
}

Benefits

• API keys stay on server
• Faster initial page load
• Reduced client bundle size
• Better SEO

Streaming Responses

Using Streaming

Stream AI responses for better UX:

// app/api/chat/route.ts
export async function POST(req: Request) {
  const stream = await openai.chat.completions.create({
    model: 'gpt-4',
    messages: messages,
    stream: true,
  });

  return new Response(
    new ReadableStream({
      async start(controller) {
        for await (const chunk of stream) {
          const text = chunk.choices[0]?.delta?.content || '';
          controller.enqueue(new TextEncoder().encode(text));
        }
        controller.close();
      },
    })
  );
}

Client Components for Interactivity

Interactive AI Features

Use Client Components for user interactions:

'use client';

export function ChatInterface() {
  const [messages, setMessages] = useState([]);
  
  async function handleSubmit(input) {
    const response = await fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ message: input }),
    });
    // Handle response...
  }
  
  return (
    

      {/* UI */}
    
  );
}

API Routes

Secure API Endpoints

Create API routes for AI operations:

// app/api/generate/route.ts
export async function POST(req: Request) {
  const { prompt } = await req.json();
  
  // Validate input
  if (!prompt || prompt.length > 1000) {
    return Response.json({ error: 'Invalid prompt' }, { status: 400 });
  }
  
  // Call AI service
  const result = await generateText(prompt);
  
  return Response.json({ result });
}

Error Handling

Graceful Degradation

Handle AI service failures:

try {
  const response = await aiService.generate(input);
  return response;
} catch (error) {
  console.error('AI service error:', error);
  // Fallback to cached response or default behavior
  return getCachedResponse(input) || getDefaultResponse();
}

Performance Optimization

Caching

Cache AI responses when appropriate:

import { unstable_cache } from 'next/cache';

const getCachedAIResponse = unstable_cache(
  async (prompt: string) => {
    return await generateAIResponse(prompt);
  },
  ['ai-response'],
  { revalidate: 3600 } // Cache for 1 hour
);

Loading States

Provide feedback during AI operations:

• Loading indicators
• Progress updates
• Skeleton screens

Best Practices

• Keep API keys server-side only
• Validate all inputs
• Implement rate limiting
• Handle errors gracefully
• Monitor performance and costs

Conclusion

Next.js provides excellent patterns for integrating AI into web applications. By leveraging Server Components, API routes, and streaming, you can build performant AI-powered experiences.