Start > Next.js Quickstart
Start > Next.js QuickstartKroxt BaaS SDK v1.0.5

Next.js Quickstart

Learn how to hook up Kroxt BaaS to a Next.js App Router application.

Instant Setup

Run npx create-kroxt-app, select **Next.js**, and input your Project ID and API Key when prompted.

1. Configure Environment Variables

.env.local
1
2
NEXT_PUBLIC_KROXT_PROJECT_ID=YOUR_PROJECT_ID
NEXT_PUBLIC_KROXT_API_KEY=YOUR_PUBLIC_API_KEY

2. Initialize Client SDK

lib/kroxt.ts
1
2
3
4
5
6
7
8
import { Kroxt } from "@kroxt/baas-sdk";

export const baas = new Kroxt({
  projectId: process.env.NEXT_PUBLIC_KROXT_PROJECT_ID || "",
  apiKey: process.env.NEXT_PUBLIC_KROXT_API_KEY || "",
});

export default baas;

3. CRUD Operations with Generics

Use type-safe document generics (`Document`) to query and modify collection records:

app/page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
"use client";

import { useEffect, useState } from "react";
import { Document } from "@kroxt/baas-sdk";
import { baas } from "@/lib/kroxt";

type Todo = Document<{
  text: string;
  completed: boolean;
}>;

export default function Page() {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    // Resolve collection schema with types
    baas.collection<{ text: string; completed: boolean }>("todos")
      .get()
      .then((data) => setTodos(data as Todo[]));
  }, []);

  return (
    <div className="p-6">
      <h1 className="text-lg font-bold text-white">My Todos</h1>
      <ul className="mt-4 space-y-2">
        {todos.map((todo) => (
          <li key={todo._id} className="p-3 bg-zinc-900 rounded-xl border border-zinc-800 text-xs text-zinc-300">
            {todo.data.text} - {todo.data.completed ? "Done" : "Pending"}
          </li>
        ))}
      </ul>
    </div>
  );
}