"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduzione", "hProperties": { "id": "introduzione" } }, "depth": 2, "value": "Introduzione" }, { "data": { "id": "il-processo-di-migrazione", "hProperties": { "id": "il-processo-di-migrazione" } }, "depth": 2, "value": "Il processo di migrazione" }, { "data": { "id": "layout-delle-pagine-una-nuova-struttura", "hProperties": { "id": "layout-delle-pagine-una-nuova-struttura" } }, "depth": 3, "value": "Layout delle pagine: una nuova struttura" }, { "data": { "id": "componente-client", "hProperties": { "id": "componente-client" } }, "depth": 3, "value": "Componente client" }, { "data": { "id": "rotte-api", "hProperties": { "id": "rotte-api" } }, "depth": 3, "value": "Rotte API" }, { "data": { "id": "componente-del-server", "hProperties": { "id": "componente-del-server" } }, "depth": 3, "value": "Componente del server" }, { "data": { "id": "conclusione", "hProperties": { "id": "conclusione" } }, "depth": 2, "value": "Conclusione" }]; const readingTime = { "minutes": 2, "words": 695, "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: "introduzione", children: ["Introduzione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduzione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Presso Logto, offriamo un SDK Next.js chiamato ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", accompagnato da un ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "progetto di esempio" }), ". Questo progetto dimostra efficacemente come integrare Logto con Next.js utilizzando la tradizionale cartella \"pagine\", offrendo esempi di rotte API, ", _jsx(_components.code, { children: "getServerSideProps" }), ", recupero da client-side e persino runtime edge."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 ci ha portato la rivoluzionaria ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (precedentemente chiamata directory app), introducendo nuove funzionalità e convenzioni che sono diventate rapidamente popolari nella comunità degli sviluppatori. Dato che l'SDK Next.js di Logto supporta pienamente queste nuove funzionalità, siamo stati ispirati a costruire un nuovo progetto di esempio utilizzando questo App Router."] }), "\n", _jsxs(_components.p, { children: ["In questo post, ti guideremo attraverso i dettagli della migrazione del nostro vecchio progetto di esempio al nuovo utilizzando l'App Router. Il progetto è stato costruito sulla base del vecchio progetto di esempio e ha seguito la guida ufficiale alla migrazione ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "guida" }), ". Il processo ha comportato diversi passaggi: creazione di pagine e layout, migrazione delle rotte API e utilizzo di componenti lato server e lato client."] }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto Cloud Preview per integrare con Next.js 13" }), "\n", _jsxs(_components.h2, { id: "il-processo-di-migrazione", children: ["Il processo di migrazione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#il-processo-di-migrazione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "layout-delle-pagine-una-nuova-struttura", children: ["Layout delle pagine: una nuova struttura", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#layout-delle-pagine-una-nuova-struttura", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Nella nostra configurazione originale, abbiamo utilizzato un file ", _jsx(_components.code, { children: "_app.tsx" }), " per configurare il fetcher SWR e un file ", _jsx(_components.code, { children: "index.tsx" }), " servito come home page."] }), "\n", _jsxs(_components.p, { children: ["Con l'App Router, questi diventano ", _jsx(_components.code, { children: "layout.tsx" }), " e ", _jsx(_components.code, { children: "page.tsx" }), ". Il file ", _jsx(_components.code, { children: "layout.tsx" }), " contiene le informazioni di base, mentre ", _jsx(_components.code, { children: "page.tsx" }), " rispecchia la funzionalità del vecchio file ", _jsx(_components.code, { children: "index.tsx" }), "."] }), "\n", _jsxs(_components.h3, { id: "componente-client", children: ["Componente client", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#componente-client", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Un intoppo è sorto durante il primo passaggio: impostare un gestore \"onClick\" per il pulsante non ha avuto successo, restituendo un messaggio di errore che diceva, \"I gestori di eventi non possono essere passati alle prop del Componente Client. Se hai bisogno di interattività, prendi in considerazione la possibilità di convertire parte di questa in un Componente Client.\"" }), "\n", _jsxs(_components.p, { children: ["Per risolvere questo problema, abbiamo estratto la sezione problematica in un componente separato e prefissato il file con ", _jsx(_components.code, { children: "use client" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'usa il 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: "rotte-api", children: ["Rotte API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#rotte-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["La transizione delle rotte API è stata semplice come trasferire i file precedenti da ", _jsx(_components.code, { children: "/pages/api" }), " a ", _jsx(_components.code, { children: "/app/api" }), " con alcune modifiche:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " è stato rinominato in ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["La funzione esportata è stata rinominata in ", _jsx(_components.code, { children: "GET" }), " o un altro nome di metodo pertinente."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "componente-del-server", children: ["Componente del server", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#componente-del-server", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["All'interno della cartella ", _jsx(_components.code, { children: "api" }), ", abbiamo la possibilità di aggiungere funzioni ", _jsx(_components.code, { children: "solo-server" }), ", che permettono ai Componenti del Server React di recuperare i dati."] }), "\n", _jsxs(_components.p, { children: ["Nella directory ", _jsx(_components.code, { children: "/app/api/logto/user" }), ", c'è un file ", _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// `solo-server` garantisce che qualsiasi modulo che importa il codice nel file\n// non verrà mai eseguito sul client. Anche se questa particolare api\n// non utilizza attualmente variabili d'ambiente sensibili, è\n// buona pratica aggiungere `solo-server` preventivamente.\n// eslint-disable-next-line import/no-unassigned-import\nimport 'solo-server';\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('Qualcosa è andato storto!');\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: ["Questa funzione può quindi essere invocata in ", _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

Ciao Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "conclusione", children: ["Conclusione", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusione", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Dopo aver completato la migrazione, abbiamo trovato il nostro codice e la nostra struttura significativamente più snelli e intuitivi. Anche se sembrava sfidante all'inizio, il processo è stato tutt'altro che scoraggiante. Speriamo che la nostra esperienza possa fungere da guida preziosa, aiutandoti a migrare con fiducia i tuoi progetti all'App Router." }), "\n", _jsx(_components.p, { children: "Per confronto, ecco i collegamenti ai nostri progetti, sia prima che dopo la migrazione:" }), "\n", _jsxs(_components.p, { children: ["Prima: ", _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: ["Dopo: ", _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: "Esaminando questi progetti, puoi ottenere una comprensione più chiara delle modifiche e dei vantaggi introdotti da questa migrazione." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto Cloud Preview per integrare 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."); }