Como criar um formulário de cadastro com validação de CPF em Next.js

// Terminal
// npm install react-hook-form @hookform/resolvers zod

// lib/schemas.js
import { z } from 'zod';

function validarDigitosCpf(cpf) {
    const digitos = cpf.split('').map(Number);
    if (new Set(digitos).size === 1) return false;

    let soma = 0;
    for (let i = 0; i < 9; i++) soma += digitos[i] * (10 - i);
    const d1 = soma % 11 < 2 ? 0 : 11 - (soma % 11);

    soma = 0;
    for (let i = 0; i < 10; i++) soma += digitos[i] * (11 - i);
    const d2 = soma % 11 < 2 ? 0 : 11 - (soma % 11);

    return digitos[9] === d1 && digitos[10] === d2;
}

export const cadastroSchema = z.object({
    cpf: z.string()
    .transform((val) => val.replace(/\D/g, ''))
    .pipe(
    z.string()
    .length(11, 'CPF deve conter 11 dígitos')
    .refine(validarDigitosCpf, 'Dígitos verificadores inválidos')
    ),
    nome: z.string().min(3, 'Nome deve ter pelo menos 3 caracteres'),
    email: z.string().email('Email inválido'),
    dataNascimento: z.string().min(1, 'Data de nascimento é obrigatória'),
});

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

import { forwardRef, useCallback } from 'react';

function aplicarMascara(valor) {
    const digitos = valor.replace(/\D/g, '').slice(0, 11);
    if (digitos.length <= 3) return digitos;
    if (digitos.length <= 6) return `${digitos.slice(0, 3)}.${digitos.slice(3)}`;
    if (digitos.length <= 9)
    return `${digitos.slice(0, 3)}.${digitos.slice(3, 6)}.${digitos.slice(6)}`;
    return `${digitos.slice(0, 3)}.${digitos.slice(3, 6)}.${digitos.slice(6, 9)}-${digitos.slice(9)}`;
}

const CpfInput = forwardRef(function CpfInput(
    { onChange, onBlur, name, error, validado, ...props },
    ref
) {
    const handleChange = useCallback(
    (e) => {
    const mascarado = aplicarMascara(e.target.value);
    e.target.value = mascarado;
    onChange(e);
    },
    [onChange]
    );

    let borderClass = 'border-gray-300';
    if (error) borderClass = 'border-red-500';
    else if (validado) borderClass = 'border-green-500';

    return (
    <div>
    <label htmlFor={name} className="block text-sm font-medium mb-1">
    CPF
    </label>
    <input
    ref={ref}
    id={name}
    name={name}
    type="text"
    inputMode="numeric"
    maxLength={14}
    placeholder="000.000.000-00"
    onChange={handleChange}
    onBlur={onBlur}
    className={`w-full p-3 border rounded ${borderClass}`}
    {...props}
    />
    {error && <p className="text-red-500 text-sm mt-1">{error}</p>}
    </div>
    );
});

export default CpfInput;

// app/api/validar-cpf/route.js

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

    if (cpfLimpo.length !== 11) {
    return Response.json(
    { valido: false, message: 'CPF incompleto' },
    { status: 400 }
    );
    }

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

    if (!response.ok) {
    return Response.json({
    valido: true,
    encontrado: false,
    message: 'CPF válido, mas não encontrado na base',
    });
    }

    const dados = await response.json();

    if (dados.success) {
    return Response.json({
    valido: true,
    encontrado: true,
    nome: dados.data.name,
    dataNascimento: dados.data.birthDate,
    genero: dados.data.gender,
    });
    }

    return Response.json({ valido: true, encontrado: false });
    } catch {
    return Response.json(
    { valido: false, message: 'Erro na validação' },
    { status: 502 }
    );
    }
}

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

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState } from 'react';
import { cadastroSchema } from '@/lib/schemas';
import CpfInput from './CpfInput';

export default function FormularioCadastro() {
    const [cpfValidado, setCpfValidado] = useState(false);
    const [submitting, setSubmitting] = useState(false);

    const {
    register,
    handleSubmit,
    setValue,
    formState: { errors },
    } = useForm({
    resolver: zodResolver(cadastroSchema),
    });

    const handleCpfBlur = async (e) => {
    const cpf = e.target.value;
    if (cpf.replace(/\D/g, '').length !== 11) return;

    try {
    const response = await fetch('/api/validar-cpf', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cpf }),
    });

    const dados = await response.json();

    if (dados.encontrado) {
    setValue('nome', dados.nome);
    setValue('dataNascimento', dados.dataNascimento);
    setCpfValidado(true);
    }
    } catch {
    console.error('Erro ao validar CPF');
    }
    };

    const onSubmit = async (data) => {
    setSubmitting(true);
    try {
    console.log('Dados do cadastro:', data);
    } finally {
    setSubmitting(false);
    }
    };

    return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-lg mx-auto">
    <CpfInput
    {...register('cpf')}
    error={errors.cpf?.message}
    validado={cpfValidado}
    onBlur={handleCpfBlur}
    />

    <div>
    <label htmlFor="nome" className="block text-sm font-medium mb-1">Nome</label>
    <input id="nome" {...register('nome')} className="w-full p-3 border rounded" />
    {errors.nome && <p className="text-red-500 text-sm mt-1">{errors.nome.message}</p>}
    </div>

    <div>
    <label htmlFor="email" className="block text-sm font-medium mb-1">Email</label>
    <input id="email" type="email" {...register('email')} className="w-full p-3 border rounded" />
    {errors.email && <p className="text-red-500 text-sm mt-1">{errors.email.message}</p>}
    </div>

    <div>
    <label htmlFor="dataNascimento" className="block text-sm font-medium mb-1">
    Data de Nascimento
    </label>
    <input id="dataNascimento" type="date" {...register('dataNascimento')}
    className="w-full p-3 border rounded" />
    {errors.dataNascimento && (
    <p className="text-red-500 text-sm mt-1">{errors.dataNascimento.message}</p>
    )}
    </div>

    <button type="submit" disabled={submitting}
    className="w-full p-3 bg-blue-600 text-white rounded">
    {submitting ? 'Cadastrando...' : 'Cadastrar'}
    </button>
    </form>
    );
}