Skip to content

blog: add atharva as author & nextjs article #2312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adityaoberai merged 10 commits into from
Aug 28, 2025
Merged

blog: add atharva as author & nextjs article #2312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
144e27f
blog: add atharva as author & nextjs article
atharvadeosthale Aug 25, 2025
0518f3f
feat: add cover and rename slug
atharvadeosthale Aug 26, 2025
c6fdb74
Merge branch 'main' into nextjs-article
atharvadeosthale Aug 26, 2025
16ec29b
Merge branch 'main' into nextjs-article
atharvadeosthale Aug 28, 2025
e1c2425
fix: requested changes
atharvadeosthale Aug 28, 2025
b2a9cba
fix: format
atharvadeosthale Aug 28, 2025
ef8b57b
Update src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page…
atharvadeosthale Aug 28, 2025
e20894b
Update src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page…
atharvadeosthale Aug 28, 2025
57cbd63
Update src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page…
atharvadeosthale Aug 28, 2025
04cecfb
Update src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page…
atharvadeosthale Aug 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/routes/blog/author/atharva/+page.markdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
---
layout: author
name: Atharva Deosthale
slug: atharva
role: DevRel Intern
bio: Developer & Content Creator
avatar: /images/avatars/atharva.png
twitter: https://x.com/atharvabuilds
github: https://github.com/atharvadeosthale
linkedin: https://www.linkedin.com/in/atharvadeosthale/
---

80 changes: 80 additions & 0 deletions src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page.markdoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
layout: post
title: Deploy a Next.js app to Appwrite Sites
description: Learn how to deploy a Next.js app to Appwrite Sites.
date: 2025-08-28
cover: /images/blog/deploy-nextjs-app-to-appwrite-sites/cover.png
timeToRead: 5
author: atharva
category: tutorial
---

You just built your Next.js app with all the killer features you wanted. Now you want to put it out for the world to see. But you’re confused — “how do I do that?”. If you’re that person, this article is for you.

In this article, you will learn how to deploy your Next.js app completely free of cost. We will use Appwrite Sites to achieve that. Appwrite is an all-in-one open-source BaaS (backend as a service) that handles the backend part of your application so that you can focus on the app's core logic rather than unnecessary technical details.
Comment on lines +12 to +14
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Tighten the intro and fix BaaS capitalization.

Apply:

-You just built your Next.js app with all the killer features you wanted. Now you want to put it out for the world to see. But you’re confused — “how do I do that?”. If you’re that person, this article is for you.
-
-In this article, you will learn how to deploy your Next.js app completely free of cost. We will use Appwrite Sites to achieve that. Appwrite is an all-in-one open-source BaaS (backend as a service) that handles the backend part of your application so that you can focus on the app's core logic rather than unnecessary technical details. 
+You’ve built your Next.js app and want to share it with the world. Here’s how to deploy it for free on Appwrite Sites.
+
+Appwrite is an all-in-one, open-source Backend-as-a-Service (BaaS) that handles your backend so you can focus on core product logic.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
You just built your Next.js app with all the killer features you wanted. Now you want to put it out for the world to see. But you’re confused — “how do I do that?”. If you’re that person, this article is for you.
In this article, you will learn how to deploy your Next.js app completely free of cost. We will use Appwrite Sites to achieve that. Appwrite is an all-in-one open-source BaaS (backend as a service) that handles the backend part of your application so that you can focus on the app's core logic rather than unnecessary technical details.
You’ve built your Next.js app and want to share it with the world. Here’s how to deploy it for free on Appwrite Sites.
Appwrite is an all-in-one, open-source Backend-as-a-Service (BaaS) that handles your backend so you can focus on core product logic.
🤖 Prompt for AI Agents 
In src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page.markdoc around
lines 12-14, tighten the intro into two concise sentences and correct the BaaS
capitalization by referring to Appwrite as a "Backend-as-a-Service (BaaS)";
replace the current two-paragraph wording with a single short hook like "You
built your Next.js app — now let's deploy it." followed by a clear one-liner:
"This guide shows how to deploy your Next.js app for free using Appwrite Sites;
Appwrite is an open-source Backend-as-a-Service (BaaS) that handles your backend
so you can focus on app logic."


