"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introdução", "hProperties": { "id": "introdução" } }, "depth": 2, "value": "Introdução" }, { "data": { "id": "o-processo-de-migração", "hProperties": { "id": "o-processo-de-migração" } }, "depth": 2, "value": "O processo de migração" }, { "data": { "id": "layout-de-página-uma-nova-estrutura", "hProperties": { "id": "layout-de-página-uma-nova-estrutura" } }, "depth": 3, "value": "Layout de página: Uma nova estrutura" }, { "data": { "id": "componente-do-cliente", "hProperties": { "id": "componente-do-cliente" } }, "depth": 3, "value": "Componente do cliente" }, { "data": { "id": "rotas-api", "hProperties": { "id": "rotas-api" } }, "depth": 3, "value": "Rotas API" }, { "data": { "id": "componente-do-servidor", "hProperties": { "id": "componente-do-servidor" } }, "depth": 3, "value": "Componente do servidor" }, { "data": { "id": "conclusão", "hProperties": { "id": "conclusão" } }, "depth": 2, "value": "Conclusão" }]; const readingTime = { "minutes": 2, "words": 676, "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: "introdução", children: ["Introdução", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introdução", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["No Logto, oferecemos um SDK Next.js chamado ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", acompanhado por um ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "projeto de amostra" }), ". Este projeto demonstra efetivamente como integrar o Logto com o Next.js usando a pasta \"pages\" tradicional, oferecendo exemplos de rotas de API, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Client-side Fetching, e até mesmo runtime de borda."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 nos trouxe o revolucionário ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (anteriormente chamado de diretório de aplicação), introduzindo novas funcionalidades e convenções que rapidamente se tornaram populares na comunidade de desenvolvedores. Dado que o SDK Next.js do Logto suporta totalmente essas novas funcionalidades, nos sentimos inspirados a construir um novo projeto de amostra utilizando este App Router."] }), "\n", _jsxs(_components.p, { children: ["Neste post, vamos guiá-lo pelos detalhes de migrar nosso antigo projeto de amostra para o novo usando o App Router. O projeto foi construído com base no antigo projeto de amostra e seguiu o guia de migração oficial ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "guia" }), ". O processo envolveu várias etapas: criar páginas e layouts, migrar rotas API, e utilizar componentes do servidor e do cliente."] }), "\n", _jsx(LogtoCloudButton, { children: "Tente o Logto Cloud Preview para integrar com o Next.js 13" }), "\n", _jsxs(_components.h2, { id: "o-processo-de-migração", children: ["O processo de migração", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#o-processo-de-migração", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "layout-de-página-uma-nova-estrutura", children: ["Layout de página: Uma nova estrutura", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#layout-de-página-uma-nova-estrutura", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Na nossa configuração original, usávamos um arquivo ", _jsx(_components.code, { children: "_app.tsx" }), " para configurar o SWR fetcher e um arquivo ", _jsx(_components.code, { children: "index.tsx" }), " servia como a página inicial."] }), "\n", _jsxs(_components.p, { children: ["Com o App Router, estes se tornam ", _jsx(_components.code, { children: "layout.tsx" }), " e ", _jsx(_components.code, { children: "page.tsx" }), ". O arquivo ", _jsx(_components.code, { children: "layout.tsx" }), " contém as informações principais, enquanto ", _jsx(_components.code, { children: "page.tsx" }), " espelha a funcionalidade do antigo arquivo ", _jsx(_components.code, { children: "index.tsx" }), "."] }), "\n", _jsxs(_components.h3, { id: "componente-do-cliente", children: ["Componente do cliente", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#componente-do-cliente", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Um percalço surgiu durante a primeira etapa: a configuração de um manipulador \"onClick\" para o botão foi infrutífera, resultando em uma mensagem de erro que dizia: \"Event handlers cannot be passed to Client Component props. If you need interactivity, consider converting part of this to a Client Component.\"" }), "\n", _jsxs(_components.p, { children: ["Para remediar este problema, extraímos a seção problemática para um componente separado e prefixamos o arquivo com ", _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: "rotas-api", children: ["Rotas API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rotas-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["A transição das rotas de API foi tão simples quanto transferir os arquivos anteriores de ", _jsx(_components.code, { children: "/pages/api" }), " para ", _jsx(_components.code, { children: "/app/api" }), " com algumas alterações:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " foi renomeado para ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["A função exportada foi renomeada para ", _jsx(_components.code, { children: "GET" }), " ou outro nome de método relevante."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "componente-do-servidor", children: ["Componente do servidor", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#componente-do-servidor", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Dentro da pasta ", _jsx(_components.code, { children: "api" }), ", temos a capacidade de adicionar funções ", _jsx(_components.code, { children: "server-only" }), ", que permitem que os Componentes do Servidor do React busquem dados."] }), "\n", _jsxs(_components.p, { children: ["No diretório ", _jsx(_components.code, { children: "/app/api/logto/user" }), ", há um arquivo ", _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` garante que quaisquer módulos que importem código no arquivo\n// nunca serão executados no cliente. Embora esta API em particular\n// atualmente não use variáveis de ambiente sensíveis, é\n// uma boa prática adicionar `server-only` preventivamente.\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('Algo deu errado!');\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 função pode então ser invocada em ", _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

Olá, Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "conclusão", children: ["Conclusão", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusão", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Após completar a migração, descobrimos que nosso código e estrutura estavam significativamente mais simplificados e intuitivos. Embora parecesse desafiador no início, o processo estava longe de ser assustador. Esperamos que nossa experiência possa servir como um guia valioso, ajudando você a migrar confiantemente seus projetos para o App Router." }), "\n", _jsx(_components.p, { children: "Para comparação, aqui estão os links para nossos projetos, antes e depois da migração:" }), "\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: ["Depois: ", _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: "Ao examinar esses projetos, você pode obter uma compreensão mais clara das alterações e benefícios introduzidos por esta migração." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Tente o Logto Cloud Preview para integrar com o 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."); }