---
title: "Next.js template"
description: "Scaffold, configure and maintain the Next.js starter."
requested_language: hu
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/hu/next/getting-started/templates/nextjs
version: unreleased (main)
docs_index: https://docs.systhema.app/hu/next/llms.txt
---
> This page isn't translated yet. Showing English.


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](https://docs.systhema.app/hu/next/getting-started/installation/nextjs.md).

## Quick start

### 1. Configure registry access

Set up the `.npmrc` and `GITHUB_TOKEN` described in [Registry access](https://docs.systhema.app/hu/next/getting-started/registry-access.md) before installing.

### 2. Scaffold the project

Use the global CLI:

```bash
# 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](https://docs.systhema.app/hu/next/cli.md#installation) for setup details.

Run one scaffold command, then enter its output directory:

```bash
cd my-app
```

### 3. Install dependencies

```bash
pnpm install
```

### 4. Copy design tokens

Place exported token JSON files in `src/tokens/` (or sync them from your design source). Tokens come out of the [Figma plugin](https://docs.systhema.app/hu/next/design/figma.md).

### 5. Sync tokens and types

```bash
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 building

```bash
pnpm dev
```

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

## Replacing the placeholder branding

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](https://docs.systhema.app/hu/next/getting-started/installation/nextjs.md).

## Ongoing maintenance

- 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`](https://docs.systhema.app/hu/next/cli/upgrade.md).