diff --git a/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx index 9e057d559..705942720 100644 --- a/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx +++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/next.mdx @@ -54,7 +54,7 @@ Import and initialize LogtoClient: 
 
 {`// libraries/logto.js
-import { LogtoProvider, LogtoConfig } from '@logto/next';
+import LogtoClient from '@logto/next';
 
 export const logtoClient = new LogtoClient({
   endpoint: '${props.endpoint}',
@@ -88,14 +88,12 @@ Prepare [API routes](https://nextjs.org/docs/api-routes/introduction) to connect
 
 Go back to your IDE/editor, use the following code to implement the API routes first:
 
-
-
-{`// pages/api/logto/[action].ts
+```ts
+// pages/api/logto/[action].ts
 import { logtoClient } from '../../../libraries/logto';
 
-export default logtoClient.handleAuthRoutes();`}
-
-

+export default logtoClient.handleAuthRoutes();
+```
 
 This will create 4 routes automatically:
 
@@ -179,35 +177,84 @@ Check [Next.js documentation](https://nextjs.org/docs/basic-features/data-fetchi
 
 
  props.onNext(5)}
 >
 
-Calling `.signOut()` will clear all the Logto data in memory and cookies if they exist.
+### Protect API routes
 
-After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below before calling `api/logto/sign-out`.
+Wrap your handler with `logtoClient.withLogtoApiRoute`.
+
+```ts
+// pages/api/protected-resource.ts
+import { logtoClient } from '../../libraries/logto';
+
+export default logtoClient.withLogtoApiRoute((request, response) => {
+  if (!request.user.isAuthenticated) {
+    response.status(401).json({ message: 'Unauthorized' });
+
+    return;
+  }
+
+  response.json({
+    data: 'this_is_protected_resource',
+  });
+});
+```
+
+### Protect pages
+
+If you don't want anonymous users to access a page, use `logtoClient.withLogtoSsr` to get auth state, and redirect to sign-in route if not authenticated.
+
+```ts
+export const getServerSideProps = logtoClient.withLogtoSsr(async function ({ req, res }) {
+  const { user } = req;
+
+  if (!user.isAuthenticated) {
+    res.setHeader('location', '/api/logto/sign-in');
+    res.statusCode = 302;
+    res.end();
+  }
+
+  return {
+    props: { user },
+  };
+});
+```
+
+
+
+ props.onNext(6)}
+>
+
+Calling `/api/logto/sign-out` will clear all the Logto data in memory and cookies if they exist.
+
+After signing out, it'll be great to redirect user back to your website. Let's add `http://localhost:3000` as the Post Sign-out URI below before calling `/api/logto/sign-out`.
 
 
 
 ### Implement a sign-out button
 
-
-
-{``}
-
-

+
+```
 
 
 
 
 
 {`// libraries/logto.js
-import { LogtoProvider, LogtoConfig } from '@logto/next';
+import LogtoClient from '@logto/next';
 
 export const logtoClient = new LogtoClient({
   endpoint: '${props.endpoint}',
@@ -88,21 +88,19 @@ export const logtoClient = new LogtoClient({
 
 返回你的 IDE 或编辑器，首先让我们使用如下代码来实现一组 API 路由：
 
-
-
-{`// pages/api/logto/[action].ts
+```ts
+// pages/api/logto/[action].ts
 import { logtoClient } from '../../../libraries/logto';
 
-export default logtoClient.handleAuthRoutes();`}
-
-

+export default logtoClient.handleAuthRoutes();
+```
 
 这将为你自动创建好 4 个路由，分别是：
 
 1. `/api/logto/sign-in`：登录
 2. `/api/logto/sign-in-callback`：处理登录重定向
 3. `/api/logto/sign-out`：登出
-4. `/api/logto/user`：检查用户是否以登录到 Logto。如果是，则返回用户信息。
+4. `/api/logto/user`：检查用户是否已通过 Logto 获得授权。如果是，则返回用户信息。
 
 ### 实现登录按钮
 
@@ -179,35 +177,84 @@ export const getServerSideProps = logtoClient.withLogtoSsr(({ request }) => {
 
 
  props.onNext(5)}
 >
 
-调用 `.signOut()` 将清理内存与 cookies 中的所有 Logto 数据（如果有）。
+### 保护 API 路由
 
-在退出登录后，让你的用户重新回到你的网站是个不错的选择。在调用 `api/logto/sign-out` 发起退出登录操作之前，让我们先将 `http://localhost:3000` 添加至下面的输入框。
+使用 `logtoClient.withLogtoApiRoute` 来包裹 API 逻辑：
+
+```ts
+// pages/api/protected-resource.ts
+import { logtoClient } from '../../libraries/logto';
+
+export default logtoClient.withLogtoApiRoute((request, response) => {
+  if (!request.user.isAuthenticated) {
+    response.status(401).json({ message: '未授权' });
+
+    return;
+  }
+
+  response.json({
+    data: '这是受保护的 API 资源',
+  });
+});
+```
+
+### 保护页面
+
+如果你不想匿名用户访问你的某个页面，你可以使用 `logtoClient.withLogtoSsr` 来获取登录认证状态，如未登录则自动跳转到登录页面。
+
+```ts
+export const getServerSideProps = logtoClient.withLogtoSsr(async function ({ request, response }) {
+  const { user } = request;
+
+  if (!user.isAuthenticated) {
+    response.setHeader('location', '/api/logto/sign-in');
+    response.statusCode = 302;
+    response.end();
+  }
+
+  return {
+    props: { user },
+  };
+});
+```
+
+
+
+ props.onNext(6)}
+>
+
+调用 `/api/logto/sign-out` 将清理内存与 cookies 中的所有 Logto 数据（如果有）。
+
+在退出登录后，让你的用户重新回到你的网站是个不错的选择。在调用 `/api/logto/sign-out` 发起退出登录操作之前，让我们先将 `http://localhost:3000` 添加至下面的输入框。
 
 
 
 ### 实现退出登录按钮
 
-
-
-{``}
-
-

+
+```