This example app showcases Convex backend powering a Next.js app.
The app is a realtime social network with a limit of 20 characters per post (who needs more?). There are three pages:
- The home feed and author feed pages are dynamic and use client components. You can sign in with Github (via Clerk) to make new posts on the home feed.
- The single post page is using server components and SSR to render a post.
The demo includes server-side validation and rate limiting.
See it live here: https://convex-nextjs-app-router-demo.vercel.app/
Run:
npm install
npm run dev
This will guide you through making a Convex project.
Open http://localhost:3000 in your browser to see the result.
To test signing in with Clerk and making posts, follow these steps:
- Follow the first 3 steps from the Get Started guide for Clerk.
- Instead of pasting your Issuer URL to the config file add an environment variable
CLERK_JWT_ISSUER_DOMAIN
with the Issuer URL to your Deployment Settings on the Convex dashboard - In your
.env.local
file add a variableNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
with your Publishable Key (see step 7 of the Get Started guide)
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
Convex is a hosted backend platform with a
built-in database that lets you write your
database schema and
server functions in
TypeScript. Server-side database
queries automatically
cache and
subscribe to data, powering a
realtime useQuery
hook in our
React client. There are also
Python,
Rust,
ReactNative, and
Node clients, as well as a straightforward
HTTP API.
The database support NoSQL-style documents with relationships and custom indexes (including on fields in nested objects).
The
query
and
mutation
server functions have transactional,
low latency access to the database and leverage our
v8
runtime with
determinism guardrails
to provide the strongest ACID guarantees on the market:
immediate consistency,
serializable isolation, and
automatic conflict resolution via
optimistic multi-version concurrency control (OCC / MVCC).
The action
server functions have
access to external APIs and enable other side-effects and non-determinism in
either our
optimized v8
runtime or a more
flexible node
runtime.
Functions can run in the background via scheduling and cron jobs.
Development is cloud-first, with hot reloads for server function editing via the CLI. There is a dashbord UI to browse and edit data, edit environment variables, view logs, run server functions, and more.
There are built-in features for reactive pagination, file storage, reactive search, https endpoints (for webhooks), streaming import/export, and runtime data validation for function arguments and database data.
Everything scales automatically, and it’s free to start.