"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": 906, "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 预览版，与 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 fetcher，一个 ", _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 Server 组件获取数据。"] }), "\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` guarantees any modules that import code in file\n// will never run on the client. Even though this particular api\n// doesn't currently use sensitive environment variables, it's\n// good practise to add `server-only` preemptively.\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

你好，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: ["迁移前：", _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 Cloud 预览版，与 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."); }