Configuration

NextToolbar needs no configuration to work. This page lists what you can configure, in the component and in next.config.

Props

<NextToolbar theme="system" />

The package also exports the types NextToolbarProps and Theme.

next.config options

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  devIndicators: { position: 'top-right' },
  experimental: { requestInsights: true },
}
 
export default nextConfig

basePath and assetPrefix

Both work without extra configuration:

• The toolbar finds the dev server's socket the same way Next's own client does: from the path of Next's scripts (everything before /_next/). That covers basePath, and assetPrefix including a CDN URL.
• Next writes basePath into the toolbar's code at build time (process.env.__NEXT_ROUTER_BASEPATH), so it can match URLs that include it (/docs/blog/hello) with the paths Next reports without it (/blog/hello).

Persisted preferences

The toolbar stores two small preferences in the browser's localStorage, per origin:

Clear them to go back to the defaults. If localStorage is unavailable (private mode, blocked storage), the toolbar still works and simply doesn't remember.

Error boundary

Not a toolbar option, but worth repeating: add app/error.tsx so a render error doesn't take the root layout, and the toolbar, down with it. See Getting started.

Demo component

NextToolbarDemo renders the same toolbar from data you pass in, in any environment, production included. It's what powers the live demo; use it for documentation, screenshots or showcases, not in your app.

'use client'
import { NextToolbarDemo } from '@angelitolm/next-toolbar'
 
export default function Showcase() {
  return <NextToolbarDemo pathname="/blog/hello" params={{ slug: 'hello' }} status={200} timingMs={42} isStatic />
}

Production

There is nothing to switch off. The toolbar renders null whenever NODE_ENV isn't development.