Merge pull request #732 from itsmingjie/patch-1

Fix incorrect instructions for Next.js app router

v2/emailpassword/nextjs/app-directory/setting-up-backend.mdx

@@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm"
 
 We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`.
 
-## 1) Create the API folder
-- Be sure to create the `auth` folder in the `app/api/` folder.
-- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`).
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D).
+## 1) Create the `app/api/auth/[[...path]]/route.ts` route
+- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder.
+- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`).
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts).
 
 ## 2) Expose the SuperTokens APIs
 
@@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by
   showNextJSAPIRouteCheckbox
 >
 
-```tsx title="app/api/auth/[[...path]].ts"
+```tsx title="app/api/auth/[[...path]]/route.ts"
 declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output
 import { getAppDirRequestHandler } from 'supertokens-node/nextjs';
 import { NextRequest, NextResponse } from 'next/server';
 // @ts-ignore
-import { ensureSuperTokensInit } from '../../../config/backend';
+import { ensureSuperTokensInit } from '../../../../config/backend';
 
 ensureSuperTokensInit();
 

v2/emailpassword/nextjs/app-directory/setting-up-frontend.mdx

@@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm";
 
 <PreBuiltUIContent>
 
-## 1) Create the `app/auth/[[...path]].tsx` page
-- Be sure to create the `auth` folder in the `app` folder.
-- `[[...path]].tsx` will contain the component for showing SuperTokens UI
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D).
+## 1) Create the `app/auth/[[...path]]/page.tsx` page
+- Be sure to create the `auth/[[...path]]` folder in the `app` folder.
+- `page.tsx` will contain the component for showing SuperTokens UI
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx).
 
 ## 2) Create the `Auth` component:
 
-```tsx title="app/auth/[[...path]].tsx"
+```tsx title="app/auth/[[...path]]/page.tsx"
 'use client';
 
 import { useEffect } from 'react';

v2/passwordless/nextjs/app-directory/setting-up-backend.mdx

@@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm"
 
 We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`.
 
-## 1) Create the API folder
-- Be sure to create the `auth` folder in the `app/api/` folder.
-- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`).
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D).
+## 1) Create the `app/api/auth/[[...path]]/route.ts` route
+- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder.
+- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`).
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts).
 
 ## 2) Expose the SuperTokens APIs
 
@@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by
   showNextJSAPIRouteCheckbox
 >
 
-```tsx title="app/api/auth/[[...path]].ts"
+```tsx title="app/api/auth/[[...path]]/route.ts"
 declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output
 import { getAppDirRequestHandler } from 'supertokens-node/nextjs';
 import { NextRequest, NextResponse } from 'next/server';
 // @ts-ignore
-import { ensureSuperTokensInit } from '../../../config/backend';
+import { ensureSuperTokensInit } from '../../../../config/backend';
 
 ensureSuperTokensInit();
 

v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx

@@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm";
 
 <PreBuiltUIContent>
 
-## 1) Create the `app/auth/[[...path]].tsx` page
-- Be sure to create the `auth` folder in the `app` folder.
-- `[[...path]].tsx` will contain the component for showing SuperTokens UI
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D).
+## 1) Create the `app/auth/[[...path]]/page.tsx` page
+- Be sure to create the `auth/[[...path]]` folder in the `app` folder.
+- `page.tsx` will contain the component for showing SuperTokens UI
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx).
 
 ## 2) Create the `Auth` component:
 
-```tsx title="app/auth/[[...path]].tsx"
+```tsx title="app/auth/[[...path]]/page.tsx"
 'use client';
 
 import { useEffect } from 'react';

v2/thirdparty/nextjs/app-directory/setting-up-backend.mdx

