@nodehive/nextjs

NodeHive integration for Next.js (App Router): auth, a Puck editing surface, a Drupal visual editor overlay, and a floating smart-actions toolbar, on top of the framework-neutral nodehive-js SDK.

ESM-only. Requires React 19 and Next 16 (App Router).

Installation

npm install @nodehive/nextjs

Required peers: react (^19), next (^16), nodehive-js. The editor peers (@puckeditor/core, @tiptap/core, @tiptap/pm, @tiptap/react, @tanstack/react-query, motion, sonner) are optional and only needed if you use the puck-editor, visual-editor or smart-actions modules.

Modules

Import only the documented subpaths below; anything else is internal and not part of the public API.

| Module | Imports | Purpose | | --- | --- | --- | | auth | @nodehive/nextjs/auth, /auth/server, /auth/react, /auth/routes, /auth/proxy | OAuth login (authorization code + PKCE), session, client factories | | puck-editor | @nodehive/nextjs/puck-editor, /puck-editor/server, /puck-editor/fields, /puck-editor/render, /puck-editor/smart-actions, /puck-editor/puck-theme.css | Puck editing surface | | visual-editor | @nodehive/nextjs/visual-editor, /visual-editor/server | Drupal-iframe overlays + bridge | | smart-actions | @nodehive/nextjs/smart-actions/server | Floating editor toolbar | | theme | @nodehive/nextjs/theme.css | Shared --nh-editor-* theming contract |

Styling

Import the compiled theme once (e.g. in your root layout):

import '@nodehive/nextjs/theme.css';

The Puck canvas additionally uses @nodehive/nextjs/puck-editor/puck-theme.css. Both are precompiled (no Tailwind setup needed on your side, no CSS reset).

Environment

The auth module reads all secrets from the runtime environment.

| Variable | Purpose | | --- | --- | | NEXT_PUBLIC_DRUPAL_BASE_URL | Drupal/NodeHive OAuth issuer base URL | | NEXT_PUBLIC_DRUPAL_REST_BASE_URL | JSON:API / REST base URL | | NEXT_PUBLIC_NODEHIVE_SPACE_NAME | NodeHive space identifier | | NODEHIVE_OAUTH_USER_CLIENT_ID | OAuth client id (authorization code + PKCE) | | NODEHIVE_OAUTH_USER_CLIENT_SECRET | OAuth client secret | | NODEHIVE_OAUTH_ANON_CLIENT_ID | Client credentials id (for anonymous fetches) | | NODEHIVE_OAUTH_ANON_CLIENT_SECRET | Client credentials secret | | NODEHIVE_HANDOFF_SECRET | AES-256-GCM key seed for the CHIPS editor handoff, e.g. openssl rand -base64 32 |

Keep every secret server-side. NEXT_PUBLIC_* values are exposed to the browser by Next; the non-prefixed ones must never be.

License

MIT © NETNODE AG