Como integrar validação de CPF em Vercel Serverless Functions

npm install -g vercel
vercel login

cpf-validation/
├── api/
│ └── cpf/
│ └── [cpf].js
├── vercel.json
└── package.json

// api/cpf/[cpf].js

export default async function handler(req, res) {
    if (req.method !== 'GET') {
    return res.status(405).json({ error: 'Método não permitido.' });
    }

    const { cpf } = req.query;

    if (!cpf || !/^\d{11}$/.test(cpf)) {
    return res.status(400).json({
    error: 'CPF invalido. Informe 11 digitos numericos.',
    });
    }

    const apiKey = process.env.CPFHUB_API_KEY;

    if (!apiKey) {
    console.error('CPFHUB_API_KEY não configurada.');
    return res.status(500).json({ error: 'Erro de configuração do servidor.' });
    }

    try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 30000);

    const response = await fetch(`https://api.cpfhub.io/cpf/${cpf}`, {
    method: 'GET',
    headers: {
    'x-api-key': apiKey,
    'Accept': 'application/json',
    },
    signal: controller.signal,
    });

    clearTimeout(timeoutId);

    const data = await response.json();

    if (response.ok && data.success) {
    return res.status(200).json({
    success: true,
    data: data.data,
    });
    }

    return res.status(response.status).json({
    error: 'CPF não encontrado.',
    });
    } catch (error) {
    if (error.name === 'AbortError') {
    return res.status(504).json({ error: 'Timeout na consulta.' });
    }

    console.error('Erro ao consultar CPFHub:', error.message);
    return res.status(500).json({ error: 'Erro interno.' });
    }
}

// app/api/cpf/[cpf]/route.js

import { NextResponse } from 'next/server';

export async function GET(request, { params }) {
    const { cpf } = params;

    if (!cpf || !/^\d{11}$/.test(cpf)) {
    return NextResponse.json(
    { error: 'CPF invalido. Informe 11 digitos numericos.' },
    { status: 400 }
    );
    }

    const apiKey = process.env.CPFHUB_API_KEY;

    try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 30000);

    const response = await fetch(`https://api.cpfhub.io/cpf/${cpf}`, {
    method: 'GET',
    headers: {
    'x-api-key': apiKey,
    'Accept': 'application/json',
    },
    signal: controller.signal,
    cache: 'no-store',
    });

    clearTimeout(timeoutId);

    const data = await response.json();

    if (response.ok && data.success) {
    return NextResponse.json({
    success: true,
    data: {
    cpf: data.data.cpf,
    name: data.data.name,
    nameUpper: data.data.nameUpper,
    gender: data.data.gender,
    birthDate: data.data.birthDate,
    day: data.data.day,
    month: data.data.month,
    year: data.data.year,
    },
    });
    }

    return NextResponse.json(
    { error: 'CPF nao encontrado.' },
    { status: 404 }
    );
    } catch (error) {
    console.error('Erro ao consultar CPFHub:', error.message);
    return NextResponse.json(
    { error: 'Erro interno ao consultar a API.' },
    { status: 500 }
    );
    }
}

vercel env add CPFHUB_API_KEY
# Quando solicitado, insira: SUA_CHAVE_DE_API
# Selecione os ambientes: Production, Preview, Development

CPFHUB_API_KEY=SUA_CHAVE_DE_API

{
    "success": true,
    "data": {
    "cpf": "12345678900",
    "name": "Joao da Silva",
    "nameUpper": "JOAO DA SILVA",
    "gender": "M",
    "birthDate": "15/06/1990",
    "day": 15,
    "month": 6,
    "year": 1990
    }
}

// components/CpfValidator.jsx
'use client';

import { useState } from 'react';

export default function CpfValidator() {
    const [cpf, setCpf] = useState('');
    const [resultado, setResultado] = useState(null);
    const [loading, setLoading] = useState(false);
    const [erro, setErro] = useState('');

    const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErro('');
    setResultado(null);

    const cpfLimpo = cpf.replace(/\D/g, '');

    try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 30000);

    const response = await fetch(`/api/cpf/${cpfLimpo}`, {
    signal: controller.signal,
    });

    clearTimeout(timeoutId);

    const data = await response.json();

    if (data.success) {
    setResultado(data.data);
    } else {
    setErro(data.error || 'CPF não encontrado.');
    }
    } catch (error) {
    setErro('Erro ao consultar. Tente novamente.');
    } finally {
    setLoading(false);
    }
    };

    return (
    <div>
    <form onSubmit={handleSubmit}>
    <input
    type="text"
    value={cpf}
    onChange={(e) => setCpf(e.target.value)}
    placeholder="Digite o CPF (11 dígitos)"
    maxLength={14}
    />
    <button type="submit" disabled={loading}>
    {loading ? 'Consultando...' : 'Validar CPF'}
    </button>
    </form>

    {erro && <p style={{ color: 'red' }}>{erro}</p>}

    {resultado && (
    <div>
    <p><strong>Nome:</strong> {resultado.name}</p>
    <p><strong>Gênero:</strong> {resultado.gender === 'M' ? 'Masculino' : 'Feminino'}</p>
    <p><strong>Nascimento:</strong> {resultado.birthDate}</p>
    </div>
    )}
    </div>
    );
}

# Deploy para preview
vercel

# Deploy para produção
vercel --prod