next-dev-pin
v0.1.62
Published
⚠️ **Deprecation Notice** The package **next-dev-pin** is no longer recommended. Please use [to-do-pin](https://www.npmjs.com/package/to-do-pin) instead for continued support and new features.
Readme
⚠️ Deprecation Notice
The package next-dev-pin is no longer recommended.
Please use to-do-pin instead for continued support and new features.
📌 next-dev-pin
A lightweight Next.js (App Router) development tool that lets you create and track in-app todo pins directly during development.
✨ Features
- Alt + Click anywhere on the screen to open a todo creation popup.
- Write down:
- Assignee (who is responsible)
- Issue description
- Todo list items
- Delete todos anytime with one click.
- Includes a page-aware issue tracker to see all todos grouped by route.
- ⚡ Zero cost in production — components are tree-shaken and removed from your deployed app.
📦 Installation
npm install next-dev-pin⚙️ Setup
1. Initialize once
Run in your project root:
npx next-dev-pin init2. Import styles
Add this to your globals.css or directly in layout.tsx:
import "next-dev-pin/dist/index.css";3. Wrap your app
Add the provider in layout.tsx:
import { DevPinProvider } from "next-dev-pin";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<DevPinProvider>{children}</DevPinProvider>
</body>
</html>
);
}📋 Usage
- During development, Alt + Click anywhere on the screen to create a todo pin.
- Add assignee, description, and list of todos.
- Check off or delete todos anytime.
- Use the floating Issue Tracker panel to view all todos grouped by page/route.
🚀 Production
next-dev-pin is only active when:
process.env.NEXT_PUBLIC_DEV_PIN_ENV === "development"In production, all components are tree-shaken and will not affect your bundle size.