{"id":48693,"library":"next-fetch-devtools","title":"next-fetch-devtools","description":"In-browser network devtools for Next.js apps that capture server-side and client-side fetch & axios requests. Version 0.9.0, actively maintained with peer deps next >=13 and react >=18. Key differentiator: it works with server components, unlike regular browser devtools. Ships TypeScript types.","status":"active","version":"0.9.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","next","nextjs","devtools","fetch","axios","network","server-components","typescript"],"install":[{"cmd":"npm install next-fetch-devtools","lang":"bash","label":"npm"},{"cmd":"yarn add next-fetch-devtools","lang":"bash","label":"yarn"},{"cmd":"pnpm add next-fetch-devtools","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency >=13 required for App Router features","package":"next","optional":false},{"reason":"peer dependency >=18 required for hooks and components","package":"react","optional":false}],"imports":[{"note":"Server-side function; import from the /server subpath. Not available in client bundle.","wrong":"import { installFetchLogger } from 'next-fetch-devtools'; or const { installFetchLogger } = require('next-fetch-devtools/server')","symbol":"installFetchLogger","correct":"import { installFetchLogger } from 'next-fetch-devtools/server'"},{"note":"Client component; import from the /client subpath. Only render in development.","wrong":"import { DevtoolsPanel } from 'next-fetch-devtools'; or const DevtoolsPanel = require('next-fetch-devtools/client')","symbol":"DevtoolsPanel","correct":"import { DevtoolsPanel } from 'next-fetch-devtools/client'"},{"note":"Server-side route handler; import from the /server subpath.","wrong":"import { createDevtoolsRoute } from 'next-fetch-devtools'; or require('next-fetch-devtools/server')","symbol":"createDevtoolsRoute","correct":"import { createDevtoolsRoute } from 'next-fetch-devtools/server'"},{"note":"Named export from /server subpath.","wrong":"import attachAxiosLogger from 'next-fetch-devtools/server'; or require('next-fetch-devtools')","symbol":"attachAxiosLogger","correct":"import { attachAxiosLogger } from 'next-fetch-devtools/server'"}],"quickstart":{"code":"// 1. Create lib/devtools-setup.ts:\nimport { installFetchLogger } from 'next-fetch-devtools/server';\ninstallFetchLogger({ enabled: process.env.NODE_ENV === 'development' });\n\n// 2. Import it in app/layout.tsx (at top):\nimport 'lib/devtools-setup';\n\n// 3. Create app/api/__devtools/fetches/route.ts:\nimport { createDevtoolsRoute } from 'next-fetch-devtools/server';\nconst handlers = createDevtoolsRoute();\nexport const GET = handlers.GET;\nexport const DELETE = handlers.DELETE;\nexport const dynamic = 'force-dynamic';\n\n// 4. Add panel in layout:\nimport { DevtoolsPanel } from 'next-fetch-devtools/client';\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n {children}\n {process.env.NODE_ENV === 'development' && }\n \n \n );\n}","lang":"typescript","description":"Setup steps: install server logger, create API route, and render client panel."},"warnings":[{"fix":"Update imports to use 'next-fetch-devtools/server' or 'next-fetch-devtools/client'.","message":"Removed root-level exports in v0.9 — imports must now use /server or /client subpaths.","severity":"breaking","affected_versions":">=0.9.0"},{"fix":"Use import statements. If needed, use dynamic import() instead of require.","message":"Using require() will not work; package is ESM-only.","severity":"deprecated","affected_versions":">=0.9.0"},{"fix":"Export dynamic = 'force-dynamic' from the route file.","message":"Must force-dynamic for the devtools API route to avoid caching.","severity":"gotcha","affected_versions":">=0.8.0"},{"fix":"Wrap component with process.env.NODE_ENV === 'development' check.","message":"DevtoolsPanel should only be rendered in development; otherwise it exposes logs in production.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure the import is in a server component or server-side module.","message":"installFetchLogger must be called once in a server-only context (e.g., layout.tsx import). Calling it in a client component will throw.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.9.0':26 '13':33 '18':36 'activ':27 'app':12 'axio':23,56 'browser':7,46 'captur':14 'client':20 'client-sid':19 'compon':43,60 'dep':31 'devtool':4,9,47,54 'differenti':38 'fetch':3,22,55 'in-brows':5 'javascript':51 'key':37 'maintain':28 'network':8,57 'next':2,32,52 'next-fetch-devtool':1 'next.js':11 'nextj':53 'peer':30 'react':35 'regular':45 'request':24 'server':16,42,59 'server-compon':58 'server-sid':15 'ship':48 'side':17,21 'type':50 'typescript':49,61 'unlik':44 'version':25 'work':40","created_at":"2026-06-07T16:57:57.758833+00:00","updated_at":"2026-06-07T16:57:57.758833+00:00","problems":[{"fix":"Use 'next-fetch-devtools/server' or 'next-fetch-devtools/client'.","cause":"Missing subpath import; root-level exports removed.","error":"Cannot find module 'next-fetch-devtools' or its corresponding type declarations."},{"fix":"Ensure you use `import { installFetchLogger } from 'next-fetch-devtools/server'`.","cause":"Incorrect import path or ESM/CJS mismatch.","error":"Unhandled Runtime Error: TypeError: installFetchLogger is not a function"},{"fix":"Export `export const dynamic = 'force-dynamic'` from the route file.","cause":"Route is not marked as dynamic and gets cached.","error":"Error: Dynamic server usage: Route /api/__devtools/fetches is being built and tested."},{"fix":"Import DevtoolsPanel from 'next-fetch-devtools/client' and use it in a client component.","cause":"DevtoolsPanel used in a server component or without 'use client'.","error":"Error: Cannot read properties of undefined (reading 'useState')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"next-fetch-devtools","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-07","next_check":"2026-09-05","install_tag":null}}