Skip to content

Next.js Quick Start

Build a Next.js app powered by Centrali in 5 minutes. You'll create an API route that fetches data from Centrali and a page that displays it.

Prerequisites

  • A Centrali account with a workspace (Account Setup)
  • Service account credentials (client ID and secret)
  • Node.js 18+

1. Create a Next.js App

npx create-next-app@latest my-centrali-app --typescript --app
cd my-centrali-app

2. Install the SDK

npm install @centrali-io/centrali-sdk

3. Set Up Environment Variables

Create a .env.local file:

CENTRALI_CLIENT_ID=ci_your_client_id
CENTRALI_CLIENT_SECRET=sk_your_client_secret
CENTRALI_WORKSPACE=your-workspace-slug

4. Create the Centrali Client

Create lib/centrali.ts:

import { CentraliSDK } from '@centrali-io/centrali-sdk';

export const centrali = new CentraliSDK({
  baseUrl: 'https://api.centrali.io',
  workspaceId: process.env.CENTRALI_WORKSPACE!,
  clientId: process.env.CENTRALI_CLIENT_ID!,
  clientSecret: process.env.CENTRALI_CLIENT_SECRET!
});

5. Create an API Route

Create app/api/products/route.ts:

import { centrali } from '@/lib/centrali';
import { NextResponse } from 'next/server';

export async function GET() {
  const products = await centrali.queryRecords('Product', {
    sort: '-createdAt',
    limit: 20
  });

  return NextResponse.json(products);
}

export async function POST(request: Request) {
  const body = await request.json();

  const product = await centrali.createRecord('Product', {
    name: body.name,
    price: body.price,
    inStock: true
  });

  return NextResponse.json(product, { status: 201 });
}

6. Create a Page

Replace app/page.tsx:

async function getProducts() {
  const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'}/api/products`, {
    cache: 'no-store'
  });
  return res.json();
}

export default async function Home() {
  const products = await getProducts();

  return (
    <main style={{ padding: '2rem', fontFamily: 'system-ui' }}>
      <h1>Products</h1>
      {products.data?.length > 0 ? (
        <ul>
          {products.data.map((product: any) => (
            <li key={product.id}>
              <strong>{product.data.name}</strong> — ${product.data.price}
            </li>
          ))}
        </ul>
      ) : (
        <p>No products yet. Create some using the API!</p>
      )}
    </main>
  );
}

7. Run It

npm run dev

Visit http://localhost:3000 to see your page. Create a product:

curl -X POST http://localhost:3000/api/products \
  -H "Content-Type: application/json" \
  -d '{"name": "Wireless Headphones", "price": 99.99}'

Refresh the page to see it appear.

What's Next?