Como integrar a API de CPF em uma aplicação Next.js (App Router)

// .env.local
CPFHUB_API_KEY=SUA_API_KEY
CPFHUB_BASE_URL=https://api.cpfhub.io

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

export async function GET(request, { params }) {
    const { cpf } = await params;
    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) {
    return Response.json(
    { success: false, message: 'CPF deve conter 11 dígitos' },
    { status: 400 }
    );
    }

    try {
    const response = await fetch(
    `${process.env.CPFHUB_BASE_URL}/cpf/${cpfLimpo}`,
    {
    headers: {
    'x-api-key': process.env.CPFHUB_API_KEY,
    'Content-Type': 'application/json',
    },
    next: { revalidate: 600 },
    }
    );

    if (!response.ok) {
    return Response.json(
    { success: false, message: 'CPF não encontrado' },
    { status: response.status }
    );
    }

    const data = await response.json();
    return Response.json(data);
    } catch (error) {
    return Response.json(
    { success: false, message: 'Erro ao consultar API externa' },
    { status: 502 }
    );
    }
}

// lib/cpf-api.js

export async function consultarCpf(cpf) {
    const cpfLimpo = cpf.replace(/\D/g, '');

    const response = await fetch(
    `${process.env.CPFHUB_BASE_URL}/cpf/${cpfLimpo}`,
    {
    headers: {
    'x-api-key': process.env.CPFHUB_API_KEY,
    },
    next: { revalidate: 600 },
    }
    );

    if (!response.ok) {
    throw new Error(`Erro ${response.status}: CPF não encontrado`);
    }

    const resultado = await response.json();
    return resultado.data;
}

export function validarFormatoCpf(cpf) {
    const cpfLimpo = cpf.replace(/\D/g, '');

    if (cpfLimpo.length !== 11) return false;
    if (/^(\d)\1{10}$/.test(cpfLimpo)) return false;

    let soma = 0;
    for (let i = 0; i < 9; i++) {
    soma += parseInt(cpfLimpo[i]) * (10 - i);
    }
    let d1 = soma % 11 < 2 ? 0 : 11 - (soma % 11);

    soma = 0;
    for (let i = 0; i < 10; i++) {
    soma += parseInt(cpfLimpo[i]) * (11 - i);
    }
    let d2 = soma % 11 < 2 ? 0 : 11 - (soma % 11);

    return parseInt(cpfLimpo[9]) === d1 && parseInt(cpfLimpo[10]) === d2;
}

// app/cpf/[cpf]/page.jsx

import { consultarCpf } from '@/lib/cpf-api';
import { notFound } from 'next/navigation';

export async function generateMetadata({ params }) {
    const { cpf } = await params;
    return {
    title: `Consulta CPF ${cpf} | CPFHub`,
    };
}

export default async function CpfPage({ params }) {
    const { cpf } = await params;

    let dados;
    try {
    dados = await consultarCpf(cpf);
    } catch (error) {
    notFound();
    }

    return (
    <div className="max-w-2xl mx-auto p-6">
    <h1 className="text-2xl font-bold mb-6">Resultado da Consulta</h1>

    <div className="bg-white shadow rounded-lg p-6">
    <dl className="grid grid-cols-2 gap-4">
    <div>
    <dt className="text-sm text-gray-500">Nome</dt>
    <dd className="text-lg font-medium">{dados.name}</dd>
    </div>
    <div>
    <dt className="text-sm text-gray-500">CPF</dt>
    <dd className="text-lg font-medium">{dados.cpf}</dd>
    </div>
    <div>
    <dt className="text-sm text-gray-500">Data de Nascimento</dt>
    <dd className="text-lg font-medium">{dados.birthDate}</dd>
    </div>
    <div>
    <dt className="text-sm text-gray-500">Genero</dt>
    <dd className="text-lg font-medium">{dados.gender}</dd>
    </div>
    </dl>
    </div>
    </div>
    );
}

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

import { useState } from 'react';

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

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

    try {
    const response = await fetch(`/api/cpf/${cpf}`);
    const data = await response.json();

    if (data.success) {
    setResultado(data.data);
    } else {
    setErro(data.message);
    }
    } catch {
    setErro('Erro ao consultar CPF');
    } finally {
    setLoading(false);
    }
    };

    return (
    <div className="max-w-md mx-auto">
    <form onSubmit={handleSubmit} className="space-y-4">
    <input
    type="text"
    value={cpf}
    onChange={(e) => setCpf(e.target.value)}
    placeholder="Digite o CPF"
    maxLength={14}
    className="w-full p-3 border rounded"
    />
    <button
    type="submit"
    disabled={loading}
    className="w-full p-3 bg-blue-600 text-white rounded"
    >
    {loading ? 'Consultando...' : 'Consultar CPF'}
    </button>
    </form>

    {resultado && (
    <div className="mt-4 p-4 bg-green-50 rounded">
    <p><strong>Nome:</strong> {resultado.name}</p>
    <p><strong>CPF:</strong> {resultado.cpf}</p>
    <p><strong>Nascimento:</strong> {resultado.birthDate}</p>
    </div>
    )}

    {erro && (
    <div className="mt-4 p-4 bg-red-50 text-red-700 rounded">{erro}</div>
    )}
    </div>
    );
}