feat: update nextjs server actions with getAccessToken (#755)

Author: wangsijie

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

@@ -3,6 +3,8 @@ import AssumingUrl from '../../fragments/_web-assuming-url.mdx';
 import WebConfigureRedirectUris from '../../fragments/_web-configure-redirect-uris.mdx';
 import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx';
 
+import ServerActionsTip from './_server-actions-tip.mdx';
+
 ### Prepare configs
 
 Prepare configuration for the Logto client:
@@ -102,6 +104,8 @@ Remember to add `'use client'` to the top of the file to indicate that these com
 
 #### Add buttons to home page
 
+<ServerActionsTip />
+
 Now let's add the sign-in and sign-out buttons in your hoem page. We need to call the server actions in SDK when needed. To help with this, use `getLogtoContext` to fetch authentication status.
 
 ```tsx title="app/page.tsx"

docs/quick-starts/framework/next-app-router/_server-actions-tip.mdx

@@ -0,0 +1,3 @@
+:::note
+It is not allowed to define inline "use server" annotated Server Actions in Client Components. We have to pass it down through props from a Server Component.
+:::

docs/quick-starts/framework/next-app-router/api-resources/_fetch-access-token-for-api-resources.mdx

@@ -1,6 +1,6 @@
 import FetchAccessTokenForApiResources from '../../../fragments/_fetch-access-token-for-api-resources.mdx';
 
-import GetAccessTokenCode from './code/_get-access-token-code.md';
+import GetAccessTokenCode from './code/_get-access-token-code.mdx';
 
 <FetchAccessTokenForApiResources
   getAccessTokenApi="getAccessToken"

docs/quick-starts/framework/next-app-router/api-resources/_fetch-organization-token-for-user.mdx

@@ -1,7 +1,7 @@
 import FetchOrganizationTokenForUser from '../../../fragments/_fetch-organization-token-for-user.mdx';
 
 import ConfigOrganizationCode from './code/_config-organization-code.md';
-import GetOrganizationAccessTokenCode from './code/_get-organization-access-token-code.md';
+import GetOrganizationAccessTokenCode from './code/_get-organization-access-token-code.mdx';
 
 <FetchOrganizationTokenForUser
   organizationScope="UserScope.Organizations"

docs/quick-starts/framework/next-app-router/api-resources/code/_get-access-token-code.md

@@ -0,0 +1,46 @@
+import ServerActionsTip from '../../_server-actions-tip.mdx';
+
+<ServerActionsTip />
+
+```tsx title="app/page.ts"
+import { getAccessToken } from '@logto/next/server-actions';
+import { logtoConfig } from './logto';
+import GetAccessToken from './get-access-token';
+
+export default async function Home() {
+  return (
+    <main>
+      <GetAccessToken
+        onGetAccessToken={async () => {
+          'use server';
+
+          return getAccessToken(logtoConfig, 'https://shopping.your-app.com/api');
+        }}
+      />
+    </main>
+  );
+}
+```
+
+```tsx title="app/get-access-token.ts"
+'use client';
+
+type Props = {
+  onGetAccessToken: () => Promise<string>;
+};
+
+const GetAccessToken = ({ onGetAccessToken }: Props) => {
+  return (
+    <button
+      onClick={async () => {
+        const token = await onGetAccessToken();
+        console.log(token);
+      }}
+    >
+      Get access token (see console log)
+    </button>
+  );
+};
+
+export default GetAccessToken;
+```

docs/quick-starts/framework/next-app-router/api-resources/code/_get-access-token-code.mdx

@@ -0,0 +1,46 @@
+import ServerActionsTip from '../../_server-actions-tip.mdx';
+
+<ServerActionsTip />
+
+```tsx title="app/page.ts"
+import { getOrganizationToken } from '@logto/next/server-actions';
+import { logtoConfig } from './logto';
+import GetOrganizationToken from './get-organization-token';
+
+export default async function Home() {
+  return (
+    <main>
+      <GetOrganizationToken
+        onGetOrganizationToken={async () => {
+          'use server';
+
+          return getOrganizationToken(logtoConfig, 'organization-id');
+        }}
+      />
+    </main>
+  );
+}
+```
+
+```tsx title="app/get-organization-token.ts"
+'use client';
+
+type Props = {
+  onGetOrganizationToken: () => Promise<string>;
+};
+
+const GetOrganizationToken = ({ onGetOrganizationToken }: Props) => {
+  return (
+    <button
+      onClick={async () => {
+        const token = await onGetOrganizationToken();
+        console.log(token);
+      }}
+    >
+      Get organization token (see console log)
+    </button>
+  );
+};
+
+export default GetOrganizationToken;
+```