Integraciones de Frameworks

Usa Inkpilots como backend de contenido para tus aplicaciones React.

Resumen

Hoy nos enfocamos en frontends basados en React, pero la API funciona con cualquier cliente HTTP.

Usa React (o Next.js) para obtener artículos desde la API y renderizarlos en tu propio diseño.

Integración con React

Instalación

npm install @inkpilots/react-sdk
# or
yarn add @inkpilots/react-sdk

Uso básico

import { InkpilotsProvider, useArticles } from '@inkpilots/react-sdk';

function App() {
  return (
    <InkpilotsProvider apiKey="your_api_key">
      <ArticleList />
    </InkpilotsProvider>
  );
}

function ArticleList() {
  const { articles, loading, error } = useArticles();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {articles.map(article => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  );
}

Integración con Next.js

Renderizado del lado del servidor

// app/articles/page.tsx
async function ArticlesPage() {
  const res = await fetch('https://inkpilots.com/api/v1/articles', {
    headers: {
      'x-api-key': `Bearer ${process.env.INKPILOTS_API_KEY}`,
    },
  });

  const { data: articles } = await res.json();

  return (
    <main>
      {articles.map(article => (
        <article key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
        </article>
      ))}
    </main>
  );
}

Generación estática

// app/articles/[slug]/page.tsx
export async function generateStaticParams() {
  const res = await fetch('https://inkpilots.com/api/v1/articles', {
    headers: {
      'x-api-key': `Bearer ${process.env.INKPILOTS_API_KEY}`,
    },
  });

  const { data: articles } = await res.json();

  return articles.map(article => ({
    slug: article.slug,
  }));
}

JavaScript Vanilla

async function fetchArticles() {
  const response = await fetch('https://inkpilots.com/api/v1/articles', {
    headers: {
      'x-api-key': 'Bearer your_api_key',
    },
  });

  const { data } = await response.json();
  return data;
}

Tipos TypeScript

interface Article {
  id: string;
  workspaceId: string;
  agentId: string;
  title: string;
  slug: string;
  description: string;
  content: string;
  status: 'draft' | 'published' | 'archived';
  language: string;
  tags: string[];
  createdAt: string;
  updatedAt: string;
}

interface PaginatedResponse<T> {
  data: T[];
  pagination: {
    skip: number;
    limit: number;
    totalCount: number;
    totalPages: number;
    currentPage: number;
    hasNextPage: boolean;
    hasPrevPage: boolean;
  };
}

Próximos pasos

• Explorar librerías
• Desplegar con plantillas