Next.js Code Generation

Prerequisites

• Node.js 18 or higher

Generated project structure

app/ layout.tsx page.tsx (auth)/ sign-in/page.tsx sign-up/page.tsx forgot-password/page.tsx reset-password/page.tsx [model]/ page.tsx ← list page [id]/ page.tsx ← detail page components/ AppNav.tsx ← navigation, built from your pages' nav settings lib/ nxf-client.ts ← typed wrapper around your Underpeaks public API validators.ts types/ index.ts ← TypeScript types from your models

Navigation

AppNav is generated from whichever pages have a nav type set in the console:

• Top-nav or bottom-nav pages render as a horizontal bar of links.
• Sidebar-nav or drawer-nav pages render as a collapsible side panel — persistent on desktop, an off-canvas toggle on mobile.

If your pages mix nav types, the sidebar/drawer style takes priority and top/bottom-nav pages are folded into it as regular links, rather than showing two separate nav structures at once.

Auth

Auth screens are generated as regular pages that call your project's own auth API (/api/auth/signin, /signup, /forgot-password, /reset-password) — there's no third-party auth library involved.

Running the generated app

npm install
npm run dev

Environment variables

Copy .env.example to .env.local and fill in:

# Hosted:      https://studio.underpeaks.com
# Self-hosted: your Core instance URL, e.g. https://api.yourapp.com
NXF_STUDIO_URL=https://studio.underpeaks.com

# Your project ID
NXF_PROJECT_ID=your-project-id

# Your Underpeaks API key (Settings → API Keys)
NXF_API_KEY=

# Public app URL, used for server-side fetch calls
NEXT_PUBLIC_APP_DOMAIN=http://localhost:3000

Customising generated code

Files are tagged generated or customizable (see Code Generation). Auth screens, model pages, and AppNav.tsx are customizable — edit them freely; the CLI detects your edits by checksum and won't overwrite them on the next run.

Regenerate with:

nxf generate nextjs