Next.js template

Scaffold, configure and maintain the Next.js starter.

On this page

Scaffold the Next.js starter with the CLI, configure it and keep it current. To build the same setup by hand, see Install in a Next.js app.

Quick startLink to this section

1. Configure registry accessLink to this section

Set up the .npmrc and GITHUB_TOKEN described in Registry access before installing.

2. Scaffold the projectLink to this section

Use the global CLI:

# pnpm dlx (no install).
pnpm dlx @systhemaui/cli@latest create my-app --template next

# Or install the CLI globally first.
pnpm add -g @systhemaui/cli
systhema create my-app --template next

See the CLI installation instructions for setup details.

Run one scaffold command, then enter its output directory:

cd my-app

3. Install dependenciesLink to this section

pnpm install

4. Copy design tokensLink to this section

Place exported token JSON files in src/tokens/ (or sync them from your design source). Tokens come out of the Figma plugin.

5. Sync tokens and typesLink to this section

pnpm systhema-core sync

The template refreshes the package token cache during pnpm install when generated artifacts already exist. If they do not, run pnpm systhema-core sync before the first type check.

Re-run this whenever tokens or configuration change.

6. Start buildingLink to this section

pnpm dev

You're ready to use Systhema components in your Next.js app.

Replacing the placeholder brandingLink to this section

Everything the visitor sees ships with Systhema's mark as a placeholder. It's there so a fresh scaffold is never iconless, and so you have a checklist of what a real project needs. Replace all of it with the project's own branding before launch:

File(s)	What it is
`src/app/icon.svg`	Tab icon, vector, swaps color with the visitor's light/dark theme
`src/app/favicon.ico`	Legacy fallback (16/32/48px) for browsers without SVG favicon support
`src/app/apple-icon.png`	iOS home-screen icon
`src/app/manifest.json`, `public/web-app-manifest-{192x192,512x512}.png`	Web app manifest and its `maskable` install icons

These only ship with systhema create, so once you've replaced them an upgrade never touches them.

To build the same project by hand and see what each piece does, follow Install in a Next.js app.

Ongoing maintenanceLink to this section

Re-run pnpm systhema-core sync after any design-system update.
Keep your GITHUB_TOKEN active. Package installs fail immediately if it expires.
Check in exported token inputs so every environment uses the same baseline.
Run systhema upgrade when new Systhema versions ship, see @systhemaui/cli.