While working with Next.js, I often need to keep my data fresh without using WebSockets. Instead of setting up polling logic every time, I made useIntervalRefresh, a small hook that triggers a page refresh at a set interval.

The Hook

import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export function useIntervalRefresh(interval: number = 5000): void {
    const router = useRouter();

    useEffect(() => {
        const id = setInterval(() => {
            router.refresh();
        }, interval);

        return () => clearInterval(id);
    }, [router, interval]);
}

How does it work?

• Uses setInterval to call *router.refresh() at a specified interval.
• Automatically cleans up the interval when the component unmounts.

This is useful for dashboards, admin panels, or any page where you want automatic updates without reloading the entire app.