EmailVerify LogoEmailVerify
IntegratiegidsenWebframeworks

Next.js

Email checker for Next.js. Server-side and client-side email verification in React.

Implementeer e-mailverificatie in Next.js applicaties met server-side validatie, API routes en React Server Components.

Installatie

npm install @emailverify/node
yarn add @emailverify/node
pnpm add @emailverify/node

Omgeving Setup

Voeg uw API-sleutel toe aan .env.local:

EMAILVERIFY_API_KEY=bv_live_xxx

App Router (Next.js 13+)

Server Action

Maak een server action voor e-mailverificatie:

// app/actions/verify-email.ts
'use server';

import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

export async function verifyEmail(email: string) {
  try {
    const result = await client.verify(email);
    return {
      success: true,
      data: result,
    };
  } catch (error) {
    return {
      success: false,
      error: 'Verificatie mislukt',
    };
  }
}

Client Component met Server Action

// app/components/signup-form.tsx
'use client';

import { useState, useTransition } from 'react';
import { verifyEmail } from '../actions/verify-email';

export function SignupForm() {
  const [email, setEmail] = useState('');
  const [verification, setVerification] = useState<any>(null);
  const [isPending, startTransition] = useTransition();

  const handleEmailBlur = () => {
    if (!email) return;

    startTransition(async () => {
      const result = await verifyEmail(email);
      setVerification(result);
    });
  };

  return (
    <form className="space-y-4">
      <div>
        <label htmlFor="email" className="block text-sm font-medium">
          E-mail
        </label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          onBlur={handleEmailBlur}
          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
        />

        {isPending && (
          <p className="text-sm text-gray-500 mt-1">Verifieren...</p>
        )}

        {verification?.data?.status === 'valid' && (
          <p className="text-sm text-green-600 mt-1">✓ E-mail geverifieerd</p>
        )}

        {verification?.data?.status === 'invalid' && (
          <p className="text-sm text-red-600 mt-1">
            Voer een geldig e-mailadres in
          </p>
        )}

        {verification?.data?.result?.disposable && (
          <p className="text-sm text-yellow-600 mt-1">
            Gebruik een permanent e-mailadres
          </p>
        )}
      </div>

      <button
        type="submit"
        disabled={isPending || verification?.data?.status !== 'valid'}
        className="w-full py-2 px-4 bg-blue-600 text-white rounded-md disabled:opacity-50"
      >
        Registreren
      </button>
    </form>
  );
}

API Route Handler

// app/api/verify-email/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

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

    if (!email) {
      return NextResponse.json(
        { error: 'E-mail is vereist' },
        { status: 400 }
      );
    }

    const result = await client.verify(email);
    return NextResponse.json(result);
  } catch (error) {
    console.error('Verificatiefout:', error);
    return NextResponse.json(
      { error: 'Verificatie mislukt' },
      { status: 500 }
    );
  }
}

React Server Component

Verifieer e-mails server-side voor het renderen:

// app/user/[id]/page.tsx
import { EmailVerify } from '@emailverify/node';
import { notFound } from 'next/navigation';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

async function getUser(id: string) {
  // Haal gebruiker op uit uw database
  const user = await db.users.findUnique({ where: { id } });
  return user;
}

export default async function UserPage({ params }: { params: { id: string } }) {
  const user = await getUser(params.id);

  if (!user) {
    notFound();
  }

  // Verifieer e-mail als nog niet geverifieerd
  let emailVerification = null;
  if (!user.emailVerified) {
    emailVerification = await client.verify(user.email);
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>

      {emailVerification && (
        <div className="mt-4">
          <h2>E-mail Status</h2>
          <p>Status: {emailVerification.status}</p>
          <p>Score: {emailVerification.score}</p>
        </div>
      )}
    </div>
  );
}

Pages Router (Next.js 12)

API Route

// pages/api/verify-email.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Methode niet toegestaan' });
  }

  const { email } = req.body;

  if (!email) {
    return res.status(400).json({ error: 'E-mail is vereist' });
  }

  try {
    const result = await client.verify(email);
    return res.json(result);
  } catch (error) {
    console.error('Verificatiefout:', error);
    return res.status(500).json({ error: 'Verificatie mislukt' });
  }
}

getServerSideProps

Verifieer e-mails tijdens SSR:

// pages/user/[id].tsx
import { GetServerSideProps } from 'next';
import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

interface Props {
  user: User;
  emailVerification: VerificationResult | null;
}

export const getServerSideProps: GetServerSideProps<Props> = async (context) => {
  const { id } = context.params!;

  const user = await getUser(id as string);

  if (!user) {
    return { notFound: true };
  }

  let emailVerification = null;
  if (!user.emailVerified) {
    try {
      emailVerification = await client.verify(user.email);
    } catch (error) {
      console.error('Verificatie mislukt:', error);
    }
  }

  return {
    props: {
      user,
      emailVerification,
    },
  };
};

