From c3d7dbebbd42d59359e1500ae711ee5450be9c25 Mon Sep 17 00:00:00 2001 From: charIeszhao <12833674+charIeszhao@users.noreply.github.com> Date: Thu, 13 Nov 2025 12:49:09 +0000 Subject: [PATCH] chore: update translations and generated content --- .../next-app-router/_integration.mdx | 24 +++++++++---------- .../next-app-router/_integration.mdx | 16 ++++++------- .../next-app-router/_integration.mdx | 6 ++--- .../next-app-router/_integration.mdx | 18 +++++++------- .../next-app-router/_integration.mdx | 16 ++++++------- .../next-app-router/_integration.mdx | 16 ++++++------- .../next-app-router/_integration.mdx | 14 +++++------ .../next-app-router/_integration.mdx | 14 +++++------ .../next-app-router/_integration.mdx | 20 +++++++--------- 9 files changed, 63 insertions(+), 81 deletions(-) diff --git a/i18n/de/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/de/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index a1a31b8a2ef..b2119dd2899 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/de/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -5,7 +5,7 @@ import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx'; import ServerActionsTip from './_server-actions-tip.mdx'; -### Konfigurationen vorbereiten \{#prepare-configs} +### Konfiguration vorbereiten \{#prepare-configs} Bereite die Konfiguration für den Logto-Client vor: @@ -15,15 +15,15 @@ import { LogtoNextConfig } from '@logto/next'; export const logtoConfig: LogtoNextConfig = { appId: '', appSecret: '', - endpoint: '', // Z. B. http://localhost:3001 - baseUrl: '', // Z. B. http://localhost:3000 + endpoint: '', // Z.B. http://localhost:3001 + baseUrl: '', // Z.B. http://localhost:3000 cookieSecret: 'complex_password_at_least_32_characters_long', cookieSecure: process.env.NODE_ENV === 'production', }; ``` **Hinweis:** -Wenn du eine Umgebungsvariable für `cookieSecret` verwendest (z. B. `process.env.LOGTO_COOKIE_SECRET`), stelle sicher, dass der Wert mindestens 32 Zeichen lang ist. Wenn diese Anforderung nicht erfüllt ist, wirft Logto während des Builds oder zur Laufzeit folgenden Fehler: +Wenn du eine Umgebungsvariable für `cookieSecret` verwendest (z. B. `process.env.LOGTO_COOKIE_SECRET`), stelle sicher, dass der Wert mindestens 32 Zeichen lang ist. Wenn diese Anforderung nicht erfüllt ist, wirft Logto während des Build- oder Laufzeitprozesses folgenden Fehler: `TypeError: Either sessionWrapper or encryptionKey must be provided for CookieStorage` @@ -39,9 +39,9 @@ Um diesen Fehler zu vermeiden, stelle sicher, dass die Umgebungsvariable korrekt ### Callback behandeln \{#handle-callback} -Nachdem sich der Benutzer angemeldet hat, leitet Logto den Benutzer zurück zur oben konfigurierten Redirect-URI. Es gibt jedoch noch Dinge zu tun, damit deine Anwendung richtig funktioniert. +Nachdem sich der Benutzer angemeldet hat, leitet Logto den Benutzer zurück zur oben konfigurierten Redirect-URI. Es gibt jedoch noch weitere Schritte, damit deine Anwendung korrekt funktioniert. -Wir stellen eine Hilfsfunktion `handleSignIn` bereit, um den Sign-In-Callback zu behandeln: +Wir stellen eine Hilfsfunktion `handleSignIn` bereit, um den Sign-In-Callback zu verarbeiten: ```tsx title="app/callback/route.ts" import { handleSignIn } from '@logto/next/server-actions'; @@ -61,7 +61,7 @@ export async function GET(request: NextRequest) { #### Sign-In- und Sign-Out-Button implementieren \{#implement-sign-in-and-sign-out-button} -Im Next.js App Router werden Ereignisse in Client-Komponenten behandelt, daher müssen wir zuerst zwei Komponenten erstellen: `SignIn` und `SignOut`. +Im Next.js App Router werden Events in Client-Komponenten behandelt, daher müssen wir zuerst zwei Komponenten erstellen: `SignIn` und `SignOut`. ```tsx title="app/sign-in.tsx" 'use client'; @@ -107,13 +107,13 @@ const SignOut = ({ onSignOut }: Props) => { export default SignOut; ``` -Denke daran, `'use client'` am Anfang der Datei hinzuzufügen, um anzugeben, dass diese Komponenten Client-Komponenten sind. +Denke daran, `'use client'` am Anfang der Datei hinzuzufügen, um anzugeben, dass es sich um Client-Komponenten handelt. #### Buttons zur Startseite hinzufügen \{#add-buttons-to-home-page} -Fügen wir nun die Sign-In- und Sign-Out-Buttons auf deiner Startseite hinzu. Wir müssen die Serveraktionen im SDK bei Bedarf aufrufen. Um dabei zu helfen, verwende `getLogtoContext`, um den Authentifizierungsstatus abzurufen. +Jetzt fügen wir die Sign-In- und Sign-Out-Buttons auf deiner Startseite hinzu. Wir müssen die Serveraktionen im SDK bei Bedarf aufrufen. Um dabei zu helfen, verwende `getLogtoContext`, um den Authentifizierungsstatus abzurufen. ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ``` diff --git a/i18n/es/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/es/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index 55efe673099..359efadec21 100644 --- a/i18n/es/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/es/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -23,7 +23,7 @@ export const logtoConfig: LogtoNextConfig = { ``` **Nota:** -Si utilizas una variable de entorno para `cookieSecret` (por ejemplo, `process.env.LOGTO_COOKIE_SECRET`), asegúrate de que el valor tenga al menos 32 caracteres. Si no se cumple este requisito, Logto lanzará el siguiente error durante la compilación o en tiempo de ejecución: +Si usas una variable de entorno para `cookieSecret` (por ejemplo, `process.env.LOGTO_COOKIE_SECRET`), asegúrate de que el valor tenga al menos 32 caracteres. Si no se cumple este requisito, Logto lanzará el siguiente error durante la compilación o en tiempo de ejecución: `TypeError: Either sessionWrapper or encryptionKey must be provided for CookieStorage` @@ -39,7 +39,7 @@ Para evitar este error, asegúrate de que la variable de entorno esté correctam ### Manejar el callback \{#handle-callback} -Después de que el usuario inicie sesión, Logto redirigirá al usuario de vuelta al URI de redirección configurado anteriormente. Sin embargo, aún hay cosas que hacer para que tu aplicación funcione correctamente. +Después de que el usuario inicie sesión, Logto redirigirá al usuario de vuelta al URI de redirección configurado anteriormente. Sin embargo, aún hay cosas por hacer para que tu aplicación funcione correctamente. Proporcionamos una función auxiliar `handleSignIn` para manejar el callback de inicio de sesión: @@ -77,7 +77,7 @@ const SignIn = ({ onSignIn }: Props) => { onSignIn(); }} > - Sign In + Iniciar sesión ); }; @@ -99,7 +99,7 @@ const SignOut = ({ onSignOut }: Props) => { onSignOut(); }} > - Sign Out + Cerrar sesión ); }; @@ -113,7 +113,7 @@ Recuerda agregar `'use client'` en la parte superior del archivo para indicar qu -Ahora vamos a agregar los botones de inicio y cierre de sesión en tu página de inicio. Necesitamos llamar a las acciones del servidor en el SDK cuando sea necesario. Para ayudarte con esto, utiliza `getLogtoContext` para obtener el estado de autenticación. +Ahora vamos a agregar los botones de inicio y cierre de sesión en tu página de inicio. Necesitamos llamar a las acciones del servidor en el SDK cuando sea necesario. Para ayudarte con esto, usa `getLogtoContext` para obtener el estado de autenticación. ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ``` diff --git a/i18n/fr/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/fr/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index 5cc24b2001e..4c078b0fa9f 100644 --- a/i18n/fr/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/fr/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ``` diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/ja/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index 4fc7a8ef790..f129fa8ed73 100644 --- a/i18n/ja/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/ja/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -27,7 +27,7 @@ export const logtoConfig: LogtoNextConfig = { `TypeError: Either sessionWrapper or encryptionKey must be provided for CookieStorage` -このエラーを防ぐには、環境変数が正しく設定されているか、または 32 文字以上のフォールバック値を用意してください。 +このエラーを防ぐには、環境変数が正しく設定されているか、または 32 文字以上のフォールバック値を指定してください。 ### リダイレクト URI の設定 \{#configure-redirect-uris} @@ -39,7 +39,7 @@ export const logtoConfig: LogtoNextConfig = { ### コールバックの処理 \{#handle-callback} -ユーザーがサインインした後、Logto は上記で設定したリダイレクト URI にユーザーをリダイレクトします。ただし、アプリケーションが正しく動作するためには、まだやるべきことがあります。 +ユーザーがサインインした後、Logto は上記で設定したリダイレクト URI にユーザーをリダイレクトします。ただし、アプリケーションが正しく動作するためには、さらに処理が必要です。 サインインコールバックを処理するためのヘルパー関数 `handleSignIn` を提供しています： @@ -77,7 +77,7 @@ const SignIn = ({ onSignIn }: Props) => { onSignIn(); }} > - Sign In + サインイン ); }; @@ -99,7 +99,7 @@ const SignOut = ({ onSignOut }: Props) => { onSignOut(); }} > - Sign Out + サインアウト ); }; @@ -107,13 +107,13 @@ const SignOut = ({ onSignOut }: Props) => { export default SignOut; ``` -これらのコンポーネントがクライアントコンポーネントであることを示すため、ファイルの先頭に `'use client'` を追加することを忘れないでください。 +これらのコンポーネントがクライアントコンポーネントであることを示すため、ファイルの先頭に `'use client'` を追加するのを忘れないでください。 #### ホームページにボタンを追加 \{#add-buttons-to-home-page} -次に、ホームページにサインイン・サインアウトボタンを追加します。必要に応じて SDK のサーバーアクションを呼び出す必要があります。そのために、`getLogtoContext` を使って認証 (Authentication) 状態を取得します。 +次に、ホームページにサインイン・サインアウトボタンを追加します。必要に応じて SDK のサーバーアクションを呼び出す必要があります。これを助けるために、`getLogtoContext` を使って認証 (Authentication) 状態を取得します。 ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ``` diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/ko/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index b209c96dc90..1bd19fc748e 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/ko/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -5,9 +5,9 @@ import SignInFlowSummary from '../../fragments/_web-sign-in-flow-summary.mdx'; import ServerActionsTip from './_server-actions-tip.mdx'; -### 구성 준비하기 \{#prepare-configs} +### 설정 준비하기 \{#prepare-configs} -Logto 클라이언트를 위한 구성을 준비하세요: +Logto 클라이언트를 위한 설정을 준비하세요: ```ts title="app/logto.ts" import { LogtoNextConfig } from '@logto/next'; @@ -27,7 +27,7 @@ export const logtoConfig: LogtoNextConfig = { `TypeError: Either sessionWrapper or encryptionKey must be provided for CookieStorage` -이 오류를 방지하려면 환경 변수가 올바르게 설정되어 있거나, 최소 길이 32자의 대체 값을 제공해야 합니다. +이 오류를 방지하려면, 환경 변수가 올바르게 설정되어 있거나 최소 길이 32자의 대체 값을 제공해야 합니다. ### 리디렉션 URI 구성하기 \{#configure-redirect-uris} @@ -61,7 +61,7 @@ export async function GET(request: NextRequest) { #### 로그인 및 로그아웃 버튼 구현하기 \{#implement-sign-in-and-sign-out-button} -Next.js App Router에서는 이벤트가 클라이언트 컴포넌트에서 처리되므로, 먼저 `SignIn`과 `SignOut` 두 개의 컴포넌트를 생성해야 합니다. +Next.js App Router에서는 이벤트가 클라이언트 컴포넌트에서 처리되므로, 먼저 `SignIn`과 `SignOut` 두 개의 컴포넌트를 만들어야 합니다. ```tsx title="app/sign-in.tsx" 'use client'; @@ -113,7 +113,7 @@ export default SignOut; -이제 홈 페이지에 로그인 및 로그아웃 버튼을 추가해 봅시다. 필요할 때 SDK의 서버 액션을 호출해야 합니다. 이를 돕기 위해 `getLogtoContext`를 사용하여 인증 (Authentication) 상태를 가져올 수 있습니다. +이제 홈 페이지에 로그인 및 로그아웃 버튼을 추가해 봅시다. 필요할 때 SDK의 서버 액션을 호출해야 합니다. 이를 돕기 위해 `getLogtoContext`를 사용하여 인증 (Authentication) 상태를 가져옵니다. ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ``` diff --git a/i18n/pt-BR/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/pt-BR/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index 5670ea1bb7d..0d81e5e660f 100644 --- a/i18n/pt-BR/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/pt-BR/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -37,11 +37,11 @@ Para evitar esse erro, certifique-se de que a variável de ambiente esteja corre -### Lidar com o callback \{#handle-callback} +### Tratar o callback \{#handle-callback} -Após o usuário fazer login, o Logto irá redirecionar o usuário de volta para o URI de redirecionamento configurado acima. No entanto, ainda há coisas a serem feitas para que seu aplicativo funcione corretamente. +Após o usuário fazer login, o Logto irá redirecioná-lo de volta para o URI de redirecionamento configurado acima. No entanto, ainda há coisas a serem feitas para que seu aplicativo funcione corretamente. -Nós fornecemos uma função auxiliar `handleSignIn` para lidar com o callback de login: +Nós fornecemos uma função auxiliar `handleSignIn` para tratar o callback de login: ```tsx title="app/callback/route.ts" import { handleSignIn } from '@logto/next/server-actions'; @@ -61,7 +61,7 @@ export async function GET(request: NextRequest) { #### Implementar botão de login e logout \{#implement-sign-in-and-sign-out-button} -No Next.js App Router, os eventos são tratados em componentes de cliente, então precisamos criar dois componentes primeiro: `SignIn` e `SignOut`. +No Next.js App Router, eventos são tratados em componentes de cliente, então precisamos criar dois componentes primeiro: `SignIn` e `SignOut`. ```tsx title="app/sign-in.tsx" 'use client'; @@ -113,7 +113,7 @@ Lembre-se de adicionar `'use client'` no topo do arquivo para indicar que esses -Agora vamos adicionar os botões de login e logout na sua página inicial. Precisamos chamar as server actions do SDK quando necessário. Para ajudar com isso, use `getLogtoContext` para buscar o status de autenticação. +Agora vamos adicionar os botões de login e logout na sua página inicial. Precisamos chamar as server actions do SDK quando necessário. Para ajudar nisso, use `getLogtoContext` para buscar o status de autenticação. ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ``` diff --git a/i18n/th/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/th/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index f5168b01276..5049eeea57a 100644 --- a/i18n/th/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/th/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -27,7 +27,7 @@ export const logtoConfig: LogtoNextConfig = { `TypeError: Either sessionWrapper or encryptionKey must be provided for CookieStorage` -เพื่อป้องกันข้อผิดพลาดนี้ ให้ตรวจสอบว่า environment variable ถูกตั้งค่าอย่างถูกต้อง หรือกำหนดค่า fallback ที่มีความยาวอย่างน้อย 32 ตัวอักษร +เพื่อป้องกันข้อผิดพลาดนี้ ให้แน่ใจว่า environment variable ถูกตั้งค่าอย่างถูกต้อง หรือกำหนด fallback value ที่มีความยาวอย่างน้อย 32 ตัวอักษร ### กำหนดค่า redirect URI \{#configure-redirect-uris} @@ -61,7 +61,7 @@ export async function GET(request: NextRequest) { #### สร้างปุ่มลงชื่อเข้าใช้และออกจากระบบ \{#implement-sign-in-and-sign-out-button} -ใน Next.js App Router เหตุการณ์จะถูกจัดการใน client component ดังนั้นเราต้องสร้าง component สองตัวก่อน: `SignIn` และ `SignOut` +ใน Next.js App Router เหตุการณ์จะถูกจัดการใน client components ดังนั้นเราต้องสร้างสอง component ก่อน: `SignIn` และ `SignOut` ```tsx title="app/sign-in.tsx" 'use client'; @@ -107,13 +107,13 @@ const SignOut = ({ onSignOut }: Props) => { export default SignOut; ``` -อย่าลืมเพิ่ม `'use client'` ไว้ที่ด้านบนของไฟล์เพื่อระบุว่า component เหล่านี้เป็น client component +อย่าลืมเพิ่ม `'use client'` ไว้ที่ด้านบนของไฟล์เพื่อระบุว่า component เหล่านี้เป็น client components #### เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบในหน้าแรก \{#add-buttons-to-home-page} -ตอนนี้มาเพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบในหน้าแรกของคุณ โดยต้องเรียก server actions ใน SDK เมื่อจำเป็น เพื่อช่วยในเรื่องนี้ ให้ใช้ `getLogtoContext` เพื่อดึงสถานะการยืนยันตัวตน +ตอนนี้มาเพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบในหน้าแรกของคุณ โดยเราต้องเรียก server actions ใน SDK เมื่อจำเป็น เพื่อช่วยในเรื่องนี้ ให้ใช้ `getLogtoContext` เพื่อดึงสถานะการยืนยันตัวตน ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ``` diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index 15f9fdb7cbb..a405bd21337 100644 --- a/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/zh-CN/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -77,7 +77,7 @@ const SignIn = ({ onSignIn }: Props) => { onSignIn(); }} > - Sign In + 登录 ); }; @@ -99,7 +99,7 @@ const SignOut = ({ onSignOut }: Props) => { onSignOut(); }} > - Sign Out + 登出 ); }; @@ -113,7 +113,7 @@ export default SignOut; -现在让我们在你的首页添加登录和登出按钮。需要在需要时调用 SDK 中的服务端操作。为此，可以使用 `getLogtoContext` 获取认证 (Authentication) 状态。 +现在让我们在首页添加登录和登出按钮。需要在需要时调用 SDK 中的服务端操作。为此，可以使用 `getLogtoContext` 获取认证 (Authentication) 状态。 ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,14 +121,14 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( ); -}; - -export default Home; +} ``` diff --git a/i18n/zh-TW/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx b/i18n/zh-TW/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx index e4f17c44aab..e7ceff74e1e 100644 --- a/i18n/zh-TW/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx +++ b/i18n/zh-TW/docusaurus-plugin-content-docs/current/quick-starts/framework/next-app-router/_integration.mdx @@ -7,7 +7,7 @@ import ServerActionsTip from './_server-actions-tip.mdx'; ### 準備設定檔 \{#prepare-configs} -為 Logto client 準備設定： +為 Logto client 準備設定檔： ```ts title="app/logto.ts" import { LogtoNextConfig } from '@logto/next'; @@ -23,11 +23,11 @@ export const logtoConfig: LogtoNextConfig = { ``` **注意：** -如果你使用環境變數來設定 `cookieSecret`（例如 `process.env.LOGTO_COOKIE_SECRET`），請確保其值至少為 32 個字元。若未達此要求，Logto 在建置或執行時會拋出以下錯誤： +如果你使用環境變數作為 `cookieSecret`（例如 `process.env.LOGTO_COOKIE_SECRET`），請確保其值至少為 32 個字元。若未達此要求，Logto 會在建置或執行時拋出以下錯誤： `TypeError: Either sessionWrapper or encryptionKey must be provided for CookieStorage` -為避免此錯誤，請確認環境變數正確設置，或提供一個長度至少 32 字元的預設值。 +為避免此錯誤，請確保環境變數正確設置，或提供一個長度至少 32 字元的預設值。 ### 設定 redirect URI \{#configure-redirect-uris} @@ -39,9 +39,9 @@ export const logtoConfig: LogtoNextConfig = { ### 處理 callback \{#handle-callback} -使用者登入後，Logto 會將使用者導回上方設定的 redirect URI。但此時還需要進一步處理，才能讓你的應用程式正常運作。 +使用者登入後，Logto 會將使用者導回上方設定的 redirect URI。但此時仍需進行一些處理，才能讓你的應用程式正常運作。 -我們提供了 `handleSignIn` 輔助函式來處理登入 callback： +我們提供 `handleSignIn` 輔助函式來處理登入 callback： ```tsx title="app/callback/route.ts" import { handleSignIn } from '@logto/next/server-actions'; @@ -107,13 +107,13 @@ const SignOut = ({ onSignOut }: Props) => { export default SignOut; ``` -記得在檔案最上方加上 `'use client'`，以標示這些元件為 client component。 +請記得在檔案最上方加上 `'use client'`，以標示這些元件為 client component。 #### 將按鈕加入首頁 \{#add-buttons-to-home-page} -現在讓我們在首頁加入登入與登出按鈕。需要時呼叫 SDK 中的 server actions。為此，可使用 `getLogtoContext` 取得驗證 (Authentication) 狀態。 +現在讓我們將登入與登出按鈕加入首頁。當需要時，需呼叫 SDK 中的 server actions。為協助此流程，可使用 `getLogtoContext` 取得驗證 (Authentication) 狀態。 ```tsx title="app/page.tsx" import { getLogtoContext, signIn, signOut } from '@logto/next/server-actions'; @@ -121,7 +121,7 @@ import SignIn from './sign-in'; import SignOut from './sign-out'; import { logtoConfig } from './logto'; -const Home = () => { +export default async function Home() { const { isAuthenticated, claims } = await getLogtoContext(logtoConfig); return ( @@ -150,9 +150,7 @@ const Home = () => { )} ); -}; - -export default Home; +} ```