diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
index bd745cb610b..dd47ce758bd 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
@@ -10,7 +10,7 @@ export const meta = {
 
 This submodule provides convenience helpers for implementing user authentication in Next.js applications using the pages directory.
 
-> Note: As of [Next.js 13.4](https://nextjs.org/blog/next-13-4), the App Router has reached stable status. Check out our guide on using [Auth Helpers with the Next.js App Directory](/docs/guides/auth/auth-helpers/nextjs).
+> Note: As of [Next.js 13.4](https://nextjs.org/blog/next-13-4), the App Router has reached stable status. This is now the recommended path for new Next.js app. Check out our guide on using [Auth Helpers with the Next.js App Directory](/docs/guides/auth/auth-helpers/nextjs).
 
 ## Install the Next.js helper library
 
@@ -63,8 +63,8 @@ yarn add @supabase/auth-helpers-react
 Retrieve your project URL and anon key in your project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
 
 ```bash title=.env.local
-NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
-NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
 ```
 
 ## Basic Setup
@@ -80,13 +80,13 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
 Wrap your `pages/_app.js` component with the `SessionContextProvider` component:
 
 ```jsx title=pages/_app.js
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider } from '@supabase/auth-helpers-react'
 import { useState } from 'react'
 
 function MyApp({ Component, pageProps }) {
   // Create a new supabase browser client on every first render.
-  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
+  const [supabaseClient] = useState(() => createPagesBrowserClient())
 
   return (
     <SessionContextProvider
@@ -105,7 +105,7 @@ function MyApp({ Component, pageProps }) {
 Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component:
 
 ```tsx lines=2,8 title=pages/_app.tsx
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
 import { SessionContextProvider, Session } from '@supabase/auth-helpers-react'
 import { useState } from 'react'
 
@@ -116,7 +116,7 @@ function MyApp({
   initialSession: Session
 }>) {
   // Create a new supabase browser client on every first render.
-  const [supabaseClient] = useState(() => createBrowserSupabaseClient())
+  const [supabaseClient] = useState(() => createPagesBrowserClient())
 
   return (
     <SessionContextProvider
@@ -143,10 +143,10 @@ You can pass types that were [generated with the Supabase CLI](/docs/reference/j
 Creating a new supabase client object:
 
 ```tsx
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs'
 import { Database } from '../database.types'
 
-const supabaseClient = createBrowserSupabaseClient<Database>()
+const supabaseClient = createPagesBrowserClient<Database>()
 ```
 
 Retrieving a supabase client object from the SessionContext:
@@ -162,12 +162,12 @@ const supabaseClient = useSupabaseClient<Database>()
 
 ```tsx
 // Creating a new supabase server client object (e.g. in API route):
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { Database } from 'types_db'
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const supabaseServerClient = createServerSupabaseClient<Database>({
+  const supabaseServerClient = createPagesServerClient<Database>({
     req,
     res,
   })
@@ -233,7 +233,7 @@ export default LoginPage
 Create a server supabase client to retrieve the logged in user's session:
 
 ```jsx title=pages/profile.js
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 
 export default function Profile({ user }) {
   return <div>Hello {user.name}</div>
@@ -241,7 +241,7 @@ export default function Profile({ user }) {
 
 export const getServerSideProps = async (ctx) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient(ctx)
+  const supabase = createPagesServerClient(ctx)
   // Check if we have a session
   const {
     data: { session },
@@ -277,7 +277,7 @@ You can use the server supabase client to run [row level security](/docs/learn/a
 <TabPanel id="js" label="JavaScript">
 
 ```jsx
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 
 export default function ProtectedPage({ user, data }) {
   return (
@@ -291,7 +291,7 @@ export default function ProtectedPage({ user, data }) {
 
 export const getServerSideProps = async (ctx) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient(ctx)
+  const supabase = createPagesServerClient(ctx)
   // Check if we have a session
   const {
     data: { session },
@@ -322,7 +322,7 @@ export const getServerSideProps = async (ctx) => {
 <TabPanel id="ts" label="TypeScript">
 
 ```tsx
-import { User, createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { User, createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 import { GetServerSidePropsContext } from 'next'
 
 export default function ProtectedPage({ user, data }: { user: User; data: any }) {
@@ -337,7 +337,7 @@ export default function ProtectedPage({ user, data }: { user: User; data: any })
 
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient(ctx)
+  const supabase = createPagesServerClient(ctx)
   // Check if we have a session
   const {
     data: { session },
@@ -380,7 +380,7 @@ When using third-party auth providers, sessions are initiated with an additional
 <TabPanel id="js" label="JavaScript">
 
 ```jsx
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 
 export default function ProtectedPage({ user, allRepos }) {
   return (
@@ -396,7 +396,7 @@ export default function ProtectedPage({ user, allRepos }) {
 
 export const getServerSideProps = async (ctx) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient(ctx)
+  const supabase = createPagesServerClient(ctx)
   // Check if we have a session
   const {
     data: { session },
@@ -431,7 +431,7 @@ export const getServerSideProps = async (ctx) => {
 <TabPanel id="ts" label="TypeScript">
 
 ```tsx
-import { User, createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { User, createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 import { GetServerSidePropsContext } from 'next'
 
 export default function ProtectedPage({ user, allRepos }: { user: User; allRepos: any }) {
@@ -448,7 +448,7 @@ export default function ProtectedPage({ user, allRepos }: { user: User; allRepos
 
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient(ctx)
+  const supabase = createPagesServerClient(ctx)
   // Check if we have a session
   const {
     data: { session },
@@ -495,11 +495,11 @@ Create a server supabase client to retrieve the logged in user's session:
 <TabPanel id="js" label="JavaScript">
 
 ```jsx title=pages/api/protected-route.js
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 
 const ProtectedRoute = async (req, res) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient({ req, res })
+  const supabase = createPagesServerClient({ req, res })
   // Check if we have a session
   const {
     data: { session },
@@ -524,11 +524,11 @@ export default ProtectedRoute
 
 ```tsx title=pages/api/protected-route.ts
 import { NextApiHandler } from 'next'
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 
 const ProtectedRoute: NextApiHandler = async (req, res) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient({ req, res })
+  const supabase = createPagesServerClient({ req, res })
   // Check if we have a session
   const {
     data: { session },
@@ -556,7 +556,7 @@ export default ProtectedRoute
 As an alternative to protecting individual pages you can use a [Next.js Middleware](https://nextjs.org/docs/middleware) to protect the entire directory or those that match the config object. In the following example, all requests to `/middleware-protected/*` will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected:
 
 ```ts title=middleware.ts
-import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
@@ -564,7 +564,7 @@ export async function middleware(req: NextRequest) {
   // We need to create a response and hand it to the supabase client to be able to modify the response headers.
   const res = NextResponse.next()
   // Create authenticated Supabase Client.
-  const supabase = createMiddlewareSupabaseClient({ req, res })
+  const supabase = createMiddlewareClient({ req, res })
   // Check if we have a session
   const {
     data: { session },
@@ -600,7 +600,7 @@ Please follow the steps below to update your API routes, pages, and middleware h
 
 #### `withApiAuth` deprecated!
 
-Use `createServerSupabaseClient` within your `NextApiHandler`:
+Use `createPagesServerClient` within your `NextApiHandler`:
 
 <Tabs
   scrollable
@@ -625,11 +625,11 @@ export default withApiAuth(async function ProtectedRoute(req, res, supabase) {
 
 ```tsx title=pages/api/protected-route.ts
 import { NextApiHandler } from 'next'
-import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'
 
 const ProtectedRoute: NextApiHandler = async (req, res) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient({ req, res })
+  const supabase = createPagesServerClient({ req, res })
   // Check if we have a session
   const {
     data: { session },
@@ -654,7 +654,7 @@ export default ProtectedRoute
 
 #### `withPageAuth` deprecated!
 
-Use `createServerSupabaseClient` within `getServerSideProps`:
+Use `createPagesServerClient` within `getServerSideProps`:
 
 <Tabs
   scrollable
@@ -678,7 +678,7 @@ export const getServerSideProps = withPageAuth({ redirectTo: '/' })
 <TabPanel id="after" label="After">
 
 ```tsx title=pages/profile.js
-import { createServerSupabaseClient, User } from '@supabase/auth-helpers-nextjs'
+import { createPagesServerClient, User } from '@supabase/auth-helpers-nextjs'
 import { GetServerSidePropsContext } from 'next'
 
 export default function Profile({ user }: { user: User }) {
@@ -687,7 +687,7 @@ export default function Profile({ user }: { user: User }) {
 
 export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
   // Create authenticated Supabase Client
-  const supabase = createServerSupabaseClient(ctx)
+  const supabase = createPagesServerClient(ctx)
   // Check if we have a session
   const {
     data: { session },
@@ -745,7 +745,7 @@ export const config = {
 <TabPanel id="after" label="After">
 
 ```tsx title=middleware.ts
-import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
 import { NextResponse } from 'next/server'
 import type { NextRequest } from 'next/server'
 
@@ -753,7 +753,7 @@ export async function middleware(req: NextRequest) {
   // We need to create a response and hand it to the supabase client to be able to modify the response headers.
   const res = NextResponse.next()
   // Create authenticated Supabase Client.
-  const supabase = createMiddlewareSupabaseClient({ req, res })
+  const supabase = createMiddlewareClient({ req, res })
   // Check if we have a session
   const {
     data: { session },
@@ -797,19 +797,19 @@ The `/api/auth/logout` API route has been removed, please use the `signout` meth
 </button>
 ```
 
-The `supabaseClient` and `supabaseServerClient` have been removed in favor of the `createBrowserSupabaseClient` and `createServerSupabaseClient` methods. This allows you to provide the CLI-generated types to the client:
+The `supabaseClient` and `supabaseServerClient` have been removed in favor of the `createPagesBrowserClient` and `createPagesServerClient` methods. This allows you to provide the CLI-generated types to the client:
 
 ```tsx
 // client-side
 import type { Database } from 'types_db'
-const [supabaseClient] = useState(() => createBrowserSupabaseClient<Database>())
+const [supabaseClient] = useState(() => createPagesBrowserClient<Database>())
 
 // server-side API route
 import type { NextApiRequest, NextApiResponse } from 'next'
 import type { Database } from 'types_db'
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const supabaseServerClient = createServerSupabaseClient<Database>({
+  const supabaseServerClient = createPagesServerClient<Database>({
     req,
     res,
   })
@@ -830,7 +830,7 @@ Creating a new supabase client object:
 ```tsx
 import { Database } from '../database.types'
 
-const [supabaseClient] = useState(() => createBrowserSupabaseClient<Database>())
+const [supabaseClient] = useState(() => createPagesBrowserClient<Database>())
 ```
 
 Retrieving a supabase client object from the SessionContext: