Bir Next.js uygulamasına görsel sayfa editörü ekleyin

1Paketi yükleyin

Pagiera; editörü, çalışma zamanını ve sunucu işleyicilerini tek pakette sunar. Tam yığın entegrasyonu için Node.js 20+, React 18.3+ ve Next.js App Router gereklidir.

bun add pagiera

2Hizmetleri yapılandırın

PostgreSQL ve Redis bağlantıları içeren bir .env.local dosyası oluşturun. OpenRouter anahtarı yalnızca yapay zekâ ile üretim istiyorsanız gereklidir; diğer her şey bu anahtar olmadan çalışır.

PAGIERA_POSTGRES_URL=postgresql://postgres:postgres@localhost:5432/pagiera
PAGIERA_REDIS_URL=redis://localhost:6379
OPENROUTER_API_KEY=sk-or-v1-your-key
OPENROUTER_MODEL=anthropic/claude-sonnet-4.5

NotPagiera, sunucu ilk kez başlatıldığında ihtiyaç duyduğu PostgreSQL tablolarını oluşturur. Ayrı bir veritabanı geçiş adımı çalıştırmanız gerekmez.

3Arka ucu ekleyin

Tüm yolları yakalayan tek bir rota işleyicisi, editörün tüm uç noktalarını sunar. Döndürdüğü HTTP yöntemlerini dışa aktarın; geri kalan yönlendirmeyi Next.js yapar.

// src/app/api/pagiera/[...path]/route.ts
import {
  createPagieraRouteHandlers,
  pagieraConfigFromEnv,
} from "pagiera/server";

export const maxDuration = 120;
export const dynamic = "force-dynamic";

const handlers = createPagieraRouteHandlers(pagieraConfigFromEnv());
export const { GET, POST, PUT, PATCH, DELETE } = handlers;

Uygulamayı başlattıktan sonra /api/pagiera/health adresini açın. PostgreSQL, Redis ve yapılandırılmış OpenRouter modelinin erişilebilir olup olmadığını bildirir; böylece sessiz bir yapılandırma hatasını okunabilir bir yanıta dönüştürür.

4Editör verilerini sunucuda yükleyin

İlk belge sunucuda işlenir; böylece stüdyo bir yüklenme durumu yerine içerikle açılır.

// src/lib/editor-bootstrap.ts
import {
  getPagieraServer,
  pagieraConfigFromEnv,
} from "pagiera/server";

export async function editorBootstrap(pageId?: string) {
  const server = await getPagieraServer(pagieraConfigFromEnv());
  const bootstrap = await server.getEditorBootstrap(pageId);

  if (!bootstrap) throw new Error("Editor page not found");
  return bootstrap;
}

5Stüdyoyu kendi kimlik doğrulamanızın arkasına yerleştirin

Stüdyoyu yalnızca ekibinizin erişebildiği bir rotada işleyin. Pagiera bilinçli olarak bir kimlik doğrulama katmanı sunmaz; editör rotası ve API rotası, uygulamanızın zaten uyguladığı kuralları devralır.

• Hem editör sayfasını hem de /api/pagiera yolunu aynı denetimle koruyun.
• Editör stil dosyasını kendi CSS'inizden önce içe aktarın: @import kuralları diğer kurallardan önce gelmelidir.
• next/font ailelerinin Tipografi panelinde görünmesi için yazı tipi sağlayıcısını ekleyin.

Her hizmetin sorumluluğu

Sık sorulan sorular