Appwrite Sites is a frontend hosting service that can help you deploy your Next.js (or any web framework) app in minutes with full RSC (React Server Components) and SSR (server‑side rendering) functionality.

# Testing your Next.js build

Before you deploy your Next.js app, it’s essential to see if it builds successfully. Building is a process where Next.js bundles your app into files that can be run on a server and a browser, depending on your usage of SSR (server-side rendering).

Comment on lines +20 to +21
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Minor wording: clarify SSR sentence and unify hyphen.

-Building is a process where Next.js bundles your app into files that can be run on a server and a browser, depending on your usage of SSR (server-side rendering).
+Building bundles your app into files that run on the server and the browser, depending on whether you use SSR (Server-Side Rendering).
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Before you deploy your Next.js app, it’s essential to see if it builds successfully. Building is a process where Next.js bundles your app into files that can be run on a server and a browser, depending on your usage of SSR (server-side rendering).
Before you deploy your Next.js app, it’s essential to see if it builds successfully. Building bundles your app into files that run on the server and the browser, depending on whether you use SSR (Server-Side Rendering).
🤖 Prompt for AI Agents 
In src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page.markdoc around
lines 20 to 21, the sentence about SSR is unclear and the hyphenation is
inconsistent; reword the sentence to explicitly say "server-side rendering
(SSR)" and ensure hyphenation is consistent (use "server-side rendering" with
the hyphen and expand SSR on first use), e.g. replace the current clause with a
clearer one like "depending on whether you use server-side rendering (SSR) or
client-side rendering," so the meaning and hyphenation are unified.

To build your Next.js app, run the following command in your terminal:

```bash
npm run build
```

If your build succeeds, you can deploy your Next.js application to the internet. If your build fails, you must fix all the errors in your application. When deploying a Next.js app, the deployment provider builds your app on their servers, and cannot deploy if the build fails.

# Configuring your Site on Appwrite

This article assumes you have your Next.js app code stored in a GitHub repository. If not, please do so, as it is needed for deployment. Deploying through code stored on GitHub also introduces advantages such as automatic deployments, preview deployments, etc.

Now, let’s link your GitHub repository to Appwrite Sites.

