Files

Here you know more about the kiwi core files!

Default project structure

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

kiwi.config.js

Kiwi can be configured through a kiwi.config.js file in the root of your project directory.

This file is created when you run npx kiwi init but you can also create it manually (not recomended).

kiwi.config.js

/** @type {import('@kiwi-app/nextjs').KiwiConfig} */
const kiwiConfig = {
  useRootPage: true,
  sectionFileCase: 'kebab',
  manifestImportAlias: '@/',
};

module.exports = kiwiConfig;

Options
`useRootPage`	Choose if you want to kiwi manage also your index page ('/'). If `true` it will generate the `[[...kiwi]]` folder and also remove your root `page.tsx`file. Otherwise, generate the `[...kiwi]` folder
`sectionFileCase`	Choose between `kebab-case`, `snake_case` or `camelCase`. It will be use on manifest generation to identify your files and extract the props interface
`manifestImportAlias`	Choose the alias used by default in your project (or define one) to be used on manifest sections import

options.ts

import manifest from '@manifest';
import { KiwiOptions } from '@kiwi-app/nextjs';

const options: KiwiOptions = {
  manifest,
  externalManifests: [],
};

export default options;

Options
`manifest`	Your main manifest file
`externalManifests`	Optional external manifests to be merged with your main manifest ^{You can use this option to group your sections (main sections, company shared sections, ecommerce sections, etc) Will be displayed separatedly when using kiwi admin}

manifest.ts

Manifest is a autogenerated file that contains all your exported sections with module and schema to be used by kiwi admin while editing props.

YOU DON'T NEED TO WORRY ABOUT WRITING A MANIFEST FILE, GENERATE YOURS BY RUNNING npx kiwi manifest

manifest.ts

import type { KiwiManifest } from '@kiwi-app/nextjs';

import * as $0 from '@/sections/product-shelf';

const manifest: KiwiManifest = {
  sections: {
    '@/sections/product-shelf': {
      module: $0,
      schema: {
        component: {
          type: 'object',
          required: ['title'],
          properties: [{ name: 'title', type: 'string' }],
        },
        loader: {
          type: 'object',
          required: ['limit'],
          properties: [{ name: 'limit', type: 'number' }],
        },
      },
    },
  },
  site: 'my-kiwi-site',
};

export default manifest;


`module`	Exported module (the component properly), used by "kiwi catch-all" to render your section
`schema`	Generated schema based on props interface from exported modules
`component`	Schema from you section component
`loader`	Schema from you loader function