diff --git a/articles/quickstart/webapp/nextjs/01-login.md b/articles/quickstart/webapp/nextjs/01-login.md
index fca09747b7..80cb7b4656 100644
--- a/articles/quickstart/webapp/nextjs/01-login.md
+++ b/articles/quickstart/webapp/nextjs/01-login.md
@@ -26,7 +26,7 @@ Run the following command within your project directory to install the Auth0 Nex
npm install @auth0/nextjs-auth0
```
-The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using [API Routes](https://nextjs.org/docs/api-routes/introduction) on the backend and [React Context](https://reactjs.org/docs/context.html) with [React Hooks](https://reactjs.org/docs/hooks-overview.html) on the frontend.
+The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using [Route Handlers](https://nextjs.org/docs/app/building-your-application/routing/route-handlers) on the backend and [React Context](https://reactjs.org/docs/context.html) with [React Hooks](https://reactjs.org/docs/hooks-overview.html) on the frontend.
### Configure the SDK
@@ -48,17 +48,17 @@ AUTH0_CLIENT_SECRET='${account.clientSecret}'
The SDK will read these values from the Node.js process environment and automatically configure itself.
-### Add the dynamic API route
+### Add the dynamic API route handler
-Create an `auth` directory under the `pages/api` directory. Under this newly created `auth` directory, create a `[auth0].js` file. The path to your [dynamic API route](https://nextjs.org/docs/api-routes/dynamic-api-routes) file should then be `pages/api/auth/[auth0].js`.
+Create a file at `app/api/auth/[auth0]/route.js`. This is your Route Handler file with a [Dynamic Route Segment](https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments).
-Then, import in that file the `handleAuth` method from the SDK, and export the result of calling it.
+Then, import the `handleAuth` method from the SDK, and export the result of calling it from the `GET` export.
```javascript
-// pages/api/auth/[auth0].js
+// app/api/auth/[auth0]/route.js
import { handleAuth } from '@auth0/nextjs-auth0';
-export default handleAuth();
+export const GET = handleAuth();
```
This creates the following routes:
@@ -70,29 +70,26 @@ This creates the following routes:
### Add the `UserProvider` component
-On the frontend side, the SDK uses React Context to manage the authentication state of your users. To make that state available to all your pages, you need to override the [App component](https://nextjs.org/docs/advanced-features/custom-app) and wrap its inner component with a `UserProvider`.
+On the frontend side, the SDK uses React Context to manage the authentication state of your users. To make that state available to all your pages, you need to override the [Root Layout component](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required) and wrap the `` tag with a `UserProvider` in the file `app/layout.jsx`.
-:::note
-Support for the new `app` directory is coming. Check out the [beta release](https://github.com/auth0/nextjs-auth0/issues/1235).
-:::
-
-Create the file `pages/_app.js` as follows:
+Create the file `app/layout.jsx` as follows:
```jsx
-// pages/_app.js
-import React from 'react';
+// app/layout.jsx
import { UserProvider } from '@auth0/nextjs-auth0/client';
-export default function App({ Component, pageProps }) {
+export default function RootLayout({ children }) {
return (
+
-
+ {children}
+
);
}
```
-The authentication state exposed by `UserProvider` can be accessed in any component using the `useUser()` hook.
+The authentication state exposed by `UserProvider` can be accessed in any Client Component using the `useUser()` hook.
:::panel Checkpoint
Now that you have added the dynamic route and `UserProvider`, run your application to verify that your application is not throwing any errors related to Auth0.
@@ -134,13 +131,18 @@ Add the logout link to your application. When you click it, verify that your Nex
## Show User Profile Information
-The Auth0 Next.js SDK helps you retrieve the [profile information](https://auth0.com/docs/users/user-profiles) associated with the logged-in user, such as their name or profile picture, to personalize the user interface. The profile information is available through the `user` property exposed by the `useUser()` hook. Take this `Profile` component as an example of how to use it:
+The Auth0 Next.js SDK helps you retrieve the [profile information](https://auth0.com/docs/users/user-profiles) associated with the logged-in user, such as their name or profile picture, to personalize the user interface.
+
+### From a Client Component
+
+The profile information is available through the `user` property exposed by the `useUser()` hook. Take this [Client Component](https://nextjs.org/docs/getting-started/react-essentials#client-components) as an example of how to use it:
```jsx
-import React from 'react';
+'use client';
+
import { useUser } from '@auth0/nextjs-auth0/client';
-export default function Profile() {
+export default function ProfileClient() {
const { user, error, isLoading } = useUser();
if (isLoading) return Loading...
;
@@ -164,6 +166,28 @@ The `user` property contains sensitive information and artifacts related to the
- Ensure that the SDK has loaded successfully by checking that no `error` was produced.
- Check the `user` property to ensure that Auth0 has authenticated the user before React renders any component that consumes it.
+### From a Server Component
+
+The profile information is available through the `user` property exposed by the `getSession` function. Take this [Server Component](https://nextjs.org/docs/getting-started/react-essentials#server-components) as an example of how to use it:
+
+```jsx
+import { getSession } from '@auth0/nextjs-auth0';
+
+export default async function ProfileServer() {
+ const { user } = await getSession();
+
+ return (
+ user && (
+
+
+
{user.name}
+
{user.email}
+
Loading...
;
diff --git a/articles/quickstart/webapp/nextjs/files/profile-server.md b/articles/quickstart/webapp/nextjs/files/profile-server.md
new file mode 100644
index 0000000000..1f164c403a
--- /dev/null
+++ b/articles/quickstart/webapp/nextjs/files/profile-server.md
@@ -0,0 +1,24 @@
+---
+name: "app/profile-server/page.jsx"
+language: jsx
+---
+
+
+
+```jsx
+import { getSession } from '@auth0/nextjs-auth0';
+
+export default async function ProfileServer() {
+ const { user } = await getSession();
+
+ return (
+ user && (
+
+
+
{user.name}
+
{user.email}
+