Appwrite + Next.js
BeginnerWeb AppNext.js on an open-source Appwrite backend, from a free cloud plan to your own server.
Published 16 October 2026
About Appwrite + Next.js
The Appwrite + Next.js stack pairs the most widely used React framework with Appwrite, an open-source backend platform that bundles databases, authentication, file storage, serverless functions, messaging, and realtime events in one project. Instead of building an API, the Next.js app calls Appwrite through its SDKs, and Appwrite's permission model decides which user or team can read or change each row and file.
Sign-in comes from Appwrite Auth, the authentication service built into every Appwrite project: email and password, magic links, one-time codes, OAuth providers, and multi-factor sign-in, with teams for shared workspaces. Next.js can use Appwrite in two ways. Client components call the web SDK straight from the browser, while Server Components, route handlers, and Server Actions use the Node SDK with a session kept in a secure cookie, Appwrite's documented pattern for server-rendered apps.
Data lives in Appwrite's TablesDB by default, with relationships, indexes, and row-level permissions, and a project can add a schemaless DocumentsDB, a VectorsDB for embeddings, or a native PostgreSQL or MySQL database later. Functions run custom code on HTTP calls, database events, or schedules, and Messaging sends email, SMS, and push notifications through providers configured in the Appwrite console.
The stack suits beginners who want a full backend without running one. Start on Appwrite Cloud's free plan, deploy the Next.js app to a hosting platform, and move to a paid plan or a self-hosted Appwrite server as the app grows. The price of that convenience is coupling: the app's data access is written against Appwrite's own APIs.
Key Features
- ✓Appwrite bundles databases, auth, storage, functions, messaging, and realtime in one project
- ✓Appwrite Auth with email, magic links, one-time codes, OAuth, teams, and MFA
- ✓Next.js App Router with Appwrite sessions in secure cookies for Server Components and Server Actions
- ✓Row-level and file-level permissions enforced by Appwrite, with no custom API layer
- ✓Functions for webhooks, scheduled jobs, and event triggers in many language runtimes
- ✓Runs on Appwrite Cloud or a self-hosted Appwrite server with the same code
When to Use Appwrite + Next.js
- →SaaS MVPs that need accounts, teams, and file uploads from day one
- →Apps with a web frontend now and Flutter or React Native mobile apps later on the same backend
- →Realtime features such as notifications, activity feeds, and collaborative lists
- →Projects that want a free managed backend to start with and a self-hosting path later
- →Apps that send transactional email, SMS, or push notifications from one platform
Pros
- One backend platform covers data, auth, files, functions, and messaging, so there are fewer services to wire together
- Open source with the same API on Appwrite Cloud and self-hosted, so leaving the managed service does not mean a rewrite
- Server-side sessions fit the Next.js App Router, so protected pages can render on the server
- The same Appwrite project can later serve mobile apps through the official Flutter and React Native SDKs
Cons
- Data access is written against Appwrite's APIs, so moving to another backend means rewriting it
- Two SDKs and the session-cookie pattern make the server side more involved than a browser-only setup
- Free cloud projects pause after a week without activity, and the paid plan is billed per project
- A smaller community and fewer Next.js tutorials than Supabase or Firebase
Hosting Options for Appwrite + Next.js
Deploy Appwrite + Next.js on Vercel
The platform the Next.js team builds for, with zero-config deploys from git, a preview environment for every pull request, and Server Actions and route handlers running as functions. The Appwrite API key that server code needs goes into Vercel's encrypted environment variables. Hobby is free for personal, non-commercial projects; a commercial app needs Pro at about $20 a month per seat.
Deploy Appwrite + Next.js on Netlify
A comparable git-based platform with its own Next.js runtime, deploy previews, and edge functions, so App Router features work without extra setup. The free plan covers a small app, with Personal at $9 a month and Pro at $20 once traffic or build usage grows.
Deploy Appwrite + Next.js on Railway
Runs Next.js as a persistent Node server instead of serverless functions, so server code keeps warm connections to Appwrite and has no function cold starts or duration limits. The Hobby plan is $5 a month including $5 of usage, billed by the memory and CPU the server actually uses.
Deploy Appwrite + Next.js on Render
The same persistent-server model as Railway, with a free web service for trying the app that sleeps when idle, so the first request after a pause is slow. An always-on instance with 0.5 CPU and 512 MB costs $7 a month.
These are highlighted picks. To see all the tools, check the Hosting & Cloud category.
Appwrite + Next.js Add-ons
Each addition below extends this stack with a capability the base stack works fine without. None are required: include the ones your product actually needs when building this stack, and skip the rest.
CI/CD Add-ons
Add CI/CD when you want a dedicated pipeline for running tests, linting, or multi-stage builds before a deploy goes out. Many hosting platforms already redeploy automatically on every push on their own — a CI/CD tool adds the most value on top of that by gating the deploy on a passing test suite, and matters even more when the hosting choice does not auto-deploy at all, such as a self-hosted server.
Appwrite + Next.js with GitHub Actions
Runs type checks, linting, and tests on every push before the hosting platform deploys, and can also push Appwrite Functions and database changes with the Appwrite CLI from the same repository.
These are highlighted picks. To see all the tools, check the CI/CD Pipelines category.
Email Add-ons
Add email when the app needs to send account verification, password reset, or notification messages.
Appwrite + Next.js with Resend
A built-in Appwrite Messaging email provider: add a Resend API key in the console and send transactional email from functions or the Messaging API. On the Pro plan or a self-hosted server, Resend's SMTP credentials can also carry Appwrite Auth's verification and magic-link emails under your own domain.
Appwrite + Next.js with SendGrid
Another built-in Appwrite Messaging email provider, with dedicated IP addresses and deliverability tooling for apps sending at high volume. There is no permanent free plan, so it earns its place when volume matters more than upfront cost.
Payments Add-ons
Add payments when the product is ready to charge for subscriptions or one-time purchases.
Appwrite + Next.js with Stripe
Subscriptions and one-time checkout through Stripe, with an Appwrite Function receiving Stripe's webhooks and updating the user's rows. Appwrite's function templates include Stripe payments and subscriptions, so the webhook handler does not start from a blank file.
Styling Add-ons
Add styling when you want a component or utility-class system to build the UI faster than hand-writing CSS from scratch.
Appwrite + Next.js with Tailwind CSS
Utility classes written straight into React components, offered as a setup option by create-next-app. The stack works with plain CSS or CSS Modules by default; Tailwind is the optional pick for a utility-first workflow.
These are highlighted picks. To see all the tools, check the CSS Frameworks category.
Analytics Add-ons
Add analytics when you want to measure traffic, track visitor behavior, or understand how people actually use the product.
Appwrite + Next.js with PostHog
Event tracking, session replay, feature flags, and A/B tests through PostHog's JavaScript SDK in the Next.js app. The richest option when you want to see how people use the product, not just how many visit.
Appwrite + Next.js with Plausible Analytics
Privacy-first pageview analytics added with a script tag in the root layout, with no cookie banner needed. A good fit for simple traffic numbers without a heavier product analytics setup.
Appwrite + Next.js with Umami
Open-source, self-hostable analytics for keeping visitor data on infrastructure you control, a natural companion when Appwrite itself is self-hosted.
These are highlighted picks. To see all the tools, check the Web & Product Analytics category.
Frequently Asked Questions about Appwrite + Next.js
Should Next.js call Appwrite from the browser or the server?
Both, for different jobs. Client components can call the Appwrite web SDK directly for interactive parts such as realtime subscriptions and file uploads. For anything rendered on the server, Appwrite's SSR guide uses two clients in server code: an admin client with an API key, and a session client created fresh for each request from the cookie that stores the user's session secret. Keep the API key in server-only environment variables, never in a client component. For a first project, a simple split works well: server-rendered pages for signed-in dashboards, client components for the live, interactive pieces.
Can Appwrite host the Next.js app too?
Yes. Appwrite Sites builds and serves Next.js from a Git repository, server rendering included, so the frontend and backend can sit in one Appwrite project with one console and one bill. The default here is still a dedicated Next.js host, because Vercel is built by the Next.js team and new framework features reach it first. The code does not change either way: the app talks to Appwrite through the same SDKs wherever it runs, so you can start on one and move to the other.
Should I use Appwrite Cloud or self-host Appwrite?
Start on Cloud. The free plan needs no server, and a project only pauses after a week without activity, which the paid plan removes. Pro is $25 a month per project with daily backups and higher limits, so several production apps multiply that cost. Self-hosting runs the same Appwrite release with Docker Compose on your own server, which removes per-project pricing but adds a multi-container setup to update, back up, and monitor. Appwrite's data migrations move a project between Cloud and self-hosted, so the choice can change later.
Should I pick this or the PocketBase + SvelteKit stack?
Both give a beginner a ready-made backend with auth, data, files, and realtime. This stack starts on Appwrite's managed cloud with a free plan, offers functions, messaging, and several database engines, and pairs them with server-rendered Next.js pages. PocketBase + SvelteKit is the lean one: one free binary on a server you run, a SvelteKit single-page app, and costs close to the price of that server, with pre-1.0 upgrades and a single-server ceiling as the trade-offs. Pick Appwrite when you would rather not run the backend yourself or want the broader platform, PocketBase for simplicity and full control of one server.
Can I move an existing Firebase or Supabase project to this stack?
Mostly from the console. Appwrite's data migrations import users, databases, and files from Firebase, Supabase, and NHost, so the remaining work is rewriting the client calls to Appwrite's SDKs. Firebase security rules and Supabase row-level security policies do not carry over and have to be rebuilt as Appwrite permissions, which is the step to plan time for. Going the other way has no automatic path to another backend platform: the data can be exported, but the app's data access code would be rewritten.
Stacks Related to Appwrite + Next.js
PocketBase + SvelteKit
Project
A SvelteKit app and its whole backend, served from one PocketBase binary.
Headless WordPress + Next.js
Project
WordPress as a headless CMS powering a fast, React-based Next.js frontend.
Next.js + PostgreSQL
Project
Next.js with a PostgreSQL database, an ORM, and authentication: full-stack TypeScript web apps.
Directus + Next.js
Project
The open-source backend platform on your own PostgreSQL or MySQL database, rendered by Next.js.
Scores
Popularity3/5
Next.js is the most used React framework and Appwrite is one of the most-starred open-source backend platforms, but the pair has a much smaller tutorial and community footprint than Next.js with Supabase or Firebase.
Learning Curve3/5
Appwrite's console and quick starts make the first screens fast, but a Next.js app has two SDKs to learn, browser and server, plus the session-cookie pattern for server rendering. Appwrite's permission model is one more concept on top of the App Router.
Flexibility3/5
Several database engines, functions, and messaging cover most app needs, and Next.js can render on the server or in the browser. The backend's shape is set by Appwrite's services and APIs, and Appwrite Auth is the only auth layer that fits without custom work.
Performance4/5
Server Components read Appwrite data during the request and stream HTML, and paid Appwrite projects get dedicated resources. Every data call is a network hop to Appwrite's API, and free cloud projects share resources.
Portability3/5
Appwrite is open source, a project can move between Cloud and self-hosting, and Next.js deploys to many hosts. The app's data access is written against Appwrite's APIs, so leaving Appwrite itself means rewriting that layer.
Tools in the Appwrite + Next.js Stack
Programming Languages
Databases
Authentication
Add-ons (optional — add any, or none)
CI/CD
Payments
Styling
Analytics
Appwrite + Next.js Pricing
Next.js, React, and TypeScript are free and open source. Appwrite Cloud's Free plan covers two small projects with 75K monthly active users, and Pro costs $25 a month per project with no pausing, daily backups, and usage-based overages; self-hosted Appwrite is free apart from its server. Vercel's free Hobby tier hosts personal, non-commercial projects, and a commercial app needs Pro at about $20 a month per seat.
Next.js, React, and TypeScript are free.
The Free plan covers two small projects; Pro is $25 a month per project plus usage. Self-hosting is free apart from the server.
Hobby is free for non-commercial use and Pro is about $20 a month per seat; persistent servers start at $5 to $7 a month.