TL;DRDeploy AI humanization in Next.js + Vercel using a server-side API route or Edge function. The API works in both Node.js and Edge runtimes – just call /v1/humanize with your bearer token. For static-generation workflows, run humanization at build time via getStaticProps.

Using the AI Humanizer API with Next.js and Vercel

Next.js and Vercel are a powerful combination for building modern web applications, and integrating the AI Humanizer API is seamless. This guide covers everything from basic API route handlers to advanced Vercel deployment patterns, ensuring your humanization features scale effortlessly.

Project Setup and Dependencies

Start by creating a new Next.js project with TypeScript support.

npx create-next-app@latest humanizer-app --typescript --tailwind
cd humanizer-app

npm install axios dotenv-safe

Create a .env.local file in your project root to store your API credentials securely. Vercel will handle these on deployment.

NEXT_PUBLIC_APP_NAME=AI Humanizer
HUMANIZER_API_KEY=your_api_key_here
HUMANIZER_API_URL=https://api.aihumanizerapi.com/v1

Building API Route Handlers

Next.js API routes provide a simple way to create backend endpoints. Here’s how to set up a route handler for humanizing text.

// app/api/humanize/route.ts
import { NextRequest, NextResponse } from 'next/server';
import axios from 'axios';

interface HumanizeRequestBody {
  text: string;
  tone?: 'professional' | 'casual' | 'academic';
  preserve_formatting?: boolean;
}

export async function POST(request: NextRequest) {
  try {
    const body: HumanizeRequestBody = await request.json();

    if (!body.text || body.text.trim().length === 0) {
      return NextResponse.json(
        { error: 'Text is required' },
        { status: 400 }
      );
    }

    if (body.text.length > 50000) {
      return NextResponse.json(
        { error: 'Text exceeds maximum length of 50,000 characters' },
        { status: 400 }
      );
    }

    const response = await axios.post(
      `${process.env.HUMANIZER_API_URL}/humanize`,
      {
        text: body.text,
        tone: body.tone || 'professional',
        preserve_formatting: body.preserve_formatting !== false,
      },
      {
        headers: {
          'Authorization': `Bearer ${process.env.HUMANIZER_API_KEY}`,
          'Content-Type': 'application/json',
        },
        timeout: 30000,
      }
    );

    return NextResponse.json(response.data);
  } catch (error) {
    console.error('Humanize API error:', error);

    if (axios.isAxiosError(error)) {
      if (error.response?.status === 429) {
        return NextResponse.json(
          { error: 'Rate limit exceeded. Please try again later.' },
          { status: 429 }
        );
      }

      return NextResponse.json(
        { error: error.response?.data?.error || 'API request failed' },
        { status: error.response?.status || 500 }
      );
    }

    return NextResponse.json(
      { error: 'An unexpected error occurred' },
      { status: 500 }
    );
  }
}

Server Actions for Form Submission

Server actions simplify form handling by running code directly on the server. This is perfect for humanization requests from client forms.

// app/actions/humanize.ts
'use server';

import axios from 'axios';

export interface HumanizeResult {
  success: boolean;
  humanized_text?: string;
  original_length?: number;
  humanized_length?: number;
  error?: string;
}

export async function humanizeText(
  text: string,
  tone: string = 'professional'
): Promise {
  try {
    if (!text || text.trim().length === 0) {
      return { success: false, error: 'Text cannot be empty' };
    }

    const response = await axios.post(
      `${process.env.HUMANIZER_API_URL}/humanize`,
      { text, tone, preserve_formatting: true },
      {
        headers: {
          'Authorization': `Bearer ${process.env.HUMANIZER_API_KEY}`,
        },
        timeout: 30000,
      }
    );

    return {
      success: true,
      humanized_text: response.data.humanized_text,
      original_length: response.data.original_length,
      humanized_length: response.data.humanized_length,
    };
  } catch (error) {
    console.error('Server action error:', error);
    return {
      success: false,
      error: 'Failed to humanize text. Please try again.',
    };
  }
}

Building the Client Component

Create a React component that uses the server action to humanize text submitted through a form.

// app/components/HumanizeForm.tsx
'use client';

import { useState } from 'react';
import { humanizeText } from '@/app/actions/humanize';

export default function HumanizeForm() {
  const [input, setInput] = useState('');
  const [tone, setTone] = useState('professional');
  const [output, setOutput] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError('');
    setOutput('');

    const result = await humanizeText(input, tone);

    if (result.success) {
      setOutput(result.humanized_text || '');
    } else {
      setError(result.error || 'An error occurred');
    }

    setLoading(false);
  }

  return (