From 5c1095b0065d92bf834d9b5af0d256e46b9cb1aa Mon Sep 17 00:00:00 2001 From: Nishantjain10 Date: Sat, 28 Oct 2023 19:01:23 +0530 Subject: [PATCH] feat: added nextjs-auth tutorial. --- package.json | 2 +- src/routes/docs/tutorials/+page.svelte | 11 ++++++ .../docs/tutorials/nextjs-auth/+layout.svelte | 10 ++++++ .../docs/tutorials/nextjs-auth/+layout.ts | 11 ++++++ .../docs/tutorials/nextjs-auth/+page.ts | 6 ++++ .../nextjs-auth/step-1/+page.markdoc | 35 +++++++++++++++++++ .../nextjs-auth/step-2/+page.markdoc | 27 ++++++++++++++ 7 files changed, 101 insertions(+), 1 deletion(-) create mode 100644 src/routes/docs/tutorials/nextjs-auth/+layout.svelte create mode 100644 src/routes/docs/tutorials/nextjs-auth/+layout.ts create mode 100644 src/routes/docs/tutorials/nextjs-auth/+page.ts create mode 100644 src/routes/docs/tutorials/nextjs-auth/step-1/+page.markdoc create mode 100644 src/routes/docs/tutorials/nextjs-auth/step-2/+page.markdoc diff --git a/package.json b/package.json index 701f641397..2a263518f6 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@playwright/test": "^1.37.1", "@sveltejs/adapter-node": "^1.3.1", "@sveltejs/adapter-static": "^2.0.3", - "@sveltejs/kit": "^1.24.1", + "@sveltejs/kit": "^1.27.1", "@types/compression": "^1.7.3", "@types/glob": "^8.1.0", "@types/markdown-it": "^13.0.1", diff --git a/src/routes/docs/tutorials/+page.svelte b/src/routes/docs/tutorials/+page.svelte index 40429352e5..10ae09338f 100644 --- a/src/routes/docs/tutorials/+page.svelte +++ b/src/routes/docs/tutorials/+page.svelte @@ -51,6 +51,17 @@

+
  • + +
    +
    +

    + Learn Appwrite Auth, Databases, and more with Nextjs. +

    +     +
  • diff --git a/src/routes/docs/tutorials/nextjs-auth/+layout.svelte b/src/routes/docs/tutorials/nextjs-auth/+layout.svelte new file mode 100644 index 0000000000..fb9fb3980f --- /dev/null +++ b/src/routes/docs/tutorials/nextjs-auth/+layout.svelte @@ -0,0 +1,10 @@ + + + diff --git a/src/routes/docs/tutorials/nextjs-auth/+layout.ts b/src/routes/docs/tutorials/nextjs-auth/+layout.ts new file mode 100644 index 0000000000..562b11506f --- /dev/null +++ b/src/routes/docs/tutorials/nextjs-auth/+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 + }; +}; diff --git a/src/routes/docs/tutorials/nextjs-auth/+page.ts b/src/routes/docs/tutorials/nextjs-auth/+page.ts new file mode 100644 index 0000000000..21443285af --- /dev/null +++ b/src/routes/docs/tutorials/nextjs-auth/+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-auth/step-1'); +}; diff --git a/src/routes/docs/tutorials/nextjs-auth/step-1/+page.markdoc b/src/routes/docs/tutorials/nextjs-auth/step-1/+page.markdoc new file mode 100644 index 0000000000..3c2118bd97 --- /dev/null +++ b/src/routes/docs/tutorials/nextjs-auth/step-1/+page.markdoc @@ -0,0 +1,35 @@ +--- +layout: tutorial +title: Getting Started with Appwrite Authentication in Next.js +description: Set up a Next.js project and integrate Appwrite for authentication. +step: 1 +difficulty: beginner +readtime: 15 +--- + +**Welcome to the Appwrite Authentication Deep Dive for Next.js!** +In this tutorial series, you will learn how to build a secure authentication system for your Next.js application using Appwrite. + +{% only_dark %} +![Create project screen](/images/docs/tutorials/dark/idea-tracker.png) +{% /only_dark %} +{% only_light %} +![Create project screen](/images/docs/tutorials/idea-tracker.png) +{% /only_light %} + +# Concepts {% #concepts %} +This tutorial series will cover the following key concepts: + +1. Setting up a Next.js project. +2. Integrating Appwrite for authentication. +3. User sign-up and login workflows. +4. Email verification and password recovery. +5. Managing user preferences and account deletion. + +# Prerequisites {% #prerequisites %} +Before you begin, make sure you have the following prerequisites: + +1. Basic knowledge of JavaScript and Next.js. +2. Node.js and NPM installed on your computer. You can download them from [Node.js website](https://nodejs.org/en/). + +Let's get started with setting up your Next.js project and integrating Appwrite for authentication! diff --git a/src/routes/docs/tutorials/nextjs-auth/step-2/+page.markdoc b/src/routes/docs/tutorials/nextjs-auth/step-2/+page.markdoc new file mode 100644 index 0000000000..9574ef4f4f --- /dev/null +++ b/src/routes/docs/tutorials/nextjs-auth/step-2/+page.markdoc @@ -0,0 +1,27 @@ +--- +layout: tutorial +title: Create app +description: Create a SvelteKit app project using Appwrite. +step: 2 +--- + +# Create a Nextjs project {% #create-nextjs-project %} + +Create a Nextjs app with the `npm create` command and select `Skeleton project` + +```sh +npx create-next-app@latest && cd my-app +``` + +# Add dependencies +Install the JavaScript Appwrite SDK. + +```sh +npm install appwrite +``` + +You can start the development server to watch your app update in the browser as you make changes. + +```sh +npm run dev -- --open --port 3000 +``` \ No newline at end of file