Project structure

create-framekit produces a Next.js App Router project. The important distinction is whether a path is maintained source, generated output, or persistent runtime data.

Canonical layout

• Directorymy-project/

  • Directorysrc/

    • Directoryapp/

      • [section]/[[...slug]]/page.tsx
      • api/framekit/[...action]/route.ts
      • framekit/render/[id]/page.tsx
      • globals.css
      • layout.tsx
      • login/page.tsx
    • profile.ts
    • Directorytemplates/

      • Directoryexample/

        • Directoryassets/

          • …
        • template.tsx
    • Directorygenerated/

      • Directoryframekit/

        • brands.ts
        • render-client.tsx
        • studio-client.tsx
        • templates.ts
  • Directorypublic/

    • Directoryframekit/

      • …
  • Directory.framekit/

    • …
  • Directory.framekit-data/

    • …
  • .env.example
  • Dockerfile
  • next.config.ts
  • package.json
  • pnpm-workspace.yaml
  • tsconfig.json

The creator removes pnpm-workspace.yaml when npm is selected.

Files you maintain

• src/templates/ contains discoverable templates.
• src/brand/ is optional and contains reusable brand components.
• src/profile.ts is optional public project information that templates may use.
• src/app/ connects the application shell, Studio, login, API, render route, and global styles.
• next.config.ts wraps Next.js with withFrameKit().
• .env.example documents runtime variables without storing secrets.

The generated template defines these aliases:

tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@framekit/generated/*": ["./src/generated/framekit/*"]
    }
  }
}

Use published package entrypoints such as @mauriciodmo/framekit, @mauriciodmo/framekit/server, and @mauriciodmo/framekit/studio/root. Do not import packages/framekit/src/** from consumer code.

Generated output

FrameKit can recreate these paths:

• src/generated/framekit/ — template registry and generated clients.
• public/framekit/ — copied template assets.
• .framekit/ — validation and Next.js build output.

Delete and regenerate those paths when necessary instead of editing them.

Caution

.framekit-data/ is different: when authentication is enabled, it contains the default SQLite database. Treat it as persistent runtime data and do not delete it as part of generated-output cleanup. Open mode does not initialize this database.

For the detailed file contract, use Generated files reference. Continue with Create your first template when you are ready to edit src/templates/.