Skip to content
  • beginner
  • 25 min

Build an idea tracker with Next.js

2

Create app

Create Next.js project

Create a Next.js app with the npx create-next-app command. The command will install all the necessary dependencies for you.

Shell
npx create-next-app@latest ideas-tracker --typescript --eslint --app --src-dir --import-alias "@/*"

Add dependencies

Once the project is created, change your current working directory and install the JavaScript Appwrite SDK.

Shell
cd ideas-tracker
npm install appwrite@18.1.1
npm install "@appwrite.io/pink"

Open src/app/globals.css and replace the content with the following to import the relevant style files.

CSS
/* src/app/globals.css */
@import "@appwrite.io/pink";
@import "@appwrite.io/pink-icons";

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

body {
  background: hsl(var(--color-neutral-50));
}

.dark body {
  background: hsl(var(--color-neutral-900));
}

You can start your development server to see your app in the browser.

Shell
npm run dev

This will start a server at http://localhost:3000/.

Step 1: Introduction Step 3: Set up Appwrite
Was this page helpful?