Integrar un proyecto existente de Next.js

FrameKit se puede añadir a una aplicación existente de Next.js con App Router sin reemplazar el resto del proyecto.

Requisitos

Node.js >=22.13.0.
pnpm >=11.14.0 cuando uses pnpm.
Next.js >=16 <17.
React y React DOM >=19 <20.

Integra FrameKit

Instala el paquete.
- pnpm
- npm
Ventana de terminal
pnpm add @mauriciodmo/framekit
Ventana de terminal
npm install @mauriciodmo/framekit
Envuelve la configuración de Next.js.
next.config.ts
```
import { withFrameKit } from '@mauriciodmo/framekit/next'

export default withFrameKit()
```
Pasa tus opciones existentes de Next.js a withFrameKit({...}) cuando sea necesario. FrameKit controla output: 'standalone', distDir: '.framekit/next' y la redirección temporal de / a /editor.

Añade el alias generado y los estilos de FrameKit.

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

@import "tailwindcss";
@import "@mauriciodmo/framekit/styles.css";

Conserva la importación de Tailwind solo cuando el proyecto use Tailwind.

Envuelve el layout raíz.

import { FrameKitStudioRoot } from '@mauriciodmo/framekit/studio/root'

import './globals.css'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <FrameKitStudioRoot>{children}</FrameKitStudioRoot>
}

El layout raíz debe seguir siendo un componente de servidor. No añadas otro <html>, <head> ni <body> alrededor de FrameKitStudioRoot.

Añade las rutas de FrameKit.

import { createStudioPage } from '@mauriciodmo/framekit/studio/root'
import { StudioClient } from '@framekit/generated/studio-client'

export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'

export default createStudioPage(StudioClient)

import { createLoginPage } from '@mauriciodmo/framekit/studio/root'

export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'

export default createLoginPage()

import { createFrameKitApiHandler } from '@mauriciodmo/framekit/server'
import { templates } from '@framekit/generated/templates'

export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'

const handler = createFrameKitApiHandler(templates)

export const GET = handler
export const POST = handler
export const PATCH = handler
export const DELETE = handler

import type { Metadata } from 'next'

import { createRenderPage } from '@mauriciodmo/framekit/server'
import { RenderClient } from '@framekit/generated/render-client'

export const runtime = 'nodejs'
export const dynamic = 'force-dynamic'
export const revalidate = 0
export const fetchCache = 'force-no-store'

export const metadata: Metadata = {
  robots: { index: false, follow: false },
}

export default createRenderPage(RenderClient)

Genera el registro e inicia el desarrollo.

pnpm
npm

pnpm framekit generate
pnpm framekit dev

npm exec -- framekit generate
npm exec -- framekit dev

FrameKit escribe src/generated/framekit/templates.ts, brands.ts, studio-client.tsx y render-client.tsx. Trátalos como salida generada.

Las rutas generadas admiten ambos modos de autenticación. Cuando FRAMEKIT_AUTH_ENABLED falta o es false, /editor y /brand se pueden usar sin sesión, /login redirige a /editor, y /settings y la API de acceso no están disponibles. Define FRAMEKIT_AUTH_ENABLED=true para activar usuarios, sesiones, tokens de API y rutas protegidas de Studio y acceso.

Antes de exponer la aplicación a una red no confiable, define explícitamente FRAMEKIT_AUTH_ENABLED=true. Consulta Configuración para conocer el contrato estricto del valor y del bootstrap.

Después crea tu primera plantilla y revisa la estructura del proyecto. Para el comportamiento de los comandos y los detalles de los archivos generados, usa las páginas de CLI y archivos generados de Referencia.