redev-nextjs
v0.1.0
Published
Next.js component that injects the Redev overlay in dev. Pairs with redev-cli for click-to-edit.
Maintainers
abhishekthapaReadme
redev-nextjs
Next.js companion for redev-cli — click any element in your running Next app, describe the change, ship it.
Install
npm install --save-dev redev-nextjsUse
In app/layout.tsx (App Router) or pages/_app.tsx (Pages Router):
import { RedevScript } from 'redev-nextjs';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<RedevScript />
</body>
</html>
);
}Then, in a separate terminal:
npx redev-cliOpen your normal dev URL (http://localhost:3000), press Cmd+Shift+E, and click any element.
What it does
- Renders
<script async src="http://localhost:5050/redev/overlay.js" />in development only. - Returns
nullin production, so it never ships to your users. - Server-Component safe (no hooks, no client bundle).
Options
<RedevScript port={5051} />Change port if redev-cli reports it picked a different port (e.g. 5050 was already in use).
License
MIT