"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introducción", "hProperties": { "id": "introducción" } }, "depth": 2, "value": "Introducción" }, { "data": { "id": "el-proceso-de-migración", "hProperties": { "id": "el-proceso-de-migración" } }, "depth": 2, "value": "El proceso de migración" }, { "data": { "id": "diseño-de-página-una-nueva-estructura", "hProperties": { "id": "diseño-de-página-una-nueva-estructura" } }, "depth": 3, "value": "Diseño de página: Una nueva estructura" }, { "data": { "id": "componente-del-cliente", "hProperties": { "id": "componente-del-cliente" } }, "depth": 3, "value": "Componente del cliente" }, { "data": { "id": "rutas-api", "hProperties": { "id": "rutas-api" } }, "depth": 3, "value": "Rutas API" }, { "data": { "id": "componente-del-servidor", "hProperties": { "id": "componente-del-servidor" } }, "depth": 3, "value": "Componente del servidor" }, { "data": { "id": "conclusión", "hProperties": { "id": "conclusión" } }, "depth": 2, "value": "Conclusión" }]; const readingTime = { "minutes": 2, "words": 691, "text": "2 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: "introducción", children: ["Introducción", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introducción", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["En Logto, ofrecemos un SDK de Next.js llamado ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", acompañado de un ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "proyecto de ejemplo" }), ". Este proyecto demuestra efectivamente cómo integrar Logto con Next.js usando la carpeta tradicional \"pages\", ofreciendo ejemplos de rutas API, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Fetching del lado del cliente e incluso tiempo de ejecución en borde."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 nos trajo el revolucionario ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (antes llamado directorio de aplicaciones), introduciendo nuevas características y convenciones que rápidamente se volvieron populares en la comunidad de desarrolladores. Dado que el SDK de Next.js de Logto apoya totalmente estas nuevas características, nos inspiró a construir un nuevo proyecto de ejemplo utilizando este App Router."] }), "\n", _jsxs(_components.p, { children: ["En esta publicación, te guiamos a través de los detalles de migrar nuestro viejo proyecto de ejemplo al nuevo utilizando el App Router. El proyecto se construyó sobre el antiguo proyecto de ejemplo y siguió la guía oficial de migración ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "guía" }), ". El proceso involucró varios pasos: creación de páginas y diseños, migración de rutas API y uso de componentes de servidor y cliente."] }), "\n", _jsx(LogtoCloudButton, { children: "Prueba Logto Cloud Preview para integrarte con Next.js 13" }), "\n", _jsxs(_components.h2, { id: "el-proceso-de-migración", children: ["El proceso de migración", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#el-proceso-de-migración", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "diseño-de-página-una-nueva-estructura", children: ["Diseño de página: Una nueva estructura", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#diseño-de-página-una-nueva-estructura", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["En nuestra configuración original, utilizamos un archivo ", _jsx(_components.code, { children: "_app.tsx" }), " para configurar el buscador de SWR y un archivo ", _jsx(_components.code, { children: "index.tsx" }), " servía como la página de inicio."] }), "\n", _jsxs(_components.p, { children: ["Con el App Router, estos se convierten en ", _jsx(_components.code, { children: "layout.tsx" }), " y ", _jsx(_components.code, { children: "page.tsx" }), ". El archivo ", _jsx(_components.code, { children: "layout.tsx" }), " contiene la información central, mientras que ", _jsx(_components.code, { children: "page.tsx" }), " refleja la funcionalidad del antiguo archivo ", _jsx(_components.code, { children: "index.tsx" }), "."] }), "\n", _jsxs(_components.h3, { id: "componente-del-cliente", children: ["Componente del cliente", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#componente-del-cliente", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Un contratiempo surgió durante el primer paso: configurar un controlador \"onClick\" para el botón no fue exitoso, resultando en un mensaje de error que decía, \"Los controladores de eventos no pueden ser pasados a las propiedades de Componente del Cliente. Si necesita interactividad, considere convertir parte de esto en un Componente del Cliente.\"" }), "\n", _jsxs(_components.p, { children: ["Para solucionar este problema, extrajimos la sección problemática en un componente separado y prefijamos el archivo con ", _jsx(_components.code, { children: "use client" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'usa cliente';\n\ntipo 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: "rutas-api", children: ["Rutas API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rutas-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["La transición de las rutas API fue tan simple como transferir los archivos anteriores de ", _jsx(_components.code, { children: "/pages/api" }), " a ", _jsx(_components.code, { children: "/app/api" }), " con algunos ajustes:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " se renombró a ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["La función exportada se renombró a ", _jsx(_components.code, { children: "GET" }), " o a otro nombre de método relevante."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "componente-del-servidor", children: ["Componente del servidor", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#componente-del-servidor", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Dentro de la carpeta ", _jsx(_components.code, { children: "api" }), ", tenemos la capacidad de agregar funciones ", _jsx(_components.code, { children: "solo para servidores" }), ", que permiten que los Componentes de Servidor de React obtengan datos."] }), "\n", _jsxs(_components.p, { children: ["En el directorio ", _jsx(_components.code, { children: "/app/api/logto/user" }), ", hay un archivo ", _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` garantiza que cualquier módulo que importe código en el archivo\n// nunca se ejecutará en el cliente. Aunque esta api particular\n// actualmente no usa variables de entorno sensibles, es\n// buena práctica agregar `server-only` de manera preventiva.\n// eslint-disable-next-line import/no-unassigned-import\nimport 'solo servidor';\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('¡Algo salió mal!');\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: ["Esta función puede ser invocada en ", _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

Hola Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "conclusión", children: ["Conclusión", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusión", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Al completar la migración, encontramos nuestro código y estructura significativamente más simplificados e intuitivos. Aunque parecía desafiante al principio, el proceso estaba lejos de ser desalentador. Esperamos que nuestra experiencia pueda servir como una guía valiosa, ayudándote a migrar con confianza tus proyectos al App Router." }), "\n", _jsx(_components.p, { children: "Para comparar, aquí están los enlaces a nuestros proyectos, tanto antes como después de la migración:" }), "\n", _jsxs(_components.p, { children: ["Antes: ", _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: ["Después: ", _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: "Examinando estos proyectos, puedes obtener una comprensión más clara de los cambios y beneficios introducidos por esta migración." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Prueba Logto Cloud Preview para integrarte con 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."); }