"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "介紹", "hProperties": { "id": "介紹" } }, "depth": 2, "value": "介紹" }, { "data": { "id": "遷移過程", "hProperties": { "id": "遷移過程" } }, "depth": 2, "value": "遷移過程" }, { "data": { "id": "頁面佈局一個新的結構", "hProperties": { "id": "頁面佈局一個新的結構" } }, "depth": 3, "value": "頁面佈局：一個新的結構" }, { "data": { "id": "客戶端組件", "hProperties": { "id": "客戶端組件" } }, "depth": 3, "value": "客戶端組件" }, { "data": { "id": "api-路由", "hProperties": { "id": "api-路由" } }, "depth": 3, "value": "API 路由" }, { "data": { "id": "服務器組件", "hProperties": { "id": "服務器組件" } }, "depth": 3, "value": "服務器組件" }, { "data": { "id": "結論", "hProperties": { "id": "結論" } }, "depth": 2, "value": "結論" }]; const readingTime = { "minutes": 3, "words": 878, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "介紹", children: ["介紹", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#介紹", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["在 Logto，我們提供了一個名為 ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), " 的 Next.js SDK，並隨附一個", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "範例專案" }), "。此專案有效地展示了如何使用傳統的 \"pages\" 資料夾將 Logto 與 Next.js 集成，提供 API 路由、", _jsx(_components.code, { children: "getServerSideProps" }), "、客戶端提取甚至邊緣運行時的示例。"] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 為我們帶來了突破性的 ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), "（以前稱為應用程式目錄），引入了迅速在開發者社群中流行的新功能和約定。由於 Logto 的 Next.js SDK 完全支持這些新功能，我們受到啟發，創建了一個利用此 App Router 的新範例專案。"] }), "\n", _jsxs(_components.p, { children: ["在這篇文章中，我們將帶你詳述使用 App Router 遷移我們的舊範例專案到新的樣子。專案是基於舊範例專案構建的，並遵循官方遷移", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "指南" }), "。過程包含幾個步驟：創建頁面和佈局、遷移 API 路由以及使用服務器和客戶端組件。"] }), "\n", _jsx(LogtoCloudButton, { children: "嘗試 Logto Cloud Preview 集成 Next.js 13" }), "\n", _jsxs(_components.h2, { id: "遷移過程", children: ["遷移過程", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#遷移過程", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "頁面佈局一個新的結構", children: ["頁面佈局：一個新的結構", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#頁面佈局一個新的結構", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["在我們的原始設置中，我們使用 ", _jsx(_components.code, { children: "_app.tsx" }), " 文件來設置 SWR 提取器，而 ", _jsx(_components.code, { children: "index.tsx" }), " 文件作為首頁。"] }), "\n", _jsxs(_components.p, { children: ["使用 App Router，這些文件變成了 ", _jsx(_components.code, { children: "layout.tsx" }), " 和 ", _jsx(_components.code, { children: "page.tsx" }), "。", _jsx(_components.code, { children: "layout.tsx" }), " 文件包含核心信息，而 ", _jsx(_components.code, { children: "page.tsx" }), " 文件則反映了舊 ", _jsx(_components.code, { children: "index.tsx" }), " 文件的功能。"] }), "\n", _jsxs(_components.h3, { id: "客戶端組件", children: ["客戶端組件", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#客戶端組件", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "遷移的第一步出現了一個小問題：為按鈕設置 \"onClick\" 處理程序未成功，出現錯誤消息：「事件處理程序不能傳遞給客戶端組件的屬性。如果需要交互，請考慮將部分內容轉換為客戶端組件。」" }), "\n", _jsxs(_components.p, { children: ["為了解決此問題，我們將有問題的部分提取到一個單獨的組件中，並在文件開頭添加 ", _jsx(_components.code, { children: "use client" }), "："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\ntype Props = {\n isAuthenticated: boolean;\n};\n\nconst Nav = ({ isAuthenticated }: Props) => {\n return (\n \n );\n};\n\nexport default Nav;\n" }) }), "\n", _jsxs(_components.h3, { id: "api-路由", children: ["API 路由", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-路由", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["轉換 API 路由相對簡單：只需將之前的文件從 ", _jsx(_components.code, { children: "/pages/api" }), " 移至 ", _jsx(_components.code, { children: "/app/api" }), "，並進行少許調整："] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " 被重命名為 ", _jsx(_components.code, { children: "route.ts" }), "。"] }), "\n", _jsxs(_components.li, { children: ["導出的函數被重命名為 ", _jsx(_components.code, { children: "GET" }), " 或其他相關方法名。"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "服務器組件", children: ["服務器組件", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#服務器組件", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["在 ", _jsx(_components.code, { children: "api" }), " 資料夾中，我們可以添加 ", _jsx(_components.code, { children: "server-only" }), " 函數，允許 React 服務器組件提取數據。"] }), "\n", _jsxs(_components.p, { children: ["在 ", _jsx(_components.code, { children: "/app/api/logto/user" }), " 資料夾中，有一個 ", _jsx(_components.code, { children: "get-user.tsx" }), " 文件："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { type LogtoContext } from '@logto/next';\nimport { cookies } from 'next/headers';\n\n// `server-only` 保證任何從文件中導入代碼的模塊\n// 永不會在客戶端運行。儘管特定 api\n// 目前不使用敏感環境變量，但\n// 預先添加 `server-only` 是一種良好的做法。\n// eslint-disable-next-line import/no-unassigned-import\nimport 'server-only';\nimport { config } from '../../../../libraries/config';\n\nexport async function getUser() {\n const response = await fetch(`${config.baseUrl}/api/logto/user`, {\n cache: 'no-store',\n headers: {\n cookie: cookies().toString(),\n },\n });\n\n if (!response.ok) {\n throw new Error('Something went wrong!');\n }\n\n // eslint-disable-next-line no-restricted-syntax\n const user = (await response.json()) as LogtoContext;\n\n return user;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["然後可以在 ", _jsx(_components.code, { children: "page.tsx" }), " 中調用此函數："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getUser } from './api/logto/user/get-user';\nimport Nav from './nav';\n\nconst Page = async () => {\n const user = await getUser();\n\n return (\n

Hello Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "結論", children: ["結論", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#結論", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "完成遷移後，我們發現代碼和結構變得更加簡潔和直觀。儘管剛開始看似具有挑戰性，但過程遠非困難。我們希望我們的經驗可以作為寶貴的指南，幫助你自信地將專案遷移到 App Router。" }), "\n", _jsx(_components.p, { children: "作為對比，以下是我們專案在遷移前後的鏈接：" }), "\n", _jsxs(_components.p, { children: ["Before: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-sample" })] }), "\n", _jsxs(_components.p, { children: ["After: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-app-dir-sample" })] }), "\n", _jsx(_components.p, { children: "通過檢查這些專案，你可以更清晰地了解此次遷移帶來的變革和利益。" }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "嘗試 Logto Cloud Preview 集成 Next.js 13" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }