📚 Documentation: Tutorial for Next JS

src/routes/docs/tutorials/nextjs/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { globToTutorial } from '$lib/utils/tutorials.js';
+	import { setContext } from 'svelte';
+
+	export let data;
+	const tutorials = globToTutorial(data);
+	setContext('tutorials', tutorials);
+</script>
+
+<slot />

src/routes/docs/tutorials/nextjs/+layout.ts

@@ -0,0 +1,11 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = ({ url }) => {
+	const tutorials = import.meta.glob('./**/*.markdoc', {
+		eager: true
+	});
+	return {
+		tutorials,
+		pathname: url.pathname
+	};
+};

src/routes/docs/tutorials/nextjs/+page.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = async () => {
+	throw redirect(303, '/docs/tutorials/nextjs/step-1');
+};

src/routes/docs/tutorials/nextjs/step-1/+page.markdoc

@@ -0,0 +1,28 @@
+---
+layout: tutorial
+title: Build an expense tracker with Next.js
+description: Build a Next.js project using Appwrite.
+step: 1
+difficulty: beginner
+readtime: 18
+---
+
+**Expense tracker** is a simple web application that allows you to track your expenses. It is built using [Next.js](https://nextjs.org/) [app router](https://nextjs.org/docs/app) and [Appwrite](https://appwrite.io/).
+
+![Create project screen](/images/docs/tutorials/expense-tracker-app.png)
+
+# Concepts {% #concepts %}
+This tutorial will introduce the following concepts:
+
+1. Introduction to Appwrite
+2. Make first request
+3. Implement authtentication
+4. Intro to databases
+5. Create, read, update and delete documents
+5. Queries documents
+6. Add pagination
+
+
+# Prerequisites {% #prerequisites %}
+1. Basic knowledge of JavaScript, [React](https://react.dev/learn) and [Next.js](https://nextjs.org/docs).
+2. Have [Node.js](https://nodejs.org/en) and [NPM](https://www.npmjs.com/) installed on your computer

src/routes/docs/tutorials/nextjs/step-2/+page.markdoc

@@ -0,0 +1,106 @@
+---
+layout: tutorial
+title: Create Next.js app
+description: Create a Next.js project using Appwrite.
+step: 2
+---
+
+# Create Next.js project {% #create-next-js-project %}
+
+Create a new Next.js project using the `create-next-app` command.
+
+```sh
+npx create-next-app expense-tracker --eslint
+cd expense-tracker 
+```
+
+We are using the `--eslint` flags to add ESLint to our project.
+
+What are the options you plan to take?
+
+```sh
+✔ Would you like to use TypeScript? … No / Yes : No
+✔ Would you like to use Tailwind CSS? … No / Yes : No
+✔ Would you like to use `src/` directory? … No / Yes : Yes
+✔ Would you like to use App Router? (recommended) … No / Yes: Yes
+✔ Would you like to customize the default import alias? … No / Yes : No
+
+Creating a new Next.js app in expense-tracker.
+```
+
+You can also follow the responses from above. We will be using `app` directory for project. Also We are not using TypeScript and Tailwind CSS. So we can skip those options.
+
+# Install dependencies {% #install-dependencies %}
+
+Install the [JavaScript Appwrite SDK](https://appwrite.io/docs/sdks).
+
+```sh
+npm install appwrite
+```
+
+Install the [Appwrite CSS library](https://pink.appwrite.io/) and icons package. This will give us a nice looking UI for our app. We just have to use the classes provided by the CSS library.
+
+```sh
+npm install "@appwrite.io/pink" "@appwrite.io/pink-icons"
+```
+
+Import the CSS file and icons in the top of `app/layout.js` file.
+
+```js
+// /src/app/layout.js
+
+import "@appwrite.io/pink";
+import "@appwrite.io/pink-icons";
+```
+
+We are going to use a custom className `lite-bg` which we can define in the `globals.css` file.
+
+```css
+/* /src/app/globals.css */
+
+.lite-bg {
+  background-color: hsl(var(--color-primary-100) / 0.2);
+}
+```
+
+We will be using cookie to store the session token. So we need to install `next-cookie` package. We will also be using `react-hot-toast` to show toast messages.
+
+```bash
+npm install next-cookie react-hot-toast
+```
+
+We also have to add the `Toaster` component in the `app/layout.js` file. This component will render all toasts. The `layout.js` file will look like this.
+
+```js
+// /src/app/layout.js
+
+import { Toaster } from "react-hot-toast";
+import { Inter } from "next/font/google";
+
+import "@appwrite.io/pink";
+import "@appwrite.io/pink-icons";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        {children}
+        <Toaster position="bottom-right" />
+      </body>
+    </html>
+  );
+}
+```
+
+# Start the development server {% #start-the-development-server %}
+
+You can start the development server using the following command.
+
+```sh
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser to see the app.

src/routes/docs/tutorials/nextjs/step-3/+page.markdoc

@@ -0,0 +1,73 @@
+---
+layout: tutorial
+title: Set up Appwrite
+description: Learn how to set up Appwrite in your Next.js project
+step: 3
+---
+
+# Create project {% #create-project %}
+
+Head to the [Appwrite Console](https://cloud.appwrite.io/console). If this is your first time using Appwrite, create an account or log in to your existing account. Create a new project named `expanse-tracker`.
+
+{% only_dark %}
+![Create project screen](/images/docs/quick-starts/dark/create-project.png)
+{% /only_dark %}
+{% only_light %}
+![Create project screen](/images/docs/quick-starts/create-project.png)
+{% /only_light %}
+
+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)
+{% /only_dark %}
+{% only_light %}
+![Add a platform](/images/docs/quick-starts/add-platform.png)
+{% /only_light %}
+
+You can skip optional steps.
+
+# Initialize Appwrite SDK {% #init-sdk %}
+
+To use Appwrite in our Next.js app, we'll need to find our project ID. Find your project's ID in the **Settings** page. 
+
+{% only_dark %}
+![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
+{% /only_dark %}
+{% only_light %}
+![Project settings screen](/images/docs/quick-starts/project-id.png)
+{% /only_light %}
+
+First create a file that will hold env variables. Create a new file `.env.local` in the root of your project. Replace `<YOUR_PROJECT_ID>` with your project ID
+
+```js
+// .env.local
+
+NEXT_PUBLIC_APPWRITE_ENDPOINT = https://cloud.appwrite.io/v1
+NEXT_PUBLIC_APPWRITE_PROJECT = <YOUR_PROJECT_ID>
+```
+
+Create a new file `src/config/appwrite.js` to hold our Appwrite related code.
+Only one instance of the `Client()` class should be created per app.
+Add the following code to it.
+
+```js
+// /src/config/appwrite.js
+
+import { Client, Databases, Account } from "appwrite";
+
+export const config = {
+  APPWRITE_ENDPOINT: process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT,
+  APPWRITE_PROJECT: process.env.NEXT_PUBLIC_APPWRITE_PROJECT,
+};
+
+const client = new Client();
+client
+  .setEndpoint(config.APPWRITE_ENDPOINT)
+  .setProject(config.APPWRITE_PROJECT);
+
+export const account = new Account(client);
+export const database = new Databases(client);
+```
+
+Here we are using the Appwrite endpoints and project ID from the `.env.local` file to initialize the Appwrite SDK.