5-Minute Quickstart
Follow this guided track to create a GN-Apex project node, configure your environment variables, mount the React Provider, and query live edge content.
“Install the SDK, add your public key, and your frontend is instantly equipped with CMS, Auth, and Analytics.”
Register an account on gnapex.com, verify your email with the 6-digit OTP, and create your workspace. Choose your operational mode (General, Education, Non-Profit, or E-Commerce).
In your project dashboard, navigate to Settings → API Keys. Copy your Project ID and Public API Key (nx_pk_...) into your local .env.local file:
| 1 | # Your unique Project Node ID |
| 2 | NEXT_PUBLIC_NEXUS_ID="prj_clx1a2b3c4d5e6f7g8h9" |
| 3 | |
| 4 | # Your Public API Key (Safe for client browsers) |
| 5 | NEXT_PUBLIC_NEXUS_KEY="nx_pk_live_8f3a9e2b1c4d5e6f7a8b9c0d" |
| 6 | |
| 7 | # The GN-Apex API Endpoint |
| 8 | NEXT_PUBLIC_NEXUS_API_URL="https://gnapex.com" |
Install the official package and Lucide icons into your Next.js or React application:
| 1 | npm install @nexushub/client lucide-react |
Wrap your root layout with NexusProvider to activate automatic route tracking, RUM Web Vitals, and real-time live events:
| 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 | } |
Fetch CMS pages with automatic ISR tag injection and render rich components:
| 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/overview/quickstart"); |
| 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 | } |