---
layout: article
title: Start with Next.js
description: Learn how to use Appwrite to add authentication, user management, file storage, and more to your Next.js apps.
difficulty: beginner
readtime: 3
back: /docs/quick-starts
---
Learn how to setup your first Next.js project powered by Appwrite.
{% section #step-1 step=1 title="Create project" %}
Head to the [Appwrite Console](https://cloud.appwrite.io/console).

{% only_dark %}
![Create project screen](/images/docs/quick-starts/dark/create-project.avif)
{% /only_dark %}
{% only_light %}
![Create project screen](/images/docs/quick-starts/create-project.avif)
{% /only_light %}

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`.

{% info title="Cross-Origin Resource Sharing (CORS)" %}
Adding `localhost` as a platform lets your local app talk to Appwrite. For production, add your live domain to avoid CORS errors.

Learn more in our [CORS error guide](/blog/post/cors-error).
{% /info %}


{% only_dark %}
![Add a platform](/images/docs/quick-starts/dark/add-platform.avif)
{% /only_dark %}
{% only_light %}
![Add a platform](/images/docs/quick-starts/add-platform.avif)
{% /only_light %}

You can skip optional steps.

{% /section %}
{% section #step-2 step=2 title="Create 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" %}

Install the JavaScript Appwrite SDK.

```sh
npm install appwrite
```
{% /section %}
{% section #step-4 step=4 title="Define Appwrite service" %}
Find your project's ID in the **Settings** page.

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

Create a new file `app/appwrite.js` and add the following code to it, replace `<PROJECT_ID>` with your project ID.

```client-web
import { Client, Account } from 'appwrite';

export const client = new Client();

client
    .setEndpoint('https://<REGION>.cloud.appwrite.io/v1')
    .setProject('<PROJECT_ID>'); // Replace with your project ID

export const account = new Account(client);
export { ID } from 'appwrite';
```
{% /section %}
{% section #step-5 step=5 title="Create a login page" %}
Create or update `app/page.js` file and add the following code to it.

```js
"use client";
import { useState } from "react";
import { account, ID } from "./appwrite";

const LoginPage = () => {
  const [loggedInUser, setLoggedInUser] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");

  const login = async (email, password) => {
    const session = await account.createEmailPasswordSession({
        email,
        password
    });
    setLoggedInUser(await account.get());
  };

  const register = async () => {
    await account.create({
      userId: ID.unique(),
      email,
      password,
      name
    });
    login(email, password);
  };

  const logout = async () => {
    await account.deleteSession({ sessionId: 'current' });
    setLoggedInUser(null);
  };

  if (loggedInUser) {
    return (
      <div>
        <p>Logged in as {loggedInUser.name}</p>
        <button type="button" onClick={logout}>
          Logout
        </button>
      </div>
    );
  }

  return (
    <div>
      <p>Not logged in</p>
      <form>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button type="button" onClick={() => login(email, password)}>
          Login
        </button>
        <button type="button" onClick={register}>
          Register
        </button>
      </form>
    </div>
  );
};

export default LoginPage;
```
{% /section %}

{% section #step-6 step=6 title="All set" %}
Run your project with `npm run dev` and open [Localhost on Port 3000](http://localhost:3000) in your browser.

Don't forget to add some CSS to suit your style.
{% /section %}