Next.js

Next.js is a full-stack React framework.

Electric and Next.js

Next.js is based on React. Electric works with React. You can integrate Electric into your Next.js application like any other npm / React library.

Examples

Next.js example

See the Nextjs example on GitHub. This demonstrates using Electric for read-path sync and a Next.js API for handling writes:

<<< @../../examples/nextjs/app/page.tsx

It also demonstrates using a shape-proxy endpoint for proxying access to the Electric sync service. This allows you to implement auth and routing in-front-of Electric (and other concerns like transforming or decrypting the stream) using your Next.js backend:

<<< @../../examples/nextjs/app/shape-proxy/route.ts

ElectroDrizzle

ElectroDrizzle is an example application by Leon Alvarez using Next.js, Drizzle, PGLite and Electric together.

See the Getting Started guide here.

SSR

Next.js supports SSR. We are currently experimenting with patterns to use Electric with SSR in a way that supports server rendering and client-side components seamlessly moving into realtime sync.

<HelpWanted issue="1596"> <template v-slot:thing> a pull request </template> <template v-slot:doing> open </template> to improving our Next.js documentation, patterns and framework integrations. </HelpWanted>