"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction", "hProperties": { "id": "introduction" } }, "depth": 2, "value": "Introduction" }, { "data": { "id": "le-processus-de-migration", "hProperties": { "id": "le-processus-de-migration" } }, "depth": 2, "value": "Le processus de migration" }, { "data": { "id": "mise-en-page-de-la-page--une-nouvelle-structure", "hProperties": { "id": "mise-en-page-de-la-page--une-nouvelle-structure" } }, "depth": 3, "value": "Mise en page de la page : Une nouvelle structure" }, { "data": { "id": "composant-client", "hProperties": { "id": "composant-client" } }, "depth": 3, "value": "Composant client" }, { "data": { "id": "routes-api", "hProperties": { "id": "routes-api" } }, "depth": 3, "value": "Routes API" }, { "data": { "id": "composant-serveur", "hProperties": { "id": "composant-serveur" } }, "depth": 3, "value": "Composant serveur" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 2, "words": 744, "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: "introduction", children: ["Introduction", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Chez Logto, nous proposons un SDK Next.js nommé ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", accompagné d'un ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "projet d'échantillon" }), ". Ce projet démontre efficacement comment intégrer Logto avec Next.js en utilisant le dossier \"pages\" traditionnel, offrant des exemples de routes API, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Fetching côté client, et même runtime de bord."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 nous a apporté le révolutionnaire ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (auparavant appelé le répertoire d'applications), introduisant de nouvelles fonctionnalités et conventions qui sont rapidement devenues populaires dans la communauté des développeurs. Étant donné que le SDK Next.js de Logto prend entièrement en charge ces nouvelles fonctionnalités, nous avons été inspirés pour construire un nouveau projet d'échantillon utilisant ce routeur d'applications."] }), "\n", _jsxs(_components.p, { children: ["Dans cet article, nous vous guiderons à travers les détails de la migration de notre ancien projet d'échantillon vers le nouveau en utilisant le routeur d'applications. Le projet a été construit sur l'ancien projet d'échantillon et a suivi le guide officiel de migration ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "guide" }), ". Le processus a impliqué plusieurs étapes : création de pages et mises en page, migration des routes API, et utilisation des composants serveur et client."] }), "\n", _jsx(LogtoCloudButton, { children: "Essayez Logto Cloud Preview pour l'intégrer avec Next.js 13" }), "\n", _jsxs(_components.h2, { id: "le-processus-de-migration", children: ["Le processus de migration", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#le-processus-de-migration", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "mise-en-page-de-la-page--une-nouvelle-structure", children: ["Mise en page de la page : Une nouvelle structure", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#mise-en-page-de-la-page--une-nouvelle-structure", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Dans notre configuration initiale, nous avons utilisé un fichier ", _jsx(_components.code, { children: "_app.tsx" }), " pour configurer le fetcher SWR et un fichier ", _jsx(_components.code, { children: "index.tsx" }), " qui servait de page d'accueil."] }), "\n", _jsxs(_components.p, { children: ["Avec le routeur d'applications, ceux-ci deviennent ", _jsx(_components.code, { children: "layout.tsx" }), " et ", _jsx(_components.code, { children: "page.tsx" }), ". Le fichier ", _jsx(_components.code, { children: "layout.tsx" }), " contient les informations principales, tandis que ", _jsx(_components.code, { children: "page.tsx" }), " reflète la fonctionnalité de l'ancien fichier ", _jsx(_components.code, { children: "index.tsx" }), "."] }), "\n", _jsxs(_components.h3, { id: "composant-client", children: ["Composant client", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#composant-client", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Un problème est survenu lors de la première étape : la définition d'un gestionnaire \"onClick\" pour le bouton a été infructueuse, produisant un message d'erreur indiquant, \"Les gestionnaires d'événements ne peuvent pas être passés aux props du composant client. Si vous avez besoin d'interactivité, envisagez de convertir une partie de cela en un composant client.\"" }), "\n", _jsxs(_components.p, { children: ["Pour remédier à ce problème, nous avons extrait la section problématique dans un composant séparé et préfixé le fichier avec ", _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: "routes-api", children: ["Routes API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#routes-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["La transition des routes API a été aussi simple que de transférer les fichiers précédents de ", _jsx(_components.code, { children: "/pages/api" }), " à ", _jsx(_components.code, { children: "/app/api" }), " avec quelques modifications:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " a été renommé en ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["La fonction exportée a été renommée en ", _jsx(_components.code, { children: "GET" }), " ou un autre nom de méthode pertinent."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "composant-serveur", children: ["Composant serveur", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#composant-serveur", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Dans le dossier ", _jsx(_components.code, { children: "api" }), ", nous avons la possibilité d'ajouter des fonctions ", _jsx(_components.code, { children: "server-only" }), ", qui permettent aux composants React Server de récupérer des données."] }), "\n", _jsxs(_components.p, { children: ["Dans le répertoire ", _jsx(_components.code, { children: "/app/api/logto/user" }), ", il y a un fichier ", _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` garantit que tous les modules qui importent du code dans le fichier\n// ne s'exécuteront jamais sur le client. Même si cette api particulière\n// n'utilise pas actuellement des variables d'environnement sensibles, c'est\n// une bonne pratique d'ajouter `server-only` de manière préventive.\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('Quelque chose s'est mal passé !');\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: ["Cette fonction peut ensuite être invoquée dans ", _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

Bonjour Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "conclusion", children: ["Conclusion", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Après avoir terminé la migration, nous avons trouvé notre code et notre structure beaucoup plus rationalisés et intuitifs. Bien que cela semble difficile au début, le processus était loin d'être décourageant. Nous espérons que notre expérience pourra servir de guide précieux, vous aidant à migrer vos projets vers le routeur d'applications en toute confiance." }), "\n", _jsx(_components.p, { children: "Pour comparaison, voici les liens vers nos projets, avant et après la migration:" }), "\n", _jsxs(_components.p, { children: ["Avant : ", _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: ["Aprè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: "En examinant ces projets, vous pouvez obtenir une compréhension plus claire des changements et des avantages introduits par cette migration." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Essayez Logto Cloud Preview pour l'intégrer avec 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."); }