mirror of
https://github.com/clockworklabs/SpacetimeDB.git
synced 2026-08-08 10:10:17 -04:00
bradleyshepandGitHub
fe9ad4c909
# Description of Changes Adds a new Next.js quickstart template and documentation. **New Template (`templates/nextjs-ts/`):** - Next.js 15 App Router with TypeScript SpacetimeDB module - Pre-configured `SpacetimeDBProvider` with client-side connection handling - Environment variable support (`NEXT_PUBLIC_SPACETIMEDB_HOST`, `NEXT_PUBLIC_SPACETIMEDB_DB_NAME`) - SSR-safe implementation with `"use client"` directives - Example page demonstrating `useTable` and `useReducer` hooks - Dev server runs on port 3001 to avoid conflict with SpacetimeDB on port 3000 - Pre-generated module bindings included **New Documentation (`docs/.../00200-nextjs.md`):** - 8-step quickstart consistent with other quickstarts (React, TypeScript, Rust, C#) - Covers: project creation, structure, tables/reducers, CLI testing - Next.js-specific: provider pattern, SSR considerations, env var configuration, React hooks usage **Updated `templates-list.json`:** - Added `nextjs-ts` to highlights and templates list # API and ABI breaking changes None. # Expected complexity level and risk 1 - Adds a new template and docs without modifying existing functionality. # Testing - [ ] Run `spacetime dev --template nextjs-ts my-test-app` and verify the app starts - [ ] Navigate to http://localhost:3001 and confirm the UI loads and connects - [ ] Add a person via the UI and verify it appears in the list - [ ] Verify env vars work: set `NEXT_PUBLIC_SPACETIMEDB_URI` and `NEXT_PUBLIC_SPACETIMEDB_MODULE` - [ ] Verify the quickstart doc renders correctly in the docs site - [ ] Confirm Next.js appears in the sidebar after React
29 lines
308 B
CSS
29 lines
308 B
CSS
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
color: #333;
|
|
background: #fafafa;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body {
|
|
color: #eee;
|
|
background: #111;
|
|
}
|
|
}
|