diff --git a/examples/nextjs-example/README.md b/examples/nextjs-example/README.md index 49a66ab337..e8622a9ea0 100644 --- a/examples/nextjs-example/README.md +++ b/examples/nextjs-example/README.md @@ -1,4 +1,4 @@ -# Basic Remix example +# Basic Next.js example ## Setup diff --git a/website/docs/integrations/crunchy.md b/website/docs/integrations/crunchy.md index 389d988ef4..cdac71e14b 100644 --- a/website/docs/integrations/crunchy.md +++ b/website/docs/integrations/crunchy.md @@ -38,6 +38,7 @@ CREATE ROLE electric WITH REPLICATION LOGIN PASSWORD '...'; GRANT ALL PRIVILEGES ON DATABASE "postgres" to electric; ``` -You can then connect +You can then connect as the new `electric` user. + > [!Tip] Need somewhere to host Electric? > If you need somewhere to deploy Electric then [Crunchy works well](https://neon.tech/docs/guides/render) with [Render](./render#deploy-electric). \ No newline at end of file diff --git a/website/docs/integrations/fly.md b/website/docs/integrations/fly.md index ed6ab45c83..035c6b6ff1 100644 --- a/website/docs/integrations/fly.md +++ b/website/docs/integrations/fly.md @@ -12,20 +12,22 @@ image: /img/integrations/electric-fly.jpg ## Electric and Fly -You *can* use Fly to deploy any or all components of the Electric stack: +You can use Fly to deploy any or all components of the Electric stack: - [deploy a Postgres database](#deploy-postgres) - [an Electric sync service](#deploy-electric) - [your client application](#deploy-your-app) -Fly's sweet spot is deploying Elixir applications, like the Electric sync service and/or [Phoenix aplications](./phoenix). +One of Fly's specialities is deploying Elixir applications. So Fly is especially good for [deploying the Electric sync service](#deploy-electric) and/or [Phoenix applications](./phoenix) using Electric. > [!Tip] Need context? > See the [Deployment guide](/docs/guides/deployment) for more details. ### Deploy Postgres -Fly isn't really a managed Postgres host. They do offer [database hosting](https://fly.io/docs/database-storage-guides/#managed-database-services) but they prefer to offload it to other providers, such as [Supabase](./supabase). +[Fly Postgres](https://fly.io/docs/postgres) is not a managed Postgres service. See the general advice on [Running Postgres](/docs/guides/deployment#_1-running-postgres) in the deployment guide for information on how to configure Postgres to work with Electric. + +Fly's [Supabase Postgres](https://fly.io/docs/supabase) is a managed Postgres service, powered by [Supabase](./supabase). If you use it, make sure to connect on the IPv6 `DATABASE_URL` rather than the `DATABASE_POOLER_URL` and see the [Supabase guide](./supabase#deploy-postgres) for more context. ### Deploy Electric diff --git a/website/docs/integrations/next.md b/website/docs/integrations/next.md index 6dc5275cb0..8f28fb5c70 100644 --- a/website/docs/integrations/next.md +++ b/website/docs/integrations/next.md @@ -18,13 +18,27 @@ image: /img/integrations/electric-next.jpg Next.js is based on React. Electric [works with React](./react). You can integrate Electric into your Next.js application like any other npm / React library. -### SSR +### Examples -Next.js supports SSR. We are currently [experimenting with patterns](https://github.com/electric-sql/electric/pull/1596) to use Electric with SSR in a way that supports server rendering *and* client-side components seamlessly moving into realtime sync. +#### Next.js example -### Examples +See the [nextjs-example](https://github.com/electric-sql/electric/tree/main/examples/nextjs-example) on GitHub. This demonstrates using Electric for read-path sync and a Next.js API for handling writes: + +<<< @../../examples/nextjs-example/app/page.tsx + +It also demonstrates using a [shape-proxy endpoint](https://github.com/electric-sql/electric/blob/main/examples/nextjs-example/app/shape-proxy/route.ts) for proxying access to the Electric sync service. This allows you to implement [auth](/docs/guides/auth) and routing in-front-of Electric (and other concerns like transforming or decrypting the stream) using your Next.js backend: + +<<< @../../examples/nextjs-example/app/shape-proxy/route.ts -[ElectroDrizzle](https://github.com/LeonAlvarez/ElectroDrizzle) is an example Next.js application using ElectricSQL and PGLite. +#### ElectroDrizzle + +[ElectroDrizzle](https://github.com/LeonAlvarez/ElectroDrizzle) is an example application by [Leon Alvarez](https://github.com/LeonAlvarez) using Next.js, [Drizzle](https://orm.drizzle.team), [PGLite](/product/pglite) and Electric together. + +See the [Getting Started guide here](https://github.com/LeonAlvarez/ElectroDrizzle?tab=readme-ov-file#getting-started). + +#### SSR + +Next.js supports SSR. We are currently [experimenting with patterns](https://github.com/electric-sql/electric/pull/1596) to use Electric with SSR in a way that supports server rendering *and* client-side components seamlessly moving into realtime sync.