v1.0.0

First create an API Route. In your app/api directory, create a file (e.g., app/api/whois.js)

import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const apiKey = process.env.API_KEY_WEATHER; // Get your API key from the server env

  if (!apiKey) {
    return res.status(500).json({ error: 'API key not found' });
  }

  try {
    const response = await fetch(
      `https://api.apilayer.com/whois/query?domain=${req.query.domain}`,
      {
        headers: {
          'apikey': apiKey,
        },
      }
    );

    if (!response.ok) {
      const errorData = await response.json();
      const errorMessage = errorData.error || response.statusText;
      return res.status(response.status).json({ error: errorMessage });
    }

    const data = await response.json();
    return res.status(200).json(data);
  } catch (error) {
    console.error('Error fetching WHOIS data:', error);
    return res.status(500).json({ error: 'Failed to fetch WHOIS data' });
  }
}

Then fetch from the API Route in your Component

import { useState, useEffect } from 'react';

export default function WhoisLookup() {
  const [domain, setDomain] = useState('');
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/whois?domain=${domain}`);
        if (!response.ok) {
          const errorData = await response.json();
          setError(errorData.error || 'Network response was not ok');
        } else {
          const data = await response.json();
          setResult(data);
        }
      } catch (error) {
        setError('Failed to fetch data');
      } finally {
        setLoading(false);
      }
    };

    if (domain) {
      fetchData();
    }
  }, [domain]);

  // ... rest of your component ...
}