Next.js Discord

Discord Forum

Vercel Toolbar on Localhost

Answered
English Angora posted this in #help-forum
Open in Discord
English AngoraOP
I've been through https://vercel.com/docs/workflow-collaboration/vercel-toolbar/in-production-and-localhost/add-to-localhost
I installed the module, did the link, added the toolbar to my layout.tsx, added the withVercelToolbar to my next.config.mjs. but I still get the following error:

You are rendering the Vercel Toolbar in development, but the configuration is missing.
Make sure the plugin is added to the Next.js config and the project has been linked using `vercel link`.
For more details, visit https://vercel.com/docs/workflow-collaboration/vercel-toolbar/in-production-and-localhost/add-to-localhost


my next.config.mjs:
import { withPayload } from '@payloadcms/next/withPayload'
import { withVercelToolbar } from '@vercel/toolbar/plugins/next'

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Your Next.js config here
}

// export default withVercelToolbar(withPayload(nextConfig));
export default withPayload(withVercelToolbar(nextConfig));


This is a Payload 3.0 project, which means I'm using Next 15 and React 19 RC.

I don't understand why I'm getting the console warnings when running the dev server, and no toolbar.

The aim here is that I'm going to poke at feature flags with it, now that the flag can be any type, not just booleans.
Answered by English Angora
In step 2: Add the toolbar to your project, for the Next.js (app), with Typescript, the code presented is:
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = require('@vercel/toolbar/plugins/next')();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);


However, in my editor, if I do that, and look at the return value of withVercelToolbar, IT'S A FUNCTION. It works, and displays the toolbar, if it's changed to:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = require('@vercel/toolbar/plugins/next')();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig)();
View full answer

6 Replies

English AngoraOP
Huh. There's a problem in withVercelToolbar.
If I update my next.config.mjs as follows:
import { withPayload } from '@payloadcms/next/withPayload'
import { withVercelToolbar } from '@vercel/toolbar/plugins/next'

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Your Next.js config here
}

const withPay = withPayload(nextConfig);
const withTool = withVercelToolbar(withPay);


// export default withVercelToolbar(withPayload(nextConfig));
export default withTool // withPayload(withVercelToolbar(nextConfig));


I get an error on reload:
 ✓ Starting...
 ⚠ Invalid next.config.mjs options detected:
 ⚠     Expected object, received string
 ⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config
 ✓ Ready in 3.8s
If I do withVercelToolbar first, I don't recieve this error.
AHA.
English AngoraOP
In step 2: Add the toolbar to your project, for the Next.js (app), with Typescript, the code presented is:
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = require('@vercel/toolbar/plugins/next')();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig);


However, in my editor, if I do that, and look at the return value of withVercelToolbar, IT'S A FUNCTION. It works, and displays the toolbar, if it's changed to:

/** @type {import('next').NextConfig} */
const nextConfig = {
  // Config options here
};
 
const withVercelToolbar = require('@vercel/toolbar/plugins/next')();
// Instead of module.exports = nextConfig, do this:
module.exports = withVercelToolbar(nextConfig)();
Answer
English AngoraOP
This turns out to be wrong.

I'm getting issues with this still. I'm just removing the toolbar to avoid startup issues.