Installation

@kiwi-app/nextjs

Install @kiwi-app/nextjs using your preferred package manager:

Terminal

npm install @kiwi-app/nextjs

If you run npx kiwi at your terminal, you will see the available commands:

Terminal

> usage: npx kiwi <command> (init|manifest|generate)

At this moment, we need to run the init command first:

Terminal

npx kiwi init

You'll see the following prompts:

Terminal

What is your site named? {default name from package.json}
Enable kiwi to manage your index page (/)? No / Yes
What case you will use to name your sections? (kebab, snake, cammel)
What is your default import alias? @/*

After the prompts, kiwi init will create/update the following files and structures:

Project

src
└── app
    └── (kiwi)
        ├── [[...kiwi]] or [...kiwi]
        |   ├── client.tsx
        |   ├── server.tsx
        |   └── page.tsx
        ├── api
        │   └── kiwi
        │       └── [...kiwi]
        |           └── route.ts
        └── options.ts

. manifest.ts
. kiwi.config.js
. tsconfig.json                        # Insert alias for manifest and options file

Routes
`(kiwi)`	Using Next.js group notation to isolate the kiwi config from your project
`[...kiwi]*`	Using Next.js catch-all page to receive all paths and validate (after your "non kiwi" pages) if has some configuration that matches and return the full page configured on kiwi admin ^{*this path is only created if you opt for no manage your index page through kiwi}
`[[...kiwi]]`	Using Next.js catch-all page to receive all paths (including your root page) and validate (after your "non kiwi" pages) if has some configuration that matches and return the full page configured on kiwi admin (default)

Files
`manifest.ts`	Kiwi manifest that contains all your sections definitions and schema, used by kiwi admin to render a form for your section
`kiwi.config.js`	Config file autogenerated after `npx kiwi init` prompts
`options.ts`	Options used by kiwi for managing manifests. By default only your local manifest is used, but you can use external kiwi manifests provided by plugins, libs, etc
`page.tsx`	Main server side catch-all page, get the sections for the current path and renders using suspense boudaries. If using live editor, render `client.tsx`, otherwise render `server.tsx`
`client.tsx`	Client side page that interacts with kiwi admin live editor ^{used only when using live editor}
`server.tsx`	Server side page used by default when the user access your released site
`route.ts`	Catch-all API route that handle integrations calls with kiwi admin