Adding a Custom Analytics Hook

Create a custom React hook in Next.js 14 for useAnalytics to track events and page views, making analytics integration easier across components.
import { useRouter } from 'next/router';
import { useEffect } from 'react';

// Custom hook for analytics
export const useAnalytics = () => {
  const router = useRouter();

  // This function can be used to track custom events
  const trackEvent = (event) => {
    // Integrate with your analytics service
    console.log('Tracking event:', event);

  // This function can be used to track page views
  const trackPageView = (url) => {
    // Integrate with your analytics service
    console.log('Page view tracked:', url);

  // Effect to track page views on route change
  useEffect(() => {
    const handleRouteChange = (url) => {

    // Subscribe to route changes'routeChangeComplete', handleRouteChange);

    // Unsubscribe from events on cleanup
    return () => {'routeChangeComplete', handleRouteChange);
  }, []);

  return { trackEvent, trackPageView };
This code defines a custom React hook `useAnalytics` that provides two functions: `trackEvent` for tracking custom analytics events and `trackPageView` for tracking page views. The hook uses the `useEffect` to subscribe to Next.js router events and automatically track page views when the route changes. It includes cleanup logic to unsubscribe from the router events and avoid memory leaks. Integration with a specific analytics service should replace the `console.log` statements.