convex-nextjs-app-router-demo

KO | EN

gitlite — search

#javascript #css #nodejs #java #golang #html #go #hacktoberfest #php #epub #eclipse #ember

convex-nextjs-app-router-demo

★ 17 Open GitHub ↗

Demo showing a Next.js App Router app powered by Convex backend

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Convex Next.js App Router Demo

This example app showcases Convex backend powering a Next.js app.

![Screenshot of the app](https://raw.githubusercontent.com/get-convex/convex-nextjs-app-router-demo/main/screenshot.png)

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/

## Setting up

Run:

```bash
npm install
npm run dev
```

This will guide you through making a Convex project.

Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.

### Environment variables

To test signing in with Clerk and making posts, follow these steps:

1. Follow the first 3 steps from the [Get Started](https://docs.convex.dev/auth/clerk) guide for Clerk.
2. 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](https://dashboard.convex.dev/)
3. In your `.env.local` file add a variable `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` with your Publishable Key (see step 7 of the [Get Started](https://docs.convex.dev/auth/clerk) 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`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

# What is Convex?

[Convex](https://convex.dev) is a hosted backend platform with a
built-in database that lets you write your
[database schema](https://docs.convex.dev/database/schemas) and
[server functions](https://docs.convex.dev/functions) in
[TypeScript](https://docs.convex.dev/typescript). Server-side database
[queries](https://docs.convex.dev/functions/query-functions) automatically
[cache](https://docs.convex.dev/functions/query-functions#caching--reactivity) and
[subscribe](https://docs.convex.dev/client/react#reactivity) to data, powering a
[realtime `useQuery` hook](https://docs.convex.dev/client/react#fetching-data) in our
[React client](https://docs.convex.dev/client/react). There are also
[Python](https://docs.convex.dev/client/python),
[Rust](https://docs.convex.dev/client/rust),
[ReactNative](https://docs.convex.dev/client/react-native), and
[Node](https://docs.convex.dev/client/javascript) clients, as well as a straightforward
[HTTP API](https://github.com/get-convex/convex-js/blob/main/src/browser/http_client.ts#L40).

The database support
[NoSQL-style documents](https://docs.convex.dev/database/document-storage) with
[relationships](https://docs.convex.dev/database/document-ids) and
[custom indexes](https://docs.convex.dev/database/indexes/)
(including on fields in nested objects).

The
[`query`](https://docs.convex.dev/functions/query-functions) and
[`mutation`](https://docs.convex.dev/functions/mutation-functions) server functions have transactional,
low latency access to the database and leverage our
[`v8` runtime](https://docs.convex.dev/functions/runtimes) with
[determinism guardrails](https://docs.convex.dev/functions/runtimes#using-randomness-and-time-in-queries-and-mutations)
to provide the strongest ACID guarantees on the market:
immediate consistency,
serializable isolation, and
automatic conflict resolution via
[optimistic multi-version concurrency control](https://docs.convex.dev/database/advanced/occ) (OCC / MVCC).

The [`action` server functions](https://docs.convex.dev/functions/actions) have
access to external APIs and enable other side-effects and non-determinism in
either our
[optimized `v8` runtime](https://docs.convex.dev/functions/runtimes) or a more
[flexible `node` runtime](https://docs.convex.dev/functions/runtimes#nodejs-runtime).

Functions can run in the background via
[scheduling](https://docs.convex.dev/scheduling/scheduled-functions) and
[cron jobs](https://docs.convex.dev/scheduling/cron-jobs).

Development is cloud-first, with
[hot reloads for server function](https://docs.convex.dev/cli#run-the-convex-dev-server) editing via the
[CLI](https://docs.convex.dev/cli). There is a
[dashbord UI](https://docs.convex.dev/dashboard) to
[browse and edit data](https://docs.convex.dev/dashboard/deployments/data),
[edit environment variables](https://docs.convex.dev/production/environment-variables),
[view logs](https://docs.convex.dev/dashboard/deployments/logs),
[run server functions](https://docs.convex.dev/dashboard/deployments/functions), and more.

There are built-in features for
[reactive pagination](https://docs.convex.dev/database/pagination),
[file storage](https://docs.convex.dev/file-storage),
[reactive search](https://docs.convex.dev/text-search),
[https endpoints](https://docs.convex.dev/functions/http-actions) (for webhooks),
[streaming import/export](https://docs.convex.dev/database/import-export/), and
[runtime data validation](https://docs.convex.dev/database/schemas#validators) for
[function arguments](https://docs.convex.dev/functions/args-validation) and
[database data](https://docs.convex.dev/database/schemas#schema-validation).

Everything scales automatically, and it’s [free to start](https://www.convex.dev/plans).

convex-nextjs-app-router-demo

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README