Remove the NextJS dev indicator

dev-indicator-remover.tsx

'use client';

import { useEffect } from 'react';

function removeNextJsDevIndicator(node: Node | ShadowRoot) {
  if (!node) return;

  // Try to remove the toast
  const toast = (node as ShadowRoot | Document).querySelector?.('.nextjs-toast');
  if (toast) {
    toast.remove();
    console.log('💣 Removed Next.js dev indicator');
    return true;
  }

  // Recurse through shadow roots
  const treeWalker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
  let currentNode = treeWalker.currentNode as HTMLElement;

  while (currentNode) {
    const maybeShadowHost = currentNode as HTMLElement;
    if (maybeShadowHost.shadowRoot) {
      if (removeNextJsDevIndicator(maybeShadowHost.shadowRoot)) return true;
    }
    currentNode = treeWalker.nextNode() as HTMLElement;
  }

  return false;
}

export default function DevIndicatorRemover() {
  useEffect(() => {
    const interval = setInterval(() => {
      const removed = removeNextJsDevIndicator(document);
      if (removed) clearInterval(interval);
    }, 10);

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

  return null;
}