PitchHut logo
nextworks-cli
CLI that adds a UI kit of components, landing page sections, and page templates to Next.js projects
Pitch

Nextworks is a CLI that speeds up building Next.js apps by installing a ready‑made “Blocks” kit into your project. It drops in core UI components plus common landing‑page sections (navbars, heroes, features, footers) and optional page templates, so you can scaffold real pages fast and spend less time repeating setup work.

Description

nextworks is a CLI for quickly scaffolding real UI in Next.js—without re-building the same primitives and marketing pages every time.

Instead of starting from a blank project, nextworks installs the Nextworks Blocks kit directly into your app: core UI primitives, ready-to-use landing page sections (navbars, heroes, feature grids, FAQs, footers, etc.), and full page templates you can browse, run, and customize. The goal is simple: ship faster in Next.js with less repetitive setup work.

What you get (Blocks kit)

When you run the Blocks install, nextworks copies modular building blocks into your project so they’re easy to edit and own:

  • Core UI primitives (installed to components/ui/**)
  • Reusable sections (installed to components/sections/**) — common “landing page” patterns like headers, CTAs, testimonials, pricing, and footers
  • Page templates (optional) — complete pages you can run immediately and adapt to your product

Templates are installed in a router-native location:

  • App Router: app/templates/<template>/** (with page.tsx)
  • Pages Router:
    • route entry: pages/templates/<template>/index.tsx
    • supporting files: components/templates/<template>/** (kept outside pages/ so helpers don’t become routes)

Quickstart

Create a new Next.js app, then install Blocks from your app root:

npx create-next-app@latest
cd <your-app>

# Nextworks assumes TypeScript + Tailwind CSS (required for Blocks/templates)
npx nextworks@latest add blocks --sections --templates

Then install deps (if needed) and start your dev server:

npm install
npm run dev

Want a quick “show me something working” route? After installing templates, try:

  • /templates/productlaunch
  • /templates/saasdashboard
  • /templates/digitalagency
  • /templates/gallery

Demo + links

Status: early-access alpha

nextworks is currently early-access alpha. Expect rough edges and occasional breaking changes between alpha releases.

Best for: experimenting in new or non-critical projects, and giving feedback.
Not recommended yet for: production apps that need strict stability guarantees.

Compatibility (alpha)

CI-tested:

  • OS: Windows, macOS, Linux
  • Node: 20.x and 22.x
  • Next.js (CI pin): 16.0.7 and 16.1.4
  • Router: App Router and Pages Router
  • Package managers: npm, pnpm, yarn

Dev mode: Turbopack (default in Next 16) and Webpack.

Install options (Blocks)

Full install (core UI + sections + templates):

npx nextworks@latest add blocks --sections --templates

Non-interactive / CI-friendly (auto-accept defaults where possible):

npx nextworks@latest add blocks --sections --templates --yes

pnpm / yarn equivalents:

pnpm dlx nextworks@latest add blocks --sections --templates
yarn dlx nextworks@latest add blocks --sections --templates

More granular installs:

  • --ui-only (core primitives only)
  • --sections (core + sections)
  • --templates (core + templates)
  • --sections --templates (core + sections + templates)

You can also force a package manager (overrides lockfile detection):

npx nextworks@latest add blocks --sections --templates --pm pnpm

Turbopack note (fonts + providers)

For Turbopack compatibility, Blocks configures fonts/providers in your router entrypoint (not inside shared packages). nextworks patches this automatically:

  • App Router: app/layout.tsx
  • Pages Router: pages/_app.tsx (and may create/update pages/_document.tsx)

If you later manually change fonts/providers and hit a font-related Turbopack error, re-run the install to re-apply the patch:

npx nextworks@latest add blocks --sections --templates

Safety (read this first)

nextworks installs kits by copying files into your Next.js project. If a destination path already exists, installs may overwrite files.

Recommended workflow:

  • Commit before installing:
    git add -A && git commit -m "baseline"
    
  • Review changes after install:
    git diff --name-status
    
  • Undo quickly if needed:
    git reset --hard
    git clean -fd   # optional: remove untracked files created by installs
    

If you’ve heavily customized these paths, expect manual merge work:

  • app/layout.tsx (App Router)
  • pages/_app.tsx / pages/_document.tsx (Pages Router)
  • lib/utils.ts
  • components/ui/**

For a transparent breakdown of what each kit writes/edits, see:
https://github.com/jblh/nextworks-cli/blob/main/docs/FILE_CHANGES.md

Feedback & issues

Alpha feedback is especially useful for:

  1. Install failures / environment incompatibilities (Next.js / Node / package manager)
  2. Runtime errors after running nextworks commands
  3. Confusing CLI output or missing docs

Where to post feedback:

Bug reports: open a GitHub Issue using .github/ISSUE_TEMPLATE/.

Private contact (optional): nextjsworks@gmail.com

License

The CLI and the generated files are MIT licensed (see LICENSE).
Template placeholder images are sourced from Pexels and are subject to the Pexels License (not covered by MIT).

0 comments

No comments yet.

Sign in to be the first to comment.