This will start the local SpacetimeDB server, publish your module, generate TypeScript bindings, and start the Next.js development server.
</StepText>
<StepCode>

spacetime dev --template nextjs-ts

</StepCode>

  The `spacetime dev` command automatically configures your app to connect to SpacetimeDB via environment variables in `.env.local`.
</StepText>

  Edit `spacetimedb/src/index.ts` to add tables and reducers. Edit `app/page.tsx` and `app/PersonList.tsx` to build your UI.
</StepText>
<StepCode>

my-nextjs-app/
├── spacetimedb/          # Your SpacetimeDB module
│   └── src/
│       └── index.ts      # SpacetimeDB module logic
├── app/                  # Next.js App Router
│   ├── layout.tsx        # Root layout with providers
│   ├── page.tsx          # Server Component (fetches initial data)
│   ├── PersonList.tsx    # Client Component (real-time updates)
│   └── providers.tsx     # SpacetimeDB provider for real-time
├── lib/
│   └── spacetimedb-server.ts  # Server-side data fetching
├── src/
│   └── module_bindings/  # Auto-generated types
└── package.json

</StepCode>

  Tables store your data. Reducers are functions that modify data — they're the only way to write to the database.
</StepText>
<StepCode>

import { schema, table, t } from 'spacetimedb/server';

const spacetimedb = schema({
  person: table(
    { public: true },
    {
      name: t.string(),
    }
  ),
});
export default spacetimedb;

export const add = spacetimedb.reducer(
  { name: t.string() },
  (ctx, { name }) => {
    ctx.db.person.insert({ name });
  }
);

export const sayHello = spacetimedb.reducer(ctx => {
  for (const person of ctx.db.person.iter()) {
    console.info(`Hello, ${person.name}!`);
  }
  console.info('Hello, World!');
});

</StepCode>

    </StepCode>
  </Step>

  <Step title="Understand server-side rendering">
    <StepText>
      The SpacetimeDB SDK works both server-side and client-side. The template uses a hybrid approach:

      - **Server Component** (`page.tsx`): Fetches initial data during SSR for fast page loads
      - **Client Component** (`PersonList.tsx`): Maintains a real-time WebSocket connection for live updates

      The `lib/spacetimedb-server.ts` file provides a utility for server-side data fetching.
    </StepText>
    <StepCode>
```tsx
// lib/spacetimedb-server.ts
import { DbConnection, tables } from '../src/module_bindings';

export async function fetchPeople() {
  return new Promise((resolve, reject) => {
    const connection = DbConnection.builder()
      .withUri(process.env.SPACETIMEDB_HOST!)
      .withDatabaseName(process.env.SPACETIMEDB_DB_NAME!)
      .onConnect(conn => {
        conn.subscriptionBuilder()
          .onApplied(() => {
            const people = Array.from(conn.db.person.iter());
            conn.disconnect();
            resolve(people);
          })
          .subscribe(tables.person);
      })
      .build();
  });
}

</StepCode>

```tsx
// app/PersonList.tsx (Client Component)
'use client';

import { tables, reducers } from '../src/module_bindings';
import { useTable, useReducer } from 'spacetimedb/react';

export function PersonList({ initialPeople }) {
  // Real-time data from WebSocket subscription
  const [people, isLoading] = useTable(tables.person);
  const addPerson = useReducer(reducers.add);

  // Use server data until client is connected
  const displayPeople = isLoading ? initialPeople : people;

  return (
    <ul>
      {displayPeople.map((person, i) => <li key={i}>{person.name}</li>)}
    </ul>
  );
}

</StepCode>