refactor: update next.js quick starts

docs/quick-starts/fragments/_claims-need-network-request.mdx

@@ -22,7 +22,7 @@ To prevent bloating the user object, some claims require network requests to fet
   By configuring <code>{props.configOption}</code>, the SDK will fetch the user information by
   requesting to the{' '}
   <a href="https://openid.net/specs/openid-connect-core-1_0.html#UserInfo">userinfo endpoint</a>{' '}
-  after the user is signed in, and `user.custom_data` will be available once the request is
-  completed.
+  after the user is signed in, and <code>{props.value ?? 'user.custom_data'}</code> will be
+  available once the request is completed.
 </>
 )}

docs/quick-starts/fragments/_npm-like-installation.mdx

@@ -0,0 +1,32 @@
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+
+{props.packageName ? null : (() => {throw new Error(`props.packageName is required when importing _npm_like_installation.mdx`)})()}
+
+Install Logto SDK via your favorite package manager:
+
+<Tabs>
+
+<TabItem value="npm" label="npm">
+
+<pre>
+  <code className="language-bash">npm i {props.packageName}</code>
+</pre>
+
+</TabItem>
+<TabItem value="pnpm" label="pnpm">
+
+<pre>
+  <code className="language-bash">pnpm add {props.packageName}</code>
+</pre>
+
+</TabItem>
+<TabItem value="yarn" label="Yarn">
+
+<pre>
+  <code className="language-bash">yarn add {props.packageName}</code>
+</pre>
+
+</TabItem>
+
+</Tabs>

docs/quick-starts/fragments/_web-configure-redirect-uris.mdx

@@ -4,7 +4,7 @@ import redirectUriFigure from '../assets/web-redirect-uri.png';
 
 #### Configure redirect URIs
 
-Switch to the application details page of Logto Console. Add a Redirect URI `http://localhost:3000/callback`.
+Switch to the application details page of Logto Console. Add a Redirect URI <code>{props.redirectUri ?? 'http://localhost:3000/callback'}</code>.
 
 <img alt="Redirect URI in Logto Console" src={redirectUriFigure} width="600px" />
 

docs/quick-starts/framework/next-app-router/README.mdx

@@ -1,60 +1,42 @@
 ---
 slug: /quick-starts/next-app-router
-sidebar_label: Next.js App Router
+sidebar_label: Next.js (App Router)
 sidebar_custom_props:
   logoFilename: 'next.svg'
   description: Next.js App Router is a new paradigm for building applications using React's latest features.
 ---
 
 import ApiResourcesDescription from '../../fragments/_api-resources-description.md';
-import Checkpoint from '../../fragments/_checkpoint-test-your-application.md';
 import FurtherReadings from '../../fragments/_further-readings.md';
 import Installation from '../next/_installation.mdx';
 
+import GetUserInformation from './_get-user-information.mdx';
 import GuideTip from './_guide-tip.mdx';
-import HandleAuthenticationStatus from './_handle-authentication-status.mdx';
-import ImplementSignIn from './_implement-sign-in.mdx';
-import ImplementSignOut from './_implement-sign-out.mdx';
-import PrepareConfigs from './_prepare-configs.mdx';
+import Integration from './_integration.mdx';
 import ConfigApiResources from './api-resources/_config-api-resources.mdx';
 import FetchAccessTokenForApiResources from './api-resources/_fetch-access-token-for-api-resources.mdx';
 import FetchOrganizationTokenForUser from './api-resources/_fetch-organization-token-for-user.mdx';
 
-# Next.js SDK for App Router guide
-
-This guide will show you how to integrate Logto into your Next.js App Router application.
+# Integrate Logto with Next.js (App Router)
 
 <GuideTip />
 
 ## 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 App Router.
 
 ## Installation
 
 <Installation />
 
 ## Integration
 
-### Prepare configs
-
-<PrepareConfigs />
-
-### Implement sign-in
-
-<ImplementSignIn />
-
-### Implement sign-out
-
-<ImplementSignOut />
-
-### Handle authentication status
+<Integration />
 
-<HandleAuthenticationStatus />
+## Fetch user information
 
-<Checkpoint />
+<GetUserInformation />
 
 ## API resources
 

docs/quick-starts/framework/next-app-router/_get-user-information.mdx

@@ -0,0 +1,101 @@
+import CodeBlock from '@theme/CodeBlock';
+
+import ClaimsNeedNetworkRequest from '../../fragments/_claims-need-network-request.mdx';
+import FindUserInfoMissing from '../../fragments/_find-user-info-missing.mdx';
+import ScopesAndClaims from '../../fragments/_scopes-and-claims.mdx';
+import ScopesAndClaimsIntroduction from '../../fragments/_scopes-claims-introduction.md';
+
+### Display user information
+
+When user is signed in, the return value of `getLogtoContext()` will be an object containing the user's information. You can display this information in your app:
+
+```tsx title="app/page.tsx"
+import { getLogtoContext } from '@logto/next/server-actions';
+import { logtoConfig } from './logto';
+
+export default async function Home() {
+  const { claims } = await getLogtoContext(logtoConfig);
+
+  return (
+    <main>
+      {claims && (
+        <div>
+          <h2>Claims:</h2>
+          <table>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(claims).map(([key, value]) => (
+                <tr key={key}>
+                  <td>{key}</td>
+                  <td>{String(value)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </main>
+  );
+}
+```
+
+### Request additional claims
+
+<FindUserInfoMissing method="getLogtoContext" />
+
+<ScopesAndClaimsIntroduction />
+
+To request additional scopes, you can configure the params when init the Logto client:
+
+```ts title="app/logto.ts"
+import { UserScope, LogtoNextConfig } from '@logto/next';
+
+export const logtoConfig: LogtoNextConfig = {
+  // highlight-next-line
+  scopes: [UserScope.Email, UserScope.Phone], // Add more scopes if needed
+  // ...other configs
+});
+```
+
+Then you can access the additional claims in the context response:
+
+```ts title="app/page.tsx"
+export default async function Home() {
+  const { claims: { email } = {}, } = await getLogtoContext(logtoConfig);
+
+  return (
+    <div>
+      {email && <p>Email: {email}</p>}
+    </div>
+  );
+};
+
+export default Home;
+```
+
+<ClaimsNeedNetworkRequest
+  type="option"
+  configOption="fetchUserInfo"
+  value="userInfo"
+  codeSnippet={
+    <CodeBlock language="ts" title="app/page.tsx">{`export default async function Home() {
+  const { userInfo } = await getLogtoContext(logtoConfig, { fetchUserInfo: true });
+  return (
+    <div>
+      {userInfo && <p>Email: {userInfo.email}</p>}
+    </div>
+  );
+};
+
+export default Home;`}</CodeBlock>
+  }
+/>
+
+### Scopes and claims
+
+<ScopesAndClaims />