A toolbar that helps to identify data cache entries
next-cache-toolbar requires to use app router
Create file that we will lazy loading later to avoid bundling next-cache-toolbar in production
// app/toolbar.jsx
import { NextCacheToolbar } from "next-cache-toolbar";
import "next-cache-toolbar/style.css";
export default function Toolbar() {
return <NextCacheToolbar />;
}// app/layout.jsx
let Toolbar: React.ComponentType = () => null;
if (process.env.NODE_ENV === "development") {
Toolbar = dynamic(() => import("./toolbar"));
}
export default function Layout({ children }) {
return (
<html>
<head/>
<body>
{children}
<Toolbar />
</body>
</html>
);
}