nextjs-asset-manager 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +134 -0
  2. package/package.json +2 -2
package/README.md ADDED
@@ -0,0 +1,134 @@
1
+ # nextjs-asset-manager
2
+
3
+ Official [Next.js](https://nextjs.org) integration for [vite-plugin-asset-manager](https://github.com/ejirocodes/vite-plugin-asset-manager) — a visual asset management dashboard that discovers, catalogs, and displays all your project's media assets.
4
+
5
+ ## Features
6
+
7
+ - **Dev-only** — returns 404 in production, zero production footprint
8
+ - **Automatic floating icon** — injected via client component
9
+ - **App Router native** — uses Next.js catch-all route handlers
10
+ - **HMR stable** — `globalThis` singleton pattern survives hot module replacement
11
+ - **Composable config** — `withAssetManager()` works alongside `withSentryConfig`, `withBundleAnalyzer`, etc.
12
+ - **Real-time updates** — file changes reflected instantly via SSE
13
+ - **Thumbnail generation** — Sharp-powered thumbnails with caching
14
+ - **Import tracking** — see which files import each asset with click-to-open-in-editor
15
+ - **Duplicate detection** — find duplicate files by content hash
16
+
17
+ ## Installation
18
+
19
+ ```bash
20
+ npm install nextjs-asset-manager -D
21
+ # or
22
+ pnpm add nextjs-asset-manager -D
23
+ # or
24
+ yarn add nextjs-asset-manager -D
25
+ ```
26
+
27
+ ## Setup
28
+
29
+ ### 1. Wrap your Next.js config
30
+
31
+ This suppresses asset manager request logging in the dev server:
32
+
33
+ ```ts
34
+ // next.config.ts
35
+ import type { NextConfig } from 'next'
36
+ import { withAssetManager } from 'nextjs-asset-manager'
37
+
38
+ const nextConfig: NextConfig = {}
39
+ export default withAssetManager(nextConfig)
40
+ ```
41
+
42
+ ### 2. Create the API route handler
43
+
44
+ ```ts
45
+ // app/api/asset-manager/[[...path]]/route.ts
46
+ import { createHandler } from 'nextjs-asset-manager'
47
+
48
+ const { GET, POST } = createHandler()
49
+ export { GET, POST }
50
+ ```
51
+
52
+ ### 3. Add the client component
53
+
54
+ ```tsx
55
+ // app/layout.tsx
56
+ import { AssetManagerScript } from 'nextjs-asset-manager'
57
+
58
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
59
+ return (
60
+ <html lang="en">
61
+ <body>
62
+ {children}
63
+ <AssetManagerScript />
64
+ </body>
65
+ </html>
66
+ )
67
+ }
68
+ ```
69
+
70
+ Start your dev server and:
71
+
72
+ - Press **`Option+Shift+A`** to toggle the floating panel
73
+ - Click the floating icon button (drag to reposition)
74
+ - Visit `/api/asset-manager/` directly in your browser
75
+
76
+ ## Configuration
77
+
78
+ Pass options to `createHandler()`:
79
+
80
+ ```ts
81
+ import { createHandler } from 'nextjs-asset-manager'
82
+
83
+ const { GET, POST } = createHandler({
84
+ // Dashboard URL path (must match your route file location)
85
+ base: '/api/asset-manager',
86
+
87
+ // Directories to scan
88
+ include: ['app', 'public', 'src'],
89
+
90
+ // Directories to exclude
91
+ exclude: ['node_modules', '.git', '.next', 'dist'],
92
+
93
+ // Editor for click-to-open: 'code', 'cursor', 'webstorm', 'vim', etc.
94
+ launchEditor: 'code',
95
+
96
+ // Path aliases for import detection
97
+ aliases: { '@/': 'src/' },
98
+
99
+ // Enable debug logging
100
+ debug: false,
101
+ })
102
+
103
+ export { GET, POST }
104
+ ```
105
+
106
+ Configure the floating icon position:
107
+
108
+ ```tsx
109
+ <AssetManagerScript base="/api/asset-manager" />
110
+ ```
111
+
112
+ ## How It Works
113
+
114
+ - **`createHandler()`** — Returns `{ GET, POST }` route handlers that initialize the asset manager, serve the dashboard UI, and handle all API requests through a catch-all route
115
+ - **`withAssetManager()`** — Wraps your Next.js config to suppress noisy dev server request logs from the asset manager
116
+ - **`AssetManagerScript`** — A `'use client'` component that injects the floating icon script in development
117
+
118
+ The asset manager uses a `globalThis` singleton (similar to Prisma's pattern) to survive Next.js HMR re-evaluation without losing state.
119
+
120
+ ## Requirements
121
+
122
+ - Next.js >= 14.0.0
123
+ - React >= 18.0.0
124
+ - Node.js >= 22
125
+
126
+ ## Related
127
+
128
+ - [`vite-plugin-asset-manager`](https://www.npmjs.com/package/vite-plugin-asset-manager) — Main Vite plugin
129
+ - [`@vite-asset-manager/nuxt`](https://www.npmjs.com/package/@vite-asset-manager/nuxt) — Official Nuxt module
130
+ - [`@vite-asset-manager/core`](https://www.npmjs.com/package/@vite-asset-manager/core) — Core package
131
+
132
+ ## License
133
+
134
+ [MIT](https://github.com/ejirocodes/vite-plugin-asset-manager/blob/main/LICENSE)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nextjs-asset-manager",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "type": "module",
5
5
  "description": "Next.js integration for asset management dashboard — browse, search, and manage all your project assets",
6
6
  "author": "Ejiro Asiuwhu <ejiroasiuwhu10@gmail.com>",
@@ -44,7 +44,7 @@
44
44
  "dist"
45
45
  ],
46
46
  "dependencies": {
47
- "@vite-asset-manager/core": "^1.0.4"
47
+ "@vite-asset-manager/core": "^1.0.5"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@types/node": "^25.2.3",