nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13
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.
- package/README.md +283 -282
- package/dist/cli_manifests/blocks_manifest.json +198 -175
- package/dist/kits/blocks/.nextworks/docs/BLOCKS_QUICKSTART.md +101 -100
- package/dist/kits/blocks/.nextworks/docs/BLOCKS_README.md +105 -104
- package/dist/kits/blocks/.nextworks/docs/THEME_GUIDE.md +1 -1
- package/dist/kits/blocks/app/templates/aiworkflow/PresetThemeVars.tsx +58 -0
- package/dist/kits/blocks/app/templates/aiworkflow/README.md +46 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/CTA.tsx +44 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/Contact.tsx +105 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/FAQ.tsx +63 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/Features.tsx +65 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/Footer.tsx +109 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/Hero.tsx +636 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/Navbar.tsx +90 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/Pricing.tsx +86 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/ProcessTimeline.tsx +103 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/Testimonials.tsx +56 -0
- package/dist/kits/blocks/app/templates/aiworkflow/components/TrustBadges.tsx +59 -0
- package/dist/kits/blocks/app/templates/aiworkflow/page.tsx +43 -0
- package/dist/kits/blocks/app/templates/digitalagency/PresetThemeVars.tsx +80 -80
- package/dist/kits/blocks/app/templates/digitalagency/README.md +42 -42
- package/dist/kits/blocks/app/templates/digitalagency/components/Pricing.tsx +114 -114
- package/dist/kits/blocks/app/templates/digitalagency/components/Process.tsx +59 -59
- package/dist/kits/blocks/app/templates/digitalagency/components/Services.tsx +55 -55
- package/dist/kits/blocks/app/templates/digitalagency/components/Team.tsx +28 -28
- package/dist/kits/blocks/app/templates/digitalagency/components/Testimonials.tsx +65 -65
- package/dist/kits/blocks/app/templates/digitalagency/page.tsx +38 -38
- package/dist/kits/blocks/app/templates/gallery/PresetThemeVars.tsx +84 -84
- package/dist/kits/blocks/app/templates/productlaunch/PresetThemeVars.tsx +75 -75
- package/dist/kits/blocks/app/templates/productlaunch/README.md +62 -62
- package/dist/kits/blocks/app/templates/productlaunch/components/About.tsx +84 -84
- package/dist/kits/blocks/app/templates/productlaunch/components/CTA.tsx +50 -50
- package/dist/kits/blocks/app/templates/productlaunch/components/Contact.tsx +231 -231
- package/dist/kits/blocks/app/templates/productlaunch/components/FAQ.tsx +86 -86
- package/dist/kits/blocks/app/templates/productlaunch/components/Features.tsx +83 -83
- package/dist/kits/blocks/app/templates/productlaunch/components/Footer.tsx +132 -132
- package/dist/kits/blocks/app/templates/productlaunch/components/Hero.tsx +88 -88
- package/dist/kits/blocks/app/templates/productlaunch/components/Navbar.tsx +116 -116
- package/dist/kits/blocks/app/templates/productlaunch/components/Pricing.tsx +106 -106
- package/dist/kits/blocks/app/templates/productlaunch/components/ProcessTimeline.tsx +110 -110
- package/dist/kits/blocks/app/templates/productlaunch/components/ServicesGrid.tsx +68 -68
- package/dist/kits/blocks/app/templates/productlaunch/components/Team.tsx +104 -104
- package/dist/kits/blocks/app/templates/productlaunch/components/Testimonials.tsx +90 -90
- package/dist/kits/blocks/app/templates/productlaunch/components/TrustBadges.tsx +76 -76
- package/dist/kits/blocks/app/templates/productlaunch/page.tsx +43 -43
- package/dist/kits/blocks/app/templates/saasdashboard/PresetThemeVars.tsx +80 -80
- package/dist/kits/blocks/app/templates/saasdashboard/README.md +44 -44
- package/dist/kits/blocks/app/templates/saasdashboard/components/Contact.tsx +129 -129
- package/dist/kits/blocks/app/templates/saasdashboard/components/Dashboard.tsx +293 -293
- package/dist/kits/blocks/app/templates/saasdashboard/components/FAQ.tsx +55 -55
- package/dist/kits/blocks/app/templates/saasdashboard/components/Features.tsx +90 -90
- package/dist/kits/blocks/app/templates/saasdashboard/components/Footer.tsx +77 -77
- package/dist/kits/blocks/app/templates/saasdashboard/components/Hero.tsx +104 -104
- package/dist/kits/blocks/app/templates/saasdashboard/components/Hero_mask.tsx +126 -126
- package/dist/kits/blocks/app/templates/saasdashboard/components/Navbar.tsx +117 -117
- package/dist/kits/blocks/app/templates/saasdashboard/components/Pricing.tsx +90 -90
- package/dist/kits/blocks/app/templates/saasdashboard/components/SmoothScroll.tsx +96 -96
- package/dist/kits/blocks/app/templates/saasdashboard/components/Testimonials.tsx +72 -72
- package/dist/kits/blocks/app/templates/saasdashboard/components/TrustBadges.tsx +53 -53
- package/dist/kits/blocks/app/templates/saasdashboard/page.tsx +39 -39
- package/dist/kits/blocks/components/enhanced-theme-provider.tsx +195 -195
- package/dist/kits/blocks/components/providers/BlocksAppProviders.tsx +27 -27
- package/dist/kits/blocks/components/sections/About.tsx +291 -291
- package/dist/kits/blocks/components/sections/CTA.tsx +257 -257
- package/dist/kits/blocks/components/sections/Contact.tsx +267 -267
- package/dist/kits/blocks/components/sections/FAQ.tsx +214 -214
- package/dist/kits/blocks/components/sections/Features.tsx +268 -268
- package/dist/kits/blocks/components/sections/Footer.tsx +302 -302
- package/dist/kits/blocks/components/sections/HeroMotion.tsx +308 -308
- package/dist/kits/blocks/components/sections/HeroOverlay.tsx +358 -358
- package/dist/kits/blocks/components/sections/HeroProductDemo.tsx +236 -0
- package/dist/kits/blocks/components/sections/HeroSplit.tsx +352 -352
- package/dist/kits/blocks/components/sections/Navbar.tsx +350 -350
- package/dist/kits/blocks/components/sections/PortfolioSimple.tsx +549 -549
- package/dist/kits/blocks/components/sections/Pricing.tsx +264 -264
- package/dist/kits/blocks/components/sections/ProcessTimeline.tsx +325 -325
- package/dist/kits/blocks/components/sections/ServicesGrid.tsx +210 -210
- package/dist/kits/blocks/components/sections/Team.tsx +309 -309
- package/dist/kits/blocks/components/sections/Testimonials.tsx +158 -158
- package/dist/kits/blocks/components/sections/TrustBadges.tsx +162 -162
- package/dist/kits/blocks/components/sections/product-demo/ApprovalInboxPanel.tsx +125 -0
- package/dist/kits/blocks/components/sections/product-demo/DemoStage.tsx +397 -0
- package/dist/kits/blocks/components/sections/product-demo/DemoWindow.tsx +128 -0
- package/dist/kits/blocks/components/sections/product-demo/KnowledgePanel.tsx +127 -0
- package/dist/kits/blocks/components/sections/product-demo/RunConsolePanel.tsx +150 -0
- package/dist/kits/blocks/components/sections/product-demo/WorkflowStudioPanel.tsx +191 -0
- package/dist/kits/blocks/components/sections/product-demo/types.ts +193 -0
- package/dist/kits/blocks/components/theme-provider.tsx +1 -1
- package/dist/kits/blocks/components/ui/alert-dialog.tsx +134 -134
- package/dist/kits/blocks/components/ui/brand-node.tsx +121 -121
- package/dist/kits/blocks/components/ui/button.tsx +122 -122
- package/dist/kits/blocks/components/ui/card.tsx +95 -95
- package/dist/kits/blocks/components/ui/checkbox.tsx +30 -30
- package/dist/kits/blocks/components/ui/cta-button.tsx +125 -125
- package/dist/kits/blocks/components/ui/dropdown-menu.tsx +201 -201
- package/dist/kits/blocks/components/ui/feature-card.tsx +91 -91
- package/dist/kits/blocks/components/ui/input.tsx +27 -27
- package/dist/kits/blocks/components/ui/label.tsx +29 -29
- package/dist/kits/blocks/components/ui/pricing-card.tsx +120 -120
- package/dist/kits/blocks/components/ui/select.tsx +25 -25
- package/dist/kits/blocks/components/ui/skeleton.tsx +13 -13
- package/dist/kits/blocks/components/ui/table.tsx +98 -98
- package/dist/kits/blocks/components/ui/testimonial-card.tsx +108 -108
- package/dist/kits/blocks/components/ui/textarea.tsx +26 -26
- package/dist/kits/blocks/components/ui/theme-selector.tsx +243 -243
- package/dist/kits/blocks/components/ui/theme-toggle.tsx +74 -74
- package/dist/kits/blocks/components/ui/toaster.tsx +7 -7
- package/dist/kits/blocks/lib/themes.ts +400 -400
- package/dist/kits/blocks/lib/utils.ts +6 -6
- package/dist/kits/blocks/package-deps.json +3 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,282 +1,283 @@
|
|
|
1
|
-
# nextworks
|
|
2
|
-
|
|
3
|
-
## 90-second install demo (silent)
|
|
4
|
-
|
|
5
|
-
Fresh `create-next-app` + `npx nextworks add blocks --templates`, plus a quick browser tour of the gallery + templates:
|
|
6
|
-
|
|
7
|
-
[](https://www.youtube.com/watch?v=7YKmGFmFY5c)
|
|
8
|
-
|
|
9
|
-
Nextworks is a CLI that installs **modular Next.js building blocks** into your app:
|
|
10
|
-
|
|
11
|
-
- **Blocks** – UI sections, templates, and core UI primitives.
|
|
12
|
-
|
|
13
|
-
> **Status:** early‑access alpha. Expect rough edges and breaking changes between alpha releases.
|
|
14
|
-
>
|
|
15
|
-
> **Support matrix:**
|
|
16
|
-
>
|
|
17
|
-
> **CI-tested:**
|
|
18
|
-
>
|
|
19
|
-
> - OS: Windows, macOS, Linux
|
|
20
|
-
> - Node: 20.x and 22.x
|
|
21
|
-
> - Next.js (sandbox pin): 16.0.7 and 16.1.4 (via create-next-app in CI)
|
|
22
|
-
> - Router: App Router and Pages Router
|
|
23
|
-
> - Package managers: npm, pnpm, yarn
|
|
24
|
-
>
|
|
25
|
-
> Note: CI uses pinned Next.js versions for stability and security (see CVE-2025-66478 / RSC protocol advisory).
|
|
26
|
-
>
|
|
27
|
-
> In this alpha, the most reliable setup is:
|
|
28
|
-
>
|
|
29
|
-
> 1. Create a new Next.js project (App Router **or** Pages Router):
|
|
30
|
-
>
|
|
31
|
-
> ```bash
|
|
32
|
-
> npx create-next-app@latest
|
|
33
|
-
> ```
|
|
34
|
-
>
|
|
35
|
-
> 2. From your app root, install **Blocks**:
|
|
36
|
-
>
|
|
37
|
-
> ```bash
|
|
38
|
-
> npx nextworks@latest add blocks --templates
|
|
39
|
-
> ```
|
|
40
|
-
>
|
|
41
|
-
> pnpm / yarn equivalents:
|
|
42
|
-
>
|
|
43
|
-
> ```bash
|
|
44
|
-
> pnpm dlx nextworks@latest add blocks --templates
|
|
45
|
-
> yarn dlx nextworks@latest add blocks --templates
|
|
46
|
-
> ```
|
|
47
|
-
>
|
|
48
|
-
> Non-interactive / CI-friendly:
|
|
49
|
-
>
|
|
50
|
-
> ```bash
|
|
51
|
-
> npx nextworks@latest add blocks --templates --yes
|
|
52
|
-
> ```
|
|
53
|
-
>
|
|
54
|
-
> Force a specific package manager (overrides lockfile detection):
|
|
55
|
-
>
|
|
56
|
-
> ```bash
|
|
57
|
-
> npx nextworks@latest add blocks --templates --pm pnpm
|
|
58
|
-
> npx nextworks@latest add blocks --templates --pm yarn
|
|
59
|
-
> npx nextworks@latest add blocks --templates --pm npm
|
|
60
|
-
> ```
|
|
61
|
-
>
|
|
62
|
-
> 3. Optionally, adjust flags to install only what you want (UI-only, sections, templates).
|
|
63
|
-
|
|
64
|
-
---
|
|
65
|
-
|
|
66
|
-
## Known issues (alpha)
|
|
67
|
-
|
|
68
|
-
- **Existing files may be overwritten** if they collide with kit paths. Commit first.
|
|
69
|
-
- **Router entrypoint patching can conflict** with heavily customized `app/layout.tsx` or `pages/_app.tsx`.
|
|
70
|
-
- **Fonts/providers wiring:** Blocks configures fonts in your router entrypoint (not inside shared packages) for Turbopack compatibility. If you manually edit fonts/providers and see errors, re-run the Blocks install to re-apply the patch.
|
|
71
|
-
|
|
72
|
-
---
|
|
73
|
-
|
|
74
|
-
## Safety (read this first)
|
|
75
|
-
|
|
76
|
-
`nextworks` installs kits by copying files into your Next.js project. If a destination path already exists, kit installs may **overwrite** your files.
|
|
77
|
-
|
|
78
|
-
Before running installs, strongly consider:
|
|
79
|
-
|
|
80
|
-
- **Commit first**, then install:
|
|
81
|
-
- `git add -A && git commit -m "baseline"`
|
|
82
|
-
- Review changes after install:
|
|
83
|
-
- `git diff --name-status`
|
|
84
|
-
- To undo everything quickly:
|
|
85
|
-
- `git reset --hard`
|
|
86
|
-
- (optional) remove untracked files created by installs: `git clean -fd`
|
|
87
|
-
|
|
88
|
-
Kits may also:
|
|
89
|
-
|
|
90
|
-
- **merge dependencies** into `package.json`
|
|
91
|
-
- **edit your router entrypoint** (Blocks):
|
|
92
|
-
- App Router: `app/layout.tsx`
|
|
93
|
-
- Pages Router: `pages/_app.tsx` (and may create/update `pages/_document.tsx`)
|
|
94
|
-
- create/update `.nextworks/config.json`
|
|
95
|
-
|
|
96
|
-
For a transparent breakdown of what each kit writes/edits, see:
|
|
97
|
-
|
|
98
|
-
- https://github.com/jblh/nextworks-cli/blob/main/docs/FILE_CHANGES.md
|
|
99
|
-
|
|
100
|
-
---
|
|
101
|
-
|
|
102
|
-
## Feedback
|
|
103
|
-
|
|
104
|
-
Nextworks is early‑access alpha and I’m actively looking for feedback from early testers.
|
|
105
|
-
|
|
106
|
-
### Where to post feedback
|
|
107
|
-
|
|
108
|
-
- **Start here (installation + where to post feedback):** https://github.com/jblh/nextworks-cli/discussions/1
|
|
109
|
-
- **Alpha feedback thread (what broke / what’s missing):** https://github.com/jblh/nextworks-cli/discussions/2
|
|
110
|
-
|
|
111
|
-
If you’re reporting an install/runtime issue, please include OS, Node version, Next.js version, package manager, the exact command you ran, and the error output.
|
|
112
|
-
|
|
113
|
-
### Bug reports
|
|
114
|
-
|
|
115
|
-
For reproducible bugs / errors (especially install/runtime issues), please open a GitHub Issue using the templates in `.github/ISSUE_TEMPLATE/`.
|
|
116
|
-
|
|
117
|
-
### Private contact (optional)
|
|
118
|
-
|
|
119
|
-
If you need to share something privately (e.g. security-related), email: nextjsworks@gmail.com
|
|
120
|
-
|
|
121
|
-
---
|
|
122
|
-
|
|
123
|
-
## Install and run the CLI
|
|
124
|
-
|
|
125
|
-
From your Next.js app root, run the CLI with your preferred package manager:
|
|
126
|
-
|
|
127
|
-
```bash
|
|
128
|
-
npx nextworks@latest --help
|
|
129
|
-
pnpm dlx nextworks@latest --help
|
|
130
|
-
yarn dlx nextworks@latest --help
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
Example commands:
|
|
134
|
-
|
|
135
|
-
```bash
|
|
136
|
-
npx nextworks@latest add blocks --templates
|
|
137
|
-
pnpm dlx nextworks@latest add blocks --templates
|
|
138
|
-
yarn dlx nextworks@latest add blocks --templates
|
|
139
|
-
|
|
140
|
-
npx nextworks@latest add blocks --templates --yes # non-interactive / CI
|
|
141
|
-
|
|
142
|
-
# Force a specific package manager (overrides lockfile detection)
|
|
143
|
-
npx nextworks@latest add blocks --templates --pm pnpm
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
---
|
|
147
|
-
|
|
148
|
-
## Getting started in an existing Next.js app
|
|
149
|
-
|
|
150
|
-
Prerequisites:
|
|
151
|
-
|
|
152
|
-
- A Next.js project (App Router **or** Pages Router).
|
|
153
|
-
- TypeScript required.
|
|
154
|
-
- Tailwind CSS required (the Blocks kit and templates rely on Tailwind classes).
|
|
155
|
-
|
|
156
|
-
From your app root:
|
|
157
|
-
|
|
158
|
-
### 1) Install Blocks (UI kit)
|
|
159
|
-
|
|
160
|
-
Non-interactive / CI-friendly (auto-accept defaults where possible):
|
|
161
|
-
|
|
162
|
-
```bash
|
|
163
|
-
npx nextworks@latest add blocks --templates --yes
|
|
164
|
-
```
|
|
165
|
-
|
|
166
|
-
> **Turbopack / Next 16 note (fonts + AppProviders)**
|
|
167
|
-
>
|
|
168
|
-
> Shared packages intentionally avoid importing `next/font/*`.
|
|
169
|
-
> Fonts are configured directly in your app’s router entrypoint (the CLI patches this for you):
|
|
170
|
-
>
|
|
171
|
-
> - App Router: `app/layout.tsx`
|
|
172
|
-
> - Pages Router: `pages/_app.tsx`
|
|
173
|
-
> This avoids Turbopack dev issues related to internal Next font modules.
|
|
174
|
-
>
|
|
175
|
-
> If you ever see a font-related Turbopack error after upgrades or manual edits, re-run:
|
|
176
|
-
>
|
|
177
|
-
> ```bash
|
|
178
|
-
> npx nextworks@latest add blocks --templates
|
|
179
|
-
> ```
|
|
180
|
-
>
|
|
181
|
-
> to re-apply the patch, and ensure your router entrypoint contains a valid
|
|
182
|
-
> `import { ... } from "next/font/google";` plus the corresponding `const geistSans = ...` etc.
|
|
183
|
-
>
|
|
184
|
-
> - App Router: `app/layout.tsx`
|
|
185
|
-
> - Pages Router: `pages/_app.tsx`
|
|
186
|
-
|
|
187
|
-
```bash
|
|
188
|
-
npx nextworks@latest add blocks --templates
|
|
189
|
-
```
|
|
190
|
-
|
|
191
|
-
> Note: Older docs (and the demo video) may show `--sections --templates`. It still works, but `--sections` is no longer needed.
|
|
192
|
-
|
|
193
|
-
This copies:
|
|
194
|
-
|
|
195
|
-
- `components/ui/*` (core UI primitives)
|
|
196
|
-
- `components/sections/*` (reusable sections)
|
|
197
|
-
- Templates (router-native):
|
|
198
|
-
- App Router projects: `app/templates/<template>/**`
|
|
199
|
-
- Pages Router projects:
|
|
200
|
-
- route entry file: `pages/templates/<template>/index.tsx`
|
|
201
|
-
- supporting template files: `components/templates/<template>/**`
|
|
202
|
-
- Theme helpers and `app/globals.css` (if not already present)
|
|
203
|
-
|
|
204
|
-
After this step you should be able to start your dev server and visit:
|
|
205
|
-
|
|
206
|
-
- `/` (if wired as the home page), or
|
|
207
|
-
- `/templates/productlaunch`, `/templates/saasdashboard`, `/templates/digitalagency`
|
|
208
|
-
|
|
209
|
-
---
|
|
210
|
-
|
|
211
|
-
## Advanced Blocks installs
|
|
212
|
-
|
|
213
|
-
For a full UI kit including core primitives, sections, and templates, use:
|
|
214
|
-
|
|
215
|
-
```bash
|
|
216
|
-
npx nextworks@latest add blocks --templates
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
Non-interactive / CI-friendly:
|
|
220
|
-
|
|
221
|
-
```bash
|
|
222
|
-
npx nextworks@latest add blocks --templates --yes
|
|
223
|
-
```
|
|
224
|
-
|
|
225
|
-
If you want finer control:
|
|
226
|
-
|
|
227
|
-
- `npx nextworks@latest add blocks --ui-only` – install core UI primitives only (no sections/templates).
|
|
228
|
-
- `npx nextworks@latest add blocks --sections` – install core + sections only.
|
|
229
|
-
- `npx nextworks@latest add blocks --templates` – install core + sections + templates.
|
|
230
|
-
|
|
231
|
-
---
|
|
232
|
-
|
|
233
|
-
## Copy‑paste quickstart for your app README
|
|
234
|
-
|
|
235
|
-
You can add a short “Nextworks setup” section to your app README:
|
|
236
|
-
|
|
237
|
-
```md
|
|
238
|
-
### Nextworks setup (Blocks)
|
|
239
|
-
|
|
240
|
-
1. Install and run the CLI from your Next.js app root:
|
|
241
|
-
|
|
242
|
-
npx nextworks@latest add blocks --templates
|
|
243
|
-
|
|
244
|
-
# CI / non-interactive:
|
|
245
|
-
|
|
246
|
-
npx nextworks@latest add blocks --templates --yes
|
|
247
|
-
|
|
248
|
-
2. Start dev server:
|
|
249
|
-
|
|
250
|
-
npm run dev
|
|
251
|
-
|
|
252
|
-
3. Try these routes:
|
|
253
|
-
- `/templates/productlaunch`
|
|
254
|
-
- `/templates/saasdashboard`
|
|
255
|
-
- `/templates/digitalagency`
|
|
256
|
-
- `/templates/
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
-
|
|
261
|
-
|
|
262
|
-
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
1
|
+
# nextworks
|
|
2
|
+
|
|
3
|
+
## 90-second install demo (silent)
|
|
4
|
+
|
|
5
|
+
Fresh `create-next-app` + `npx nextworks add blocks --templates`, plus a quick browser tour of the gallery + templates:
|
|
6
|
+
|
|
7
|
+
[](https://www.youtube.com/watch?v=7YKmGFmFY5c)
|
|
8
|
+
|
|
9
|
+
Nextworks is a CLI that installs **modular Next.js building blocks** into your app:
|
|
10
|
+
|
|
11
|
+
- **Blocks** – UI sections, templates, and core UI primitives.
|
|
12
|
+
|
|
13
|
+
> **Status:** early‑access alpha. Expect rough edges and breaking changes between alpha releases.
|
|
14
|
+
>
|
|
15
|
+
> **Support matrix:**
|
|
16
|
+
>
|
|
17
|
+
> **CI-tested:**
|
|
18
|
+
>
|
|
19
|
+
> - OS: Windows, macOS, Linux
|
|
20
|
+
> - Node: 20.x and 22.x
|
|
21
|
+
> - Next.js (sandbox pin): 16.0.7 and 16.1.4 (via create-next-app in CI)
|
|
22
|
+
> - Router: App Router and Pages Router
|
|
23
|
+
> - Package managers: npm, pnpm, yarn
|
|
24
|
+
>
|
|
25
|
+
> Note: CI uses pinned Next.js versions for stability and security (see CVE-2025-66478 / RSC protocol advisory).
|
|
26
|
+
>
|
|
27
|
+
> In this alpha, the most reliable setup is:
|
|
28
|
+
>
|
|
29
|
+
> 1. Create a new Next.js project (App Router **or** Pages Router):
|
|
30
|
+
>
|
|
31
|
+
> ```bash
|
|
32
|
+
> npx create-next-app@latest
|
|
33
|
+
> ```
|
|
34
|
+
>
|
|
35
|
+
> 2. From your app root, install **Blocks**:
|
|
36
|
+
>
|
|
37
|
+
> ```bash
|
|
38
|
+
> npx nextworks@latest add blocks --templates
|
|
39
|
+
> ```
|
|
40
|
+
>
|
|
41
|
+
> pnpm / yarn equivalents:
|
|
42
|
+
>
|
|
43
|
+
> ```bash
|
|
44
|
+
> pnpm dlx nextworks@latest add blocks --templates
|
|
45
|
+
> yarn dlx nextworks@latest add blocks --templates
|
|
46
|
+
> ```
|
|
47
|
+
>
|
|
48
|
+
> Non-interactive / CI-friendly:
|
|
49
|
+
>
|
|
50
|
+
> ```bash
|
|
51
|
+
> npx nextworks@latest add blocks --templates --yes
|
|
52
|
+
> ```
|
|
53
|
+
>
|
|
54
|
+
> Force a specific package manager (overrides lockfile detection):
|
|
55
|
+
>
|
|
56
|
+
> ```bash
|
|
57
|
+
> npx nextworks@latest add blocks --templates --pm pnpm
|
|
58
|
+
> npx nextworks@latest add blocks --templates --pm yarn
|
|
59
|
+
> npx nextworks@latest add blocks --templates --pm npm
|
|
60
|
+
> ```
|
|
61
|
+
>
|
|
62
|
+
> 3. Optionally, adjust flags to install only what you want (UI-only, sections, templates).
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## Known issues (alpha)
|
|
67
|
+
|
|
68
|
+
- **Existing files may be overwritten** if they collide with kit paths. Commit first.
|
|
69
|
+
- **Router entrypoint patching can conflict** with heavily customized `app/layout.tsx` or `pages/_app.tsx`.
|
|
70
|
+
- **Fonts/providers wiring:** Blocks configures fonts in your router entrypoint (not inside shared packages) for Turbopack compatibility. If you manually edit fonts/providers and see errors, re-run the Blocks install to re-apply the patch.
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## Safety (read this first)
|
|
75
|
+
|
|
76
|
+
`nextworks` installs kits by copying files into your Next.js project. If a destination path already exists, kit installs may **overwrite** your files.
|
|
77
|
+
|
|
78
|
+
Before running installs, strongly consider:
|
|
79
|
+
|
|
80
|
+
- **Commit first**, then install:
|
|
81
|
+
- `git add -A && git commit -m "baseline"`
|
|
82
|
+
- Review changes after install:
|
|
83
|
+
- `git diff --name-status`
|
|
84
|
+
- To undo everything quickly:
|
|
85
|
+
- `git reset --hard`
|
|
86
|
+
- (optional) remove untracked files created by installs: `git clean -fd`
|
|
87
|
+
|
|
88
|
+
Kits may also:
|
|
89
|
+
|
|
90
|
+
- **merge dependencies** into `package.json`
|
|
91
|
+
- **edit your router entrypoint** (Blocks):
|
|
92
|
+
- App Router: `app/layout.tsx`
|
|
93
|
+
- Pages Router: `pages/_app.tsx` (and may create/update `pages/_document.tsx`)
|
|
94
|
+
- create/update `.nextworks/config.json`
|
|
95
|
+
|
|
96
|
+
For a transparent breakdown of what each kit writes/edits, see:
|
|
97
|
+
|
|
98
|
+
- https://github.com/jblh/nextworks-cli/blob/main/docs/FILE_CHANGES.md
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## Feedback
|
|
103
|
+
|
|
104
|
+
Nextworks is early‑access alpha and I’m actively looking for feedback from early testers.
|
|
105
|
+
|
|
106
|
+
### Where to post feedback
|
|
107
|
+
|
|
108
|
+
- **Start here (installation + where to post feedback):** https://github.com/jblh/nextworks-cli/discussions/1
|
|
109
|
+
- **Alpha feedback thread (what broke / what’s missing):** https://github.com/jblh/nextworks-cli/discussions/2
|
|
110
|
+
|
|
111
|
+
If you’re reporting an install/runtime issue, please include OS, Node version, Next.js version, package manager, the exact command you ran, and the error output.
|
|
112
|
+
|
|
113
|
+
### Bug reports
|
|
114
|
+
|
|
115
|
+
For reproducible bugs / errors (especially install/runtime issues), please open a GitHub Issue using the templates in `.github/ISSUE_TEMPLATE/`.
|
|
116
|
+
|
|
117
|
+
### Private contact (optional)
|
|
118
|
+
|
|
119
|
+
If you need to share something privately (e.g. security-related), email: nextjsworks@gmail.com
|
|
120
|
+
|
|
121
|
+
---
|
|
122
|
+
|
|
123
|
+
## Install and run the CLI
|
|
124
|
+
|
|
125
|
+
From your Next.js app root, run the CLI with your preferred package manager:
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
npx nextworks@latest --help
|
|
129
|
+
pnpm dlx nextworks@latest --help
|
|
130
|
+
yarn dlx nextworks@latest --help
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Example commands:
|
|
134
|
+
|
|
135
|
+
```bash
|
|
136
|
+
npx nextworks@latest add blocks --templates
|
|
137
|
+
pnpm dlx nextworks@latest add blocks --templates
|
|
138
|
+
yarn dlx nextworks@latest add blocks --templates
|
|
139
|
+
|
|
140
|
+
npx nextworks@latest add blocks --templates --yes # non-interactive / CI
|
|
141
|
+
|
|
142
|
+
# Force a specific package manager (overrides lockfile detection)
|
|
143
|
+
npx nextworks@latest add blocks --templates --pm pnpm
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
---
|
|
147
|
+
|
|
148
|
+
## Getting started in an existing Next.js app
|
|
149
|
+
|
|
150
|
+
Prerequisites:
|
|
151
|
+
|
|
152
|
+
- A Next.js project (App Router **or** Pages Router).
|
|
153
|
+
- TypeScript required.
|
|
154
|
+
- Tailwind CSS required (the Blocks kit and templates rely on Tailwind classes).
|
|
155
|
+
|
|
156
|
+
From your app root:
|
|
157
|
+
|
|
158
|
+
### 1) Install Blocks (UI kit)
|
|
159
|
+
|
|
160
|
+
Non-interactive / CI-friendly (auto-accept defaults where possible):
|
|
161
|
+
|
|
162
|
+
```bash
|
|
163
|
+
npx nextworks@latest add blocks --templates --yes
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
> **Turbopack / Next 16 note (fonts + AppProviders)**
|
|
167
|
+
>
|
|
168
|
+
> Shared packages intentionally avoid importing `next/font/*`.
|
|
169
|
+
> Fonts are configured directly in your app’s router entrypoint (the CLI patches this for you):
|
|
170
|
+
>
|
|
171
|
+
> - App Router: `app/layout.tsx`
|
|
172
|
+
> - Pages Router: `pages/_app.tsx`
|
|
173
|
+
> This avoids Turbopack dev issues related to internal Next font modules.
|
|
174
|
+
>
|
|
175
|
+
> If you ever see a font-related Turbopack error after upgrades or manual edits, re-run:
|
|
176
|
+
>
|
|
177
|
+
> ```bash
|
|
178
|
+
> npx nextworks@latest add blocks --templates
|
|
179
|
+
> ```
|
|
180
|
+
>
|
|
181
|
+
> to re-apply the patch, and ensure your router entrypoint contains a valid
|
|
182
|
+
> `import { ... } from "next/font/google";` plus the corresponding `const geistSans = ...` etc.
|
|
183
|
+
>
|
|
184
|
+
> - App Router: `app/layout.tsx`
|
|
185
|
+
> - Pages Router: `pages/_app.tsx`
|
|
186
|
+
|
|
187
|
+
```bash
|
|
188
|
+
npx nextworks@latest add blocks --templates
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
> Note: Older docs (and the demo video) may show `--sections --templates`. It still works, but `--sections` is no longer needed.
|
|
192
|
+
|
|
193
|
+
This copies:
|
|
194
|
+
|
|
195
|
+
- `components/ui/*` (core UI primitives)
|
|
196
|
+
- `components/sections/*` (reusable sections)
|
|
197
|
+
- Templates (router-native):
|
|
198
|
+
- App Router projects: `app/templates/<template>/**`
|
|
199
|
+
- Pages Router projects:
|
|
200
|
+
- route entry file: `pages/templates/<template>/index.tsx`
|
|
201
|
+
- supporting template files: `components/templates/<template>/**`
|
|
202
|
+
- Theme helpers and `app/globals.css` (if not already present)
|
|
203
|
+
|
|
204
|
+
After this step you should be able to start your dev server and visit:
|
|
205
|
+
|
|
206
|
+
- `/` (if wired as the home page), or
|
|
207
|
+
- `/templates/productlaunch`, `/templates/saasdashboard`, `/templates/digitalagency`, `/templates/aiworkflow`
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
## Advanced Blocks installs
|
|
212
|
+
|
|
213
|
+
For a full UI kit including core primitives, sections, and templates, use:
|
|
214
|
+
|
|
215
|
+
```bash
|
|
216
|
+
npx nextworks@latest add blocks --templates
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
Non-interactive / CI-friendly:
|
|
220
|
+
|
|
221
|
+
```bash
|
|
222
|
+
npx nextworks@latest add blocks --templates --yes
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
If you want finer control:
|
|
226
|
+
|
|
227
|
+
- `npx nextworks@latest add blocks --ui-only` – install core UI primitives only (no sections/templates).
|
|
228
|
+
- `npx nextworks@latest add blocks --sections` – install core + sections only.
|
|
229
|
+
- `npx nextworks@latest add blocks --templates` – install core + sections + templates.
|
|
230
|
+
|
|
231
|
+
---
|
|
232
|
+
|
|
233
|
+
## Copy‑paste quickstart for your app README
|
|
234
|
+
|
|
235
|
+
You can add a short “Nextworks setup” section to your app README:
|
|
236
|
+
|
|
237
|
+
```md
|
|
238
|
+
### Nextworks setup (Blocks)
|
|
239
|
+
|
|
240
|
+
1. Install and run the CLI from your Next.js app root:
|
|
241
|
+
|
|
242
|
+
npx nextworks@latest add blocks --templates
|
|
243
|
+
|
|
244
|
+
# CI / non-interactive:
|
|
245
|
+
|
|
246
|
+
npx nextworks@latest add blocks --templates --yes
|
|
247
|
+
|
|
248
|
+
2. Start dev server:
|
|
249
|
+
|
|
250
|
+
npm run dev
|
|
251
|
+
|
|
252
|
+
3. Try these routes:
|
|
253
|
+
- `/templates/productlaunch`
|
|
254
|
+
- `/templates/saasdashboard`
|
|
255
|
+
- `/templates/digitalagency`
|
|
256
|
+
- `/templates/aiworkflow`
|
|
257
|
+
- `/templates/gallery`
|
|
258
|
+
|
|
259
|
+
Template files live at:
|
|
260
|
+
- App Router: `app/templates/<template>/**`
|
|
261
|
+
- Pages Router:
|
|
262
|
+
- route entry file: `pages/templates/<template>/index.tsx`
|
|
263
|
+
- supporting template files: `components/templates/<template>/**`
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
---
|
|
267
|
+
|
|
268
|
+
## License
|
|
269
|
+
|
|
270
|
+
The code in this CLI and the generated files is licensed under the MIT License (see `LICENSE`).
|
|
271
|
+
|
|
272
|
+
The placeholder images in the templates are sourced from Pexels and are
|
|
273
|
+
subject to the [Pexels License](https://www.pexels.com/license/).
|
|
274
|
+
They are included for demonstration purposes only and are **not** covered by
|
|
275
|
+
the MIT License.
|
|
276
|
+
|
|
277
|
+
---
|
|
278
|
+
|
|
279
|
+
## Troubleshooting
|
|
280
|
+
|
|
281
|
+
- **Type errors from imported components**
|
|
282
|
+
|
|
283
|
+
Confirm your project is using TypeScript and that your TypeScript config picks up the new `components/` and `lib/` paths.
|