diff --git a/docs/quick-starts/assets/next-auth-redirect-uri.png b/docs/quick-starts/assets/next-auth-redirect-uri.png
new file mode 100644
index 00000000000..a7cac8fd8a0
Binary files /dev/null and b/docs/quick-starts/assets/next-auth-redirect-uri.png differ
diff --git a/docs/quick-starts/framework/next-auth/README.mdx b/docs/quick-starts/framework/next-auth/README.mdx
new file mode 100644
index 00000000000..e1763c74008
--- /dev/null
+++ b/docs/quick-starts/framework/next-auth/README.mdx
@@ -0,0 +1,43 @@
+---
+slug: /quick-starts/next-auth
+sidebar_label: Next Auth
+sidebar_custom_props:
+ logoFilename: 'next-auth.svg'
+ description: Authentication for Next.js.
+---
+
+import FurtherReadings from '../../fragments/_further-readings.md';
+
+import ConfigProvider from './_config-provider.mdx';
+import GuideTip from './_guide-tip.mdx';
+import ScopesAndClaims from './_scopes-and-claims.mdx';
+
+# Next Auth guide
+
+This guide will show you how to integrate Logto into your Next.js application with [Next Auth](https://next-auth.js.org/).
+
+
+
+## Prerequisites
+
+- A [Logto Cloud](https://cloud.logto.io) account or a self-hosted Logto (Check out the [⚡ Get started](../../../docs/tutorials/get-started/) guide to create one if you don't have).
+- A Logto traditional application created.
+- A Next.js project with Next Auth, check out the [Next Auth documentation](https://next-auth.js.org/getting-started/introduction).
+
+## Integration
+
+### Config Next Auth provider
+
+
+
+### Checkpoint
+
+Now, you can test your application to see if the authentication works as expected.
+
+## Scopes and claims
+
+
+
+## Further readings
+
+
diff --git a/docs/quick-starts/framework/next-auth/_config-provider.mdx b/docs/quick-starts/framework/next-auth/_config-provider.mdx
new file mode 100644
index 00000000000..78aa89a7efe
--- /dev/null
+++ b/docs/quick-starts/framework/next-auth/_config-provider.mdx
@@ -0,0 +1,63 @@
+import redirectUriFigure from '../../assets/next-auth-redirect-uri.png';
+import ConfigureRedirectUri from '../../fragments/_configure-redirect-uri.mdx';
+import GetAppSecret from '../../fragments/_get-app-secret.mdx';
+import AssumingUrl from '../../fragments/_web-assuming-url.md';
+import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx';
+
+
+
+
+
+#### Configure sign-in redirect URI
+
+
+
+#### Config Next Auth provider
+
+
+
+Modify your API route config of Next Auth, if you are using Pages Router, the file is in `pages/api/auth/[...nextauth].js`, if you are using App Router, the file is in `app/api/auth/[...nextauth]/router.ts`.
+
+The following is an example of App Router:
+
+```ts
+import NextAuth from 'next-auth';
+
+const handler = NextAuth({
+ providers: [
+ {
+ id: 'logto',
+ name: 'Logto',
+ type: 'oauth',
+ // You can get the well-known URL from the Logto Application Details page,
+ // in the field "OpenID Provider configuration endpoint"
+ wellKnown: 'https://xxxx.logto.app/oidc/.well-known/openid-configuration',
+ authorization: { params: { scope: 'openid offline_access profile email' } },
+ clientId: '',
+ clientSecret: '',
+ client: {
+ id_token_signed_response_alg: 'ES384',
+ },
+ profile(profile) {
+ // You can customize the user profile mapping here
+ return {
+ id: profile.sub,
+ name: profile.name ?? profile.username,
+ email: profile.email,
+ image: profile.picture,
+ };
+ },
+ },
+ ],
+});
+
+export { handler as GET, handler as POST };
+```
+
+1. Replace the `wellKnown` URL with your Logto application's "OpenID Provider configuration endpoint".
+2. Replace the `clientId` and `clientSecret` with your Logto application's ID and secret.
+3. Customize the `profile` function to map the user profile to the Next Auth user object, the default mapping is shown in the example.
+4. Remember to set the `id_token_signed_response_alg` to `ES384`.
diff --git a/docs/quick-starts/framework/next-auth/_guide-tip.mdx b/docs/quick-starts/framework/next-auth/_guide-tip.mdx
new file mode 100644
index 00000000000..e045494c941
--- /dev/null
+++ b/docs/quick-starts/framework/next-auth/_guide-tip.mdx
@@ -0,0 +1,5 @@
+:::tip
+
+- In this guide, we assume you have set up Next Auth in your Next.js project. If you haven't, check out the [Next Auth documentation](https://next-auth.js.org/getting-started/introduction) to get started.
+
+:::
diff --git a/docs/quick-starts/framework/next-auth/_scopes-and-claims-code.md b/docs/quick-starts/framework/next-auth/_scopes-and-claims-code.md
new file mode 100644
index 00000000000..ddf7ae41225
--- /dev/null
+++ b/docs/quick-starts/framework/next-auth/_scopes-and-claims-code.md
@@ -0,0 +1,13 @@
+```ts
+const handler = NextAuth({
+ providers: [
+ {
+ id: 'logto',
+ name: 'Logto',
+ // ... other options
+ authorization: { params: { scope: 'openid offline_access profile email' } },
+ // ... other options
+ },
+ ],
+});
+```
diff --git a/docs/quick-starts/framework/next-auth/_scopes-and-claims.mdx b/docs/quick-starts/framework/next-auth/_scopes-and-claims.mdx
new file mode 100644
index 00000000000..7c4ba9d1799
--- /dev/null
+++ b/docs/quick-starts/framework/next-auth/_scopes-and-claims.mdx
@@ -0,0 +1,5 @@
+import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
+
+import ScopesAndClaimsCode from './_scopes-and-claims-code.md';
+
+} />
diff --git a/static/img/logo/next-auth.svg b/static/img/logo/next-auth.svg
new file mode 100644
index 00000000000..47b9c27d79a
--- /dev/null
+++ b/static/img/logo/next-auth.svg
@@ -0,0 +1,25 @@
+