Installation & Setup
The @nexushub/client package provides an all-in-one TypeScript toolbelt containing an edge CMS fetching engine, an automatic real-user monitoring (RUM) tracker, a WebPush PWA client, and full authentication contexts.
“Sub-millisecond local memory cache, automatic batching, zero external runtime bloat, and tree-shakeable UI renderers.”
Prerequisites
- Node.js: Version
18.0.0or higher (Node 20+ / 22+ recommended). - React Runtime: React 18.2+ or React 19.
- Framework: Next.js 13+ (App Router), Remix, Astro, Vite, or SvelteKit.
- Credentials: An active Project ID and Public API Key from your GN-Apex Dashboard.
1. Install the SDK
Install the core client along with lucide-react (required for the built-in UI renderers):
| 1 | npm install @nexushub/client lucide-react |
2. Configure Environment Keys
Create a .env.local file in your project root. The SDK automatically detects variables prefixed with NEXT_PUBLIC_ to configure the global singleton without manual code:
| 1 | # Project Node ID from your GN-Apex Dashboard |
| 2 | NEXT_PUBLIC_NEXUS_ID="prj_clx1a2b3c4d5e6f7g8h9" |
| 3 | |
| 4 | # Public Read-Only Key (Safe for client browsers) |
| 5 | NEXT_PUBLIC_NEXUS_KEY="nx_pk_live_8f3a9e2b1c4d5e6f7a8b9c0d" |
| 6 | |
| 7 | # The GN-Apex API Endpoint (Defaults to https://gnapex.com) |
| 8 | NEXT_PUBLIC_NEXUS_API_URL="https://gnapex.com" |
nx_sk_live_ in browser-facing code or client environment variables. Secret keys bypass all permission matrices and are strictly intended for server actions, CLI deployments, and background workers.3. Framework Setup
Choose your application architecture to mount the global provider:
Next.js App Router
Mount inside app/layout.tsx to activate automatic route analytics, Core Web Vitals RUM, and WebPush service worker sync.
React SPA / Vite
Mount inside main.tsx or App.tsx with manual projectId overrides for static single-page client applications.
| 1 | import { NexusProvider } from "@nexushub/client"; |
| 2 | import "./globals.css"; |
| 3 | |
| 4 | export default function RootLayout({ |
| 5 | children, |
| 6 | }: { |
| 7 | children: React.ReactNode; |
| 8 | }) { |
| 9 | return ( |
| 10 | <html lang="en"> |
| 11 | <body> |
| 12 | <NexusProvider autoPromptPush={true}> |
| 13 | {children} |
| 14 | </NexusProvider> |
| 15 | </body> |
| 16 | </html> |
| 17 | ); |
| 18 | } |
4. Verify Handshake
Test querying content inside any server or client component:
| 1 | import { nexus } from "@nexushub/client"; |
| 2 | import { NexusRichText, NexusImage } from "@nexushub/client/react"; |
| 3 | import { generateDocMetadata } from "@/lib/docs-metadata"; |
| 4 | |
| 5 | // Auto-generated SEO Metadata |
| 6 | export const metadata = generateDocMetadata("/docs/sdk/installation"); |
| 7 | |
| 8 | export default async function HomePage() { |
| 9 | // Query singleton page with automatic Next.js ISR tag caching |
| 10 | const page = await nexus.getPage("home"); |
| 11 | |
| 12 | return ( |
| 13 | <main className="max-w-4xl mx-auto py-12 px-4"> |
| 14 | <h1 className="text-4xl font-extrabold tracking-tight">{page.hero_title}</h1> |
| 15 | <NexusImage |
| 16 | value={page.hero_image} |
| 17 | className="w-full h-80 my-6 rounded-2xl object-cover shadow-xl" |
| 18 | /> |
| 19 | <NexusRichText value={page.body_content} /> |
| 20 | </main> |
| 21 | ); |
| 22 | } |