Skip to content

Commit

Permalink
Merge pull request #1792 from appwrite/update-next-quickstart
Browse files Browse the repository at this point in the history
docs: Update Next quick start with project setup instructions
  • Loading branch information
divanov11 authored Feb 24, 2025
2 parents 3d04293 + bfe377c commit 771f6c1
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions src/routes/docs/quick-starts/nextjs/+page.markdoc
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Head to the [Appwrite Console](https://cloud.appwrite.io/console).

If this is your first time using Appwrite, create an account and create your first project.

Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`.
Then, under **Add a platform**, add a **Web app**. The **Hostname** should be `localhost`.

{% only_dark %}
![Add a platform](/images/docs/quick-starts/dark/add-platform.png)
Expand All @@ -32,11 +32,21 @@ You can skip optional steps.

{% /section %}
{% section #step-2 step=2 title="Create Next.js project" %}
Create a Next.js project and create a **JavaScript** Next.js project.
Create a Next.js project by running the following command:

```sh
npx create-next-app@latest && cd my-app
```

When prompted, configure your project with these recommended settings:
- **Would you like to use TypeScript?** → No
- **Would you like to use ESLint?** → Yes
- **Would you like to use Tailwind CSS?** → No (unless you plan to use it)
- **Would you like to use `src/` directory?** → Yes/No (either works for this tutorial)
- **Would you like to use App Router?** → Yes
- **Would you like to customize the default import alias?** → No

These settings will create a minimal Next.js setup that's perfect for getting started with Appwrite.
{% /section %}
{% section #step-3 step=3 title="Install Appwrite SDK" %}

Expand All @@ -47,7 +57,7 @@ npm install [email protected]
```
{% /section %}
{% section #step-4 step=4 title="Define Appwrite service" %}
Find your project's ID in the **Settings** page.
Find your project's ID in the **Settings** page.

{% only_dark %}
![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
Expand Down

0 comments on commit 771f6c1

Please sign in to comment.