"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": 947, "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: "應用路由器" }), "（先前稱為應用目錄），引入了新的功能和慣例，迅速在開發者社群中流行起來。鑑於 Logto 的 Next.js SDK 完全支持這些新功能，我們受到了啟發，建立了一個利用這個應用路由器的新示例項目。"] }), "\n", _jsxs(_components.p, { children: ["在本文中，我們將引導你詳細了解使用應用路由器將我們的舊示例項目遷移到新項目的過程。該項目是在舊示例項目基礎上建立的，並遵循官方遷移", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "指引" }), "。過程涉及幾個步驟：創建頁面和佈局、遷移 API 路由，以及使用服務器和客戶端元件。"] }), "\n", _jsx(LogtoCloudButton, { children: "嘗試 Logto 雲預覽以與 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: ["使用應用路由器後，這些成為 ", _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// 目前沒有使用敏感的環境變量，預先加入 `server-only`\n// 是一個很好的習慣。\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: "完成遷移後，我們發現我們的代碼和結構顯著更精簡且直觀。儘管起初似乎具有挑戰性，但這個過程遠沒有想像中那麼令人生畏。我們希望我們的經驗可以作為一個有價值的指南，幫助你自信地將項目遷移到應用路由器。" }), "\n", _jsx(_components.p, { children: "為了比較，這裡有我們的項目鏈接，遷移前和遷移後的：" }), "\n", _jsxs(_components.p, { children: ["遷移前：", _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: ["遷移後：", _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 雲預覽以與 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."); }