> ## Documentation Index > Fetch the complete documentation index at: https://docs.cuttlefishsync.com/llms.txt > Use this file to discover all available pages before exploring further. # Quick Start > Get Cuttlefish running in your Next.js app in 5 minutes # Quick Start We'll get Cuttlefish running in a Next.js app in 5 minutes. Before we begin, we'll need: **Node.js 20+** - Required for running the Cuttlefish dev server and our Next.js app. **A Next.js app** - Don't have one? Create a new Next.js app: ```bash theme={null} npx create-next-app@latest ``` **A local Postgres database** - Don't have one? Run Postgres with Docker: ```bash theme={null} docker run --name postgres -p 5432:5432 -e POSTGRES_PASSWORD=postgres -d postgres ``` **A database table to query** - Starting fresh? Create a sample `todos` table: ```bash theme={null} docker exec -i postgres psql -U postgres -d postgres -c "CREATE TABLE todos (id SERIAL PRIMARY KEY, title TEXT NOT NULL, completed BOOLEAN DEFAULT FALSE, created_at TIMESTAMPTZ DEFAULT NOW());" ``` Install Cuttlefish packages: ```bash theme={null} npm install @cuttlefish-sync/dev-server @cuttlefish-sync/core @cuttlefish-sync/react @cuttlefish-sync/raw-sql ``` We'll wrap our app with `CuttlefishProvider` in `app/layout.tsx`: ```tsx theme={null} import { CuttlefishProvider } from '@cuttlefish-sync/react' export default function RootLayout({ children }) { return ( {children} ) } ``` In a separate terminal, start the Cuttlefish dev server: ```bash theme={null} DATABASE_URL=postgresql://postgres:postgres@localhost:5432/postgres npx cuttlefish-dev-server start ``` We should see: `Cuttlefish Engine running on http://localhost:4000` The `useLiveQuery` hook executes a SQL query and automatically updates our component when data changes in the database. It returns `data`, `loading`, and `error` states just like any async hook. Create `app/page.tsx`: ```tsx theme={null} 'use client' import { sql } from '@cuttlefish-sync/raw-sql' import { useLiveQuery } from '@cuttlefish-sync/react' export default function Home() { const { data, loading, error } = useLiveQuery( sql`SELECT * FROM todos ORDER BY created_at DESC` ) if (loading) return

if (error) return

Error: {error.message}

return (

My Todos

{todo.title} {todo.completed ? '✓' : ''}

) } ``` Let's open our Next.js app in the browser at `http://localhost:3000`. We should see "My Todos" with our existing todos (or an empty list). Now let's see live updates in action. Open a new terminal and insert a todo directly into the database: ```bash theme={null} docker exec -i postgres psql -U postgres -d postgres -c "INSERT INTO todos (title, completed) VALUES ('Buy groceries', false);" ``` **Watch the browser - the new todo appears instantly, with no page refresh.** This is Cuttlefish's core value: our UI stays synchronized with the database in real-time. Any change to the database - whether from another user, a background job, or a manual SQL command - appears immediately in all connected clients. ## Next steps Congratulations! We've built our first live-updating React app with Cuttlefish. **Learn the concepts:** * [Understand how Cuttlefish works](/docs/concepts) - Live Partial Replica architecture, Composable Sync, and more **Explore advanced patterns:** * [Use Kysely for type-safe queries](/kysely-setup) - Get full TypeScript type safety with Kysely * [Query local data only](/docs/use-local-live-query) - Use `useLocalLiveQuery` for instant, zero-latency queries * [Optimize with Composable Sync](/docs/composable-sync) - Replicate once, query infinitely * [Add authentication](/docs/auth) - Integrate with your existing auth system **API Reference:** * [`useLiveQuery`](/docs/api/use-live-query) - Live query hook * [`useLocalLiveQuery`](/docs/api/use-local-live-query) - Local-only queries * [`replicateQuery`](/docs/api/replicate-query) - Manual replication control