Registry / devops / next-fetch-devtools

next-fetch-devtools

library0.9.0jsnpmunverified

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.

devops

npm install next-fetch-devtools

package ↗

INSTALL

IMPORT

SIG · NEXT-FETCH-DEVTOOL

next-fetch-devtools

devopsjavascriptv0.9.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

installFetchLogger

✓ import { installFetchLogger } from 'next-fetch-devtools/server'

✗ import { installFetchLogger } from 'next-fetch-devtools'; or const { installFetchLogger } = require('next-fetch-devtools/server')

Server-side function; import from the /server subpath. Not available in client bundle.

DevtoolsPanel

✓ import { DevtoolsPanel } from 'next-fetch-devtools/client'

✗ import { DevtoolsPanel } from 'next-fetch-devtools'; or const DevtoolsPanel = require('next-fetch-devtools/client')

Client component; import from the /client subpath. Only render in development.

createDevtoolsRoute

✓ import { createDevtoolsRoute } from 'next-fetch-devtools/server'

✗ import { createDevtoolsRoute } from 'next-fetch-devtools'; or require('next-fetch-devtools/server')

Server-side route handler; import from the /server subpath.

attachAxiosLogger

✓ import { attachAxiosLogger } from 'next-fetch-devtools/server'

✗ import attachAxiosLogger from 'next-fetch-devtools/server'; or require('next-fetch-devtools')

Named export from /server subpath.

Setup steps: install server logger, create API route, and render client panel.

// 1. Create lib/devtools-setup.ts: import { installFetchLogger } from 'next-fetch-devtools/server'; installFetchLogger({ enabled: process.env.NODE_ENV === 'development' }); // 2. Import it in app/layout.tsx (at top): import 'lib/devtools-setup'; // 3. Create app/api/__devtools/fetches/route.ts: import { createDevtoolsRoute } from 'next-fetch-devtools/server'; const handlers = createDevtoolsRoute(); export const GET = handlers.GET; export const DELETE = handlers.DELETE; export const dynamic = 'force-dynamic'; // 4. Add panel in layout: import { DevtoolsPanel } from 'next-fetch-devtools/client'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html> <body> {children} {process.env.NODE_ENV === 'development' && <DevtoolsPanel apiBase={process.env.NEXT_PUBLIC_API_BASE_URL ?? ''} />} </body> </html> ); }

Debug

Known issues

breakingRemoved root-level exports in v0.9 — imports must now use /server or /client subpaths.

fix

Update imports to use 'next-fetch-devtools/server' or 'next-fetch-devtools/client'.

affects: >=0.9.0

deprecatedUsing require() will not work; package is ESM-only.

fix

Use import statements. If needed, use dynamic import() instead of require.

affects: >=0.9.0

gotchaMust force-dynamic for the devtools API route to avoid caching.

fix

Export dynamic = 'force-dynamic' from the route file.

affects: >=0.8.0

gotchaDevtoolsPanel should only be rendered in development; otherwise it exposes logs in production.

fix

Wrap component with process.env.NODE_ENV === 'development' check.

affects: >=0.1.0

gotchainstallFetchLogger must be called once in a server-only context (e.g., layout.tsx import). Calling it in a client component will throw.

fix

Ensure the import is in a server component or server-side module.

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module 'next-fetch-devtools' or its corresponding type declarations.

Missing subpath import; root-level exports removed.

fix

Use 'next-fetch-devtools/server' or 'next-fetch-devtools/client'.

Unhandled Runtime Error: TypeError: installFetchLogger is not a function

Incorrect import path or ESM/CJS mismatch.

fix

Ensure you use `import { installFetchLogger } from 'next-fetch-devtools/server'`.

Error: Dynamic server usage: Route /api/__devtools/fetches is being built and tested.

Route is not marked as dynamic and gets cached.

fix

Export `export const dynamic = 'force-dynamic'` from the route file.

Error: Cannot read properties of undefined (reading 'useState')

DevtoolsPanel used in a server component or without 'use client'.

fix

Import DevtoolsPanel from 'next-fetch-devtools/client' and use it in a client component.

Upgrade

Version history

0.9.0latest on npm

Audit

Dependencies

nextrequiredpeer dependency >=13 required for App Router features

reactrequiredpeer dependency >=18 required for hooks and components

Agent activity

4 hits · last 30 days

node

Resources

packagenext-fetch-devtools ↗