export default function UserPage({ user, emailVerification }: Props) {
  return (
    <div>
      <h1>{user.name}</h1>
      {emailVerification && (
        <p>E-mail status: {emailVerification.status}</p>
      )}
    </div>
  );
}

Formulierverwerking Patronen

Met useFormState (React 19)

// app/components/form-with-state.tsx
'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { signupAction } from '../actions/signup';

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Verzenden...' : 'Registreren'}
    </button>
  );
}

export function SignupFormWithState() {
  const [state, formAction] = useFormState(signupAction, {
    success: false,
    errors: {},
  });

  return (
    <form action={formAction}>
      <div>
        <input type="email" name="email" required />
        {state.errors?.email && (
          <p className="text-red-600">{state.errors.email}</p>
        )}
      </div>

      <div>
        <input type="text" name="name" required />
        {state.errors?.name && (
          <p className="text-red-600">{state.errors.name}</p>
        )}
      </div>

      <SubmitButton />

      {state.success && (
        <p className="text-green-600">Account succesvol aangemaakt!</p>
      )}
    </form>
  );
}
// app/actions/signup.ts
'use server';

import { EmailVerify } from '@emailverify/node';
import { z } from 'zod';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

const signupSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
});

export async function signupAction(
  prevState: any,
  formData: FormData
) {
  const rawData = {
    email: formData.get('email') as string,
    name: formData.get('name') as string,
  };

  // Valideer schema
  const parsed = signupSchema.safeParse(rawData);
  if (!parsed.success) {
    return {
      success: false,
      errors: parsed.error.flatten().fieldErrors,
    };
  }

  // Verifieer e-mail
  const verification = await client.verify(parsed.data.email);

  if (verification.status === 'invalid') {
    return {
      success: false,
      errors: { email: ['Voer een geldig e-mailadres in'] },
    };
  }

  if (verification.result.disposable) {
    return {
      success: false,
      errors: { email: ['Wegwerp e-mails zijn niet toegestaan'] },
    };
  }

  // Maak gebruiker in database
  await createUser(parsed.data);

  return { success: true, errors: {} };
}

Met React Hook Form

// app/components/react-hook-form-example.tsx
'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Ongeldige e-mail'),
  password: z.string().min(8, 'Wachtwoord moet minimaal 8 tekens bevatten'),
});

type FormData = z.infer<typeof schema>;

export function SignupFormHookForm() {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    // Verifieer e-mail
    const response = await fetch('/api/verify-email', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: data.email }),
    });

    const verification = await response.json();

    if (verification.status === 'invalid') {
      setError('email', {
        type: 'manual',
        message: 'Voer een geldig e-mailadres in',
      });
      return;
    }

    // Ga verder met registratie
    console.log('Verzenden:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <input
          type="email"
          {...register('email')}
          className="w-full p-2 border rounded"
        />
        {errors.email && (
          <p className="text-red-600 text-sm">{errors.email.message}</p>
        )}
      </div>

      <div>
        <input
          type="password"
          {...register('password')}
          className="w-full p-2 border rounded"
        />
        {errors.password && (
          <p className="text-red-600 text-sm">{errors.password.message}</p>
        )}
      </div>

      <button
        type="submit"
        disabled={isSubmitting}
        className="w-full py-2 bg-blue-600 text-white rounded disabled:opacity-50"
      >
        {isSubmitting ? 'Verifieren...' : 'Registreren'}
      </button>
    </form>
  );
}

Middleware Verificatie