@@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm"
 
 We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`.
 
-## 1) Create the API folder
-- Be sure to create the `auth` folder in the `app/api/` folder.
-- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`).
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D).
+## 1) Create the `app/api/auth/[[...path]]/route.ts` route
+- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder.
+- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`).
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts).
 
 ## 2) Expose the SuperTokens APIs
 
@@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by
   showNextJSAPIRouteCheckbox
 >
 
-```tsx title="app/api/auth/[[...path]].ts"
+```tsx title="app/api/auth/[[...path]]/route.ts"
 declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output
 import { getAppDirRequestHandler } from 'supertokens-node/nextjs';
 import { NextRequest, NextResponse } from 'next/server';
 // @ts-ignore
-import { ensureSuperTokensInit } from '../../../config/backend';
+import { ensureSuperTokensInit } from '../../../../config/backend';
 
 ensureSuperTokensInit();
 

v2/thirdparty/nextjs/app-directory/setting-up-frontend.mdx

@@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm";
 
 <PreBuiltUIContent>
 
-## 1) Create the `app/auth/[[...path]].tsx` page
-- Be sure to create the `auth` folder in the `app` folder.
-- `[[...path]].tsx` will contain the component for showing SuperTokens UI
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D).
+## 1) Create the `app/auth/[[...path]]/page.tsx` page
+- Be sure to create the `auth/[[...path]]` folder in the `app` folder.
+- `page.tsx` will contain the component for showing SuperTokens UI
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx).
 
 ## 2) Create the `Auth` component:
 
-```tsx title="app/auth/[[...path]].tsx"
+```tsx title="app/auth/[[...path]]/page.tsx"
 'use client';
 
 import { useEffect } from 'react';

v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-backend.mdx

@@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm"
 
 We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`.
 
-## 1) Create the API folder
-- Be sure to create the `auth` folder in the `app/api/` folder.
-- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`).
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D).
+## 1) Create the `app/api/auth/[[...path]]/route.ts` route
+- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder.
+- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`).
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts).
 
 ## 2) Expose the SuperTokens APIs
 
@@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by
   showNextJSAPIRouteCheckbox
 >
 
-```tsx title="app/api/auth/[[...path]].ts"
+```tsx title="app/api/auth/[[...path]]/route.ts"
 declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output
 import { getAppDirRequestHandler } from 'supertokens-node/nextjs';
 import { NextRequest, NextResponse } from 'next/server';
 // @ts-ignore
-import { ensureSuperTokensInit } from '../../../config/backend';
+import { ensureSuperTokensInit } from '../../../../config/backend';
 
 ensureSuperTokensInit();
 

v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-frontend.mdx

@@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm";
 
 <PreBuiltUIContent>
 
-## 1) Create the `app/auth/[[...path]].tsx` page
-- Be sure to create the `auth` folder in the `app` folder.
-- `[[...path]].tsx` will contain the component for showing SuperTokens UI
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D).
+## 1) Create the `app/auth/[[...path]]/page.tsx` page
+- Be sure to create the `auth/[[...path]]` folder in the `app` folder.
+- `page.tsx` will contain the component for showing SuperTokens UI
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx).
 
 ## 2) Create the `Auth` component:
 
-```tsx title="app/auth/[[...path]].tsx"
+```tsx title="app/auth/[[...path]]/page.tsx"
 'use client';
 
 import { useEffect } from 'react';

v2/thirdpartypasswordless/nextjs/app-directory/setting-up-backend.mdx

@@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm"
 
 We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`.
 
-## 1) Create the API folder
-- Be sure to create the `auth` folder in the `app/api/` folder.
-- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`).
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D).
+## 1) Create the `app/api/auth/[[...path]]/route.ts` route
+- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder.
+- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`).
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts).
 
 ## 2) Expose the SuperTokens APIs
 
@@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by
   showNextJSAPIRouteCheckbox
 >
 
-```tsx title="app/api/auth/[[...path]].ts"
+```tsx title="app/api/auth/[[...path]]/route.ts"
 declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output
 import { getAppDirRequestHandler } from 'supertokens-node/nextjs';
 import { NextRequest, NextResponse } from 'next/server';
 // @ts-ignore
-import { ensureSuperTokensInit } from '../../../config/backend';
+import { ensureSuperTokensInit } from '../../../../config/backend';
 
 ensureSuperTokensInit();
 

v2/thirdpartypasswordless/nextjs/app-directory/setting-up-frontend.mdx

@@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm";
 
 <PreBuiltUIContent>
 
-## 1) Create the `app/auth/[[...path]].tsx` page
-- Be sure to create the `auth` folder in the `app` folder.
-- `[[...path]].tsx` will contain the component for showing SuperTokens UI
-- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D).
+## 1) Create the `app/auth/[[...path]]/page.tsx` page
+- Be sure to create the `auth/[[...path]]` folder in the `app` folder.
+- `page.tsx` will contain the component for showing SuperTokens UI
+- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx).
 
 ## 2) Create the `Auth` component:
 
-```tsx title="app/auth/[[...path]].tsx"
+```tsx title="app/auth/[[...path]]/page.tsx"
 'use client';
 
 import { useEffect } from 'react';