Merge pull request #729 from supertokens/next-app-dir

Add next app dir docs for thirdpartyemailpassword

v2/emailpassword/nextjs/app-directory/about.mdx

@@ -0,0 +1,65 @@
+---
+id: about
+title: About
+hide_title: true
+show_ui_switcher: true
+---
+
+<!-- COPY DOCS -->
+<!-- ./thirdpartyemailpassword/nextjs/app-directory/about.mdx -->
+
+import {PreBuiltOrCustomUISwitcher, PreBuiltUIContent, CustomUIContent} from "/src/components/preBuiltOrCustomUISwitcher"
+
+<PreBuiltOrCustomUISwitcher>
+
+<PreBuiltUIContent>
+
+# Overview steps
+
+Integrating SuperTokens with a Next.js app involves:
+- Calling the frontend and backend init functions
+- Adding a website page to display the auth related widgets (on `/auth` by default)
+- Creating a serverless function to expose the auth related APIs which will be consumed by the frontend widgets (on `/api/auth/` by default)
+- Protecting website routes: Displaying them only when a user is logged in, else redirecting them to the login page
+- Performing session verification:
+    - In your APIs
+    - In your frontend routes
+
+## Try an example app
+Download and run an example NextJS app quickly using the following command:
+
+```bash
+npx create-supertokens-app@latest --frontend=next --recipe=^{codeImportRecipeName}
+```
+
+</PreBuiltUIContent>
+
+<CustomUIContent>
+
+# Overview steps
+
+Integrating SuperTokens with a Next.js app involves:
+- Calling the frontend and backend init functions
+- Building the various auth flows as per the [custom UI setup guide](../custom-ui/init/frontend).
+- Creating a serverless function to expose the auth related APIs which will be consumed by the frontend widgets (on `/api/auth/` by default)
+- Protecting website routes: Displaying them only when a user is logged in, else redirecting them to the login page
+- Performing session verification:
+    - In your APIs
+    - In your frontend routes
+
+## Try an example app
+
+Download and run an example NextJS app quickly using the following command:
+
+```bash
+npx create-supertokens-app@latest --frontend=next --recipe=^{codeImportRecipeName}
+```
+
+:::note
+This example app uses our pre built UI
+:::
+
+
+</CustomUIContent>
+
+</PreBuiltOrCustomUISwitcher>