"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "inledning", "hProperties": { "id": "inledning" } }, "depth": 2, "value": "Inledning" }, { "data": { "id": "migrationsprocessen", "hProperties": { "id": "migrationsprocessen" } }, "depth": 2, "value": "Migrationsprocessen" }, { "data": { "id": "sidlayout-en-ny-struktur", "hProperties": { "id": "sidlayout-en-ny-struktur" } }, "depth": 3, "value": "Sidlayout: En ny struktur" }, { "data": { "id": "klientkomponent", "hProperties": { "id": "klientkomponent" } }, "depth": 3, "value": "Klientkomponent" }, { "data": { "id": "api-rutter", "hProperties": { "id": "api-rutter" } }, "depth": 3, "value": "API-rutter" }, { "data": { "id": "serverkomponent", "hProperties": { "id": "serverkomponent" } }, "depth": 3, "value": "Serverkomponent" }, { "data": { "id": "slutsats", "hProperties": { "id": "slutsats" } }, "depth": 2, "value": "Slutsats" }]; const readingTime = { "minutes": 2, "words": 645, "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: "inledning", children: ["Inledning", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inledning", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["På Logto erbjuder vi ett Next.js SDK med namnet ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", tillsammans med ett ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "exempelprojekt" }), ". Detta projekt visar effektivt hur man integrerar Logto med Next.js med hjälp av den traditionella \"pages\"-mappen och ger exempel på API-rutter, ", _jsx(_components.code, { children: "getServerSideProps" }), ", klient-sidehämtning och till och med edge-runtime."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 gav oss den banbrytande ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (tidigare kallad appdirectory), som introducerade nya funktioner och konventioner som snabbt blev populära i utvecklargemenskapen. Eftersom Logtos Next.js SDK fullt ut stödjer dessa nya funktioner blev vi inspirerade att bygga ett nytt exempelprojekt som använder denna App Router."] }), "\n", _jsxs(_components.p, { children: ["I detta inlägg kommer vi att guida dig genom detaljerna i att migrera vårt gamla exempelprojekt till det nya med hjälp av App Router. Projektet byggdes på det gamla exempelprojektet och följde den officiella migrerings", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "guiden" }), ". Processen involverade flera steg: skapa sidor och layouter, migrera API-rutter och använda server- och klientkomponenter."] }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto Cloud Preview för att integrera med Next.js 13" }), "\n", _jsxs(_components.h2, { id: "migrationsprocessen", children: ["Migrationsprocessen", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#migrationsprocessen", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "sidlayout-en-ny-struktur", children: ["Sidlayout: En ny struktur", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sidlayout-en-ny-struktur", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["I vår ursprungliga installation använde vi en ", _jsx(_components.code, { children: "_app.tsx" }), "-fil för att ställa in SWR-hämtaren och en ", _jsx(_components.code, { children: "index.tsx" }), "-fil som tjänade som startsida."] }), "\n", _jsxs(_components.p, { children: ["Med App Router blir dessa ", _jsx(_components.code, { children: "layout.tsx" }), " och ", _jsx(_components.code, { children: "page.tsx" }), ". ", _jsx(_components.code, { children: "layout.tsx" }), "-filen innehåller kärninformationen, medan ", _jsx(_components.code, { children: "page.tsx" }), " speglar funktionaliteten i den gamla ", _jsx(_components.code, { children: "index.tsx" }), "-filen."] }), "\n", _jsxs(_components.h3, { id: "klientkomponent", children: ["Klientkomponent", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#klientkomponent", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Ett problem uppstod under det första steget: att ställa in en \"onClick\"-hanterare för knappen lyckades inte, vilket gav ett felmeddelande som säger: \"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: ["För att åtgärda detta problem extraherade vi den problematiska sektionen till en separat komponent och förledde filen med ", _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-rutter", children: ["API-rutter", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-rutter", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Övergången av API-rutterna var lika enkel som att överföra de tidigare filerna från ", _jsx(_components.code, { children: "/pages/api" }), " till ", _jsx(_components.code, { children: "/app/api" }), " med några få justeringar:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " döptes om till ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["Den exporterade funktionen döptes om till ", _jsx(_components.code, { children: "GET" }), " eller ett annat relevant metodnamn."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "serverkomponent", children: ["Serverkomponent", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#serverkomponent", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Inom ", _jsx(_components.code, { children: "api" }), "-mappen har vi möjlighet att lägga till ", _jsx(_components.code, { children: "server-only" }), "-funktioner, som tillåter React Server Components att hämta data."] }), "\n", _jsxs(_components.p, { children: ["I ", _jsx(_components.code, { children: "/app/api/logto/user" }), "-katalogen finns en ", _jsx(_components.code, { children: "get-user.tsx" }), "-fil:"] }), "\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` garanterar att alla moduler som importerar kod i filen\n// aldrig kommer att köras på klienten. Även om denna specifika api\n// för närvarande inte använder känsliga miljövariabler, är det\n// bra praxis att lägga till `server-only` i förväg.\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('Något gick fel!');\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: ["Denna funktion kan sedan anropas i ", _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

Hej Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "slutsats", children: ["Slutsats", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#slutsats", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Efter att ha slutfört migrationen fann vi vår kod och struktur avsevärt mer strömlinjeformad och intuitiv. Även om det verkade utmanande från början, var processen långt ifrån skrämmande. Vi hoppas att vår erfarenhet kan fungera som en värdefull guide, som hjälper dig att med självförtroende migrera dina projekt till App Router." }), "\n", _jsx(_components.p, { children: "För jämförelse, här är länkarna till våra projekt, både före och efter migrationen:" }), "\n", _jsxs(_components.p, { children: ["Före: ", _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: ["Efter: ", _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: "Genom att granska dessa projekt kan du få en tydligare förståelse för de förändringar och fördelar som introducerades genom denna migration." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto Cloud Preview för att integrera med 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."); }