Global Middleware Approach

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Get the referrer and target URL
  const referrer = request.headers.get('referer') || '';
  const url = request.nextUrl.clone();
  
  // Check if this is a navigation to an external site
  if (url.pathname.startsWith('/api/outbound')) {
    const targetUrl = url.searchParams.get('to');
    
    // Track outbound link
    console.log(`Outbound link from ${referrer} to ${targetUrl}`);
    
    // Redirect to the target URL
    return NextResponse.redirect(targetUrl);
  }
  
  return NextResponse.next();
}

export const config = {
  matcher: '/api/outbound/:path*',
};

Using a Custom Link Component

// components/CustomLink.jsx
import { useRouter } from 'next/router';
import Link from 'next/link';

export default function CustomLink({ href, children, ...props }) {
  const router = useRouter();
  const isExternal = href && (href.startsWith('http') || href.startsWith('//'));

  const handleClick = (e) => {
    if (isExternal) {
      e.preventDefault();
      
      // Do something with outbound links
      console.log('Outbound link clicked:', href);
      
      // Example actions:
      // 1. Track analytics
      // 2. Show a confirmation dialog
      // 3. Add a delay
      
      // Then navigate to the external URL
      window.open(href, '_blank');
    }
  };

  if (isExternal) {
    return (
      <a href={href} onClick={handleClick} {...props}>
        {children}
      </a>
    );
  }

  return (
    <Link href={href} {...props}>
      {children}
    </Link>
  );
}

Using a Hook and Effect

// hooks/useOutboundLinkTracking.js
import { useEffect } from 'react';

export default function useOutboundLinkTracking() {
  useEffect(() => {
    const handleLinkClick = (e) => {
      const link = e.target.closest('a');
      if (!link) return;
      
      const href = link.getAttribute('href');
      if (href && (href.startsWith('http') || href.startsWith('//'))) {
        // This is an external link
        e.preventDefault();
        
        // Do something with the outbound link
        console.log('Outbound link clicked:', href);
        
        // Then navigate
        setTimeout(() => {
          window.open(href, link.target || '_blank');
        }, 100);
      }
    };

    document.addEventListener('click', handleLinkClick);
    return () => document.removeEventListener('click', handleLinkClick);
  }, []);
}