Verifieer e-mails in Next.js middleware:

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  // Alleen uitvoeren op registratieroutes
  if (request.nextUrl.pathname !== '/api/signup') {
    return NextResponse.next();
  }

  const body = await request.json();
  const { email } = body;

  if (email) {
    // Verifieer e-mail voor verwerking van registratie
    const verifyResponse = await fetch(
      'https://api.emailverify.ai/v1/verify',
      {
        method: 'POST',
        headers: {
          'Authorization': `Bearer ${process.env.EMAILVERIFY_API_KEY}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
      }
    );

    const verification = await verifyResponse.json();

    if (verification.status === 'invalid') {
      return NextResponse.json(
        { error: 'Ongeldig e-mailadres' },
        { status: 400 }
      );
    }
  }

  return NextResponse.next();
}

export const config = {
  matcher: '/api/signup',
};

Caching Strategieen

Route Handler Caching

// app/api/verify-email/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

// In-memory cache (gebruik Redis in productie)
const cache = new Map<string, { result: any; timestamp: number }>();
const CACHE_DURATION = 3600000; // 1 uur

export async function POST(request: NextRequest) {
  const { email } = await request.json();

  // Controleer cache
  const cached = cache.get(email);
  if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
    return NextResponse.json(cached.result, {
      headers: { 'X-Cache': 'HIT' },
    });
  }

  // Verifieer e-mail
  const result = await client.verify(email);

  // Cache resultaat
  cache.set(email, { result, timestamp: Date.now() });

  return NextResponse.json(result, {
    headers: { 'X-Cache': 'MISS' },
  });
}

Redis Caching (Productie)

// lib/verify-with-cache.ts
import { Redis } from '@upstash/redis';
import { EmailVerify } from '@emailverify/node';

const redis = Redis.fromEnv();
const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

export async function verifyEmailWithCache(email: string) {
  const cacheKey = `email-verify:${email}`;

  // Controleer cache
  const cached = await redis.get(cacheKey);
  if (cached) {
    return { ...cached, fromCache: true };
  }

  // Verifieer e-mail
  const result = await client.verify(email);

  // Cache voor 24 uur
  await redis.setex(cacheKey, 86400, result);

  return { ...result, fromCache: false };
}

Bulk Verificatie

Achtergrondtaak met API Route

// app/api/verify-bulk/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

export async function POST(request: NextRequest) {
  const { emails, webhookUrl } = await request.json();

  // Dien bulk taak in
  const job = await client.verifyBulk(emails, {
    webhookUrl: webhookUrl || `${process.env.NEXT_PUBLIC_URL}/api/webhook/bulk-complete`,
  });

  return NextResponse.json(job);
}

// Webhook handler voor voltooiing
// app/api/webhook/bulk-complete/route.ts
export async function POST(request: NextRequest) {
  const event = await request.json();

  if (event.event === 'bulk.completed') {
    // Verwerk voltooide taak
    await processCompletedJob(event.data.job_id);
  }

  return NextResponse.json({ received: true });
}

Foutafhandeling

Globale Fouthandler

// lib/emailverify.ts
import { EmailVerify } from '@emailverify/node';

const client = new EmailVerify({
  apiKey: process.env.EMAILVERIFY_API_KEY!,
});

export async function verifyEmailSafe(email: string) {
  try {
    const result = await client.verify(email);
    return { success: true, data: result };
  } catch (error: any) {
    // Log fout voor monitoring
    console.error('E-mailverificatie mislukt:', {
      email,
      error: error.message,
      code: error.code,
    });

    // Retourneer elegante fallback
    if (error.code === 'RATE_LIMIT_EXCEEDED') {
      return {
        success: false,
        error: 'Limiet overschreden',
        retryAfter: error.retryAfter,
      };
    }

    if (error.code === 'INSUFFICIENT_CREDITS') {
      return {
        success: false,
        error: 'Service tijdelijk niet beschikbaar',
      };
    }

    return {
      success: false,
      error: 'Verificatie mislukt',
    };
  }
}

TypeScript Configuratie

Voor volledige typeveiligheid, breid uw types uit:

// types/emailverify.ts
import type { VerificationResult } from '@emailverify/node';

export interface VerifyEmailResponse {
  success: boolean;
  data?: VerificationResult;
  error?: string;
  fromCache?: boolean;
}

export interface SignupFormState {
  success: boolean;
  errors: {
    email?: string[];
    name?: string[];
  };
}

Best Practices

1. Altijd Server-Side Verifieren

// ✅ Goed - Server verificatie
export async function signupAction(data: FormData) {
  const email = data.get('email') as string;
  const verification = await verifyEmail(email);
  // ...
}

// ❌ Slecht - Client-only verificatie kan worden omzeild

2. Verwerk Alle Statussen

function EmailStatus({ verification }: { verification: any }) {
  if (verification.isLoading) return <Loading />;
  if (verification.error) return <ErrorMessage />;
  if (!verification.data) return null;

  switch (verification.data.status) {
    case 'valid':
      return <ValidBadge />;
    case 'invalid':
      return <InvalidMessage />;
    case 'unknown':
      return <UnknownWarning />;
    case 'accept_all':
      return <CatchAllWarning />;
    default:
      return null;
  }
}

3. Blokkeer Gebruikersstroom Niet

// Sta inzending toe maar waarschuw gebruikers
<button
  type="submit"
  disabled={isSubmitting}
>
  {verification?.status === 'invalid'
    ? 'Toch Verzenden'
    : 'Verzenden'}
</button>

Gerelateerde Bronnen

React Integratie

Client-side React componenten

Node.js SDK

Backend SDK documentatie

TypeScript SDK

Volledige type definities

React

Email checker for React. Real-time email verification in React forms and components.

Vue.js

Email checker for Vue.js. Real-time email verification in Vue components and forms.

On this page

InstallatieOmgeving SetupApp Router (Next.js 13+)Server ActionClient Component met Server ActionAPI Route HandlerReact Server ComponentPages Router (Next.js 12)API RoutegetServerSidePropsFormulierverwerking PatronenMet useFormState (React 19)Met React Hook FormMiddleware VerificatieCaching StrategieenRoute Handler CachingRedis Caching (Productie)Bulk VerificatieAchtergrondtaak met API RouteFoutafhandelingGlobale FouthandlerTypeScript ConfiguratieBest Practices1. Altijd Server-Side Verifieren2. Verwerk Alle Statussen3. Blokkeer Gebruikersstroom NietGerelateerde Bronnen