- Go to [Appwrite Console](https://cloud.appwrite.io) and sign in using your preferred authentication method.
- Create a new project, or use an existing one.
- Click on the **Sites** option on the sidebar.
- Click on **Create Site**.
- Click on **Connect a GitHub repository**.

Now, you should be able to see the most recent GitHub repositories based on activity.

![Connecting your GitHub repository to Appwrite Sites](/images/blog/deploy-nextjs-app-to-appwrite-sites/connect-repo.png)

Click **Connect** against the desired GitHub repository. The Next.js logo should be the icon of any valid Next.js app.
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Avoid overpromising framework icon detection.

-Click **Connect** against the desired GitHub repository. The Next.js logo should be the icon of any valid Next.js app.
+Click **Connect** for the desired repository. If detected, a Next.js logo appears for Next.js apps.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
Click **Connect** against the desired GitHub repository. The Next.js logo should be the icon of any valid Next.js app.
Click **Connect** for the desired repository. If detected, a Next.js logo appears for Next.js apps.
🤖 Prompt for AI Agents 
In src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page.markdoc around
line 46, the sentence "Click **Connect** against the desired GitHub repository.
The Next.js logo should be the icon of any valid Next.js app." overpromises
automatic framework icon detection; reword to a neutral, accurate statement such
as "Click **Connect** for the desired GitHub repository; if Appwrite detects a
Next.js project the repository icon may show the Next.js logo," or "Click
**Connect** for the desired GitHub repository. The repository icon may show the
Next.js logo if Appwrite recognizes a Next.js app." Replace the original line
with one of these neutral alternatives.


Once you connect your GitHub repository, you will be presented with options for deployment.

![Configuring your Site on Appwrite](/images/blog/deploy-nextjs-app-to-appwrite-sites/site-config.png)

Fill in the details as desired. Although there are some things you must know before moving forward.

- If you’re using a different branch for your intended production website, choose the specific branch.
- If you’re using a monorepo, Sites might not automatically detect your application. In such cases, manually provide the root directory for your Next.js app that contains the Next.js configuration file. For example, if you’re using Turborepo, your Next.js app might be located inside one of the folders in the `apps` folder, so your root directory should be something like `./apps/web`.
- Most users don’t need to change the **Build settings**, although if you want to run different commands for installation and builds, you can configure those in this section. If you don’t know anything about this, it’s worth skipping this section altogether.
Copy link
Member

@adityaoberai adityaoberai Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's mention the expected defaults as subpoints

- The default build command for Next.js is `npm run build`.
- The default install command for Next.js is `npm install`.
- The default output directory for Next.js is `./.next`.
- If your app uses environment variables, add them in the **Environment variables** section. If your app uses sensitive API keys, you are likely using environment variables.
- Configure an Appwrite Network subdomain to get started. You can add a custom domain or use a new Appwrite Network domain once your app is deployed.

{% info title="Note on environment variables" %}
In Next.js, public environment variables start with `NEXT_PUBLIC_`. These environment variables are accessible in the browser environment, so don’t store your sensitive API keys in a variable that starts with that prefix.
{% /info %}
Comment on lines +63 to +65
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Strengthen env var guidance: server-only secrets.

 {% info title="Note on environment variables" %}
 In Next.js, public environment variables start with `NEXT_PUBLIC_`. These environment variables are accessible in the browser environment, so don’t store your sensitive API keys in a variable that starts with that prefix.
+Server-only secrets must not be prefixed with `NEXT_PUBLIC_` and are available only in server code (API routes, Route Handlers, Server Components, or `getServerSideProps`).
 {% /info %}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{% info title="Note on environment variables" %}
In Next.js, public environment variables start with `NEXT_PUBLIC_`. These environment variables are accessible in the browser environment, so don’t store your sensitive API keys in a variable that starts with that prefix.
{% /info %}
{% info title="Note on environment variables" %}
In Next.js, public environment variables start with `NEXT_PUBLIC_`. These environment variables are accessible in the browser environment, so don’t store your sensitive API keys in a variable that starts with that prefix.
Server-only secrets must not be prefixed with `NEXT_PUBLIC_` and are available only in server code (API routes, Route Handlers, Server Components, or `getServerSideProps`).
{% /info %}
🤖 Prompt for AI Agents 
In src/routes/blog/post/deploy-nextjs-app-to-appwrite-sites/+page.markdoc around
lines 63 to 65, the current note only warns about NEXT_PUBLIC_ prefixed
variables but doesn't instruct how to store and use server-only secrets; update
the guidance to explicitly instruct readers to never prefix secrets with
NEXT_PUBLIC_, store them in server-only environment files (e.g., .env.local or
platform secret manager), access them only from server-side code (API routes,
server components, getServerSideProps) or via Appwrite server SDKs/functions,
and mention rotating/limiting scope for long-lived keys.


Now, hit the **Deploy** button, and the deployment process will begin. You can see the build logs as your website gets deployed.

# Next steps

![Deployment successful screen](/images/blog/deploy-nextjs-app-to-appwrite-sites/site-deployed.png)

Once your Next.js application is deployed, you can view it on the provided domains on the deployment success splash screen or in the Sites section of the Appwrite console.

Now, you can perform further steps to level up your experience with Appwrite Sites:

- [Custom domains with Appwrite Sites](/blog/post/custom-domains-with-sites)
- [How to host SSR web apps on Appwrite Sites](/blog/post/host-ssr-web-apps-sites)
- [Build and deploy a personal portfolio on Appwrite Sites](/blog/post/portfolio-template-sites)
- [Appwrite Sites quick-starts](/docs/products/sites/quick-start)
Binary file added static/images/avatars/atharva.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/blog/deploy-nextjs-app-to-appwrite-sites/connect-repo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/blog/deploy-nextjs-app-to-appwrite-sites/cover.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/blog/deploy-nextjs-app-to-appwrite-sites/site-config.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/images/blog/deploy-nextjs-app-to-appwrite-sites/site-deployed.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading