"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": "the-migration-process", "hProperties": { "id": "the-migration-process" } }, "depth": 2, "value": "The migration process" }, { "data": { "id": "page-layout-a-new-structure", "hProperties": { "id": "page-layout-a-new-structure" } }, "depth": 3, "value": "Page layout: A new structure" }, { "data": { "id": "client-component", "hProperties": { "id": "client-component" } }, "depth": 3, "value": "Client component" }, { "data": { "id": "api-routes", "hProperties": { "id": "api-routes" } }, "depth": 3, "value": "API routes" }, { "data": { "id": "server-component", "hProperties": { "id": "server-component" } }, "depth": 3, "value": "Server component" }, { "data": { "id": "conclusion", "hProperties": { "id": "conclusion" } }, "depth": 2, "value": "Conclusion" }]; const readingTime = { "minutes": 2, "words": 656, "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: ["At Logto, we offer a Next.js SDK named ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", accompanied by a ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "sample project" }), ". This project effectively demonstrates how to integrate Logto with Next.js using the traditional \"pages\" folder, offering examples of API routes, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Client-side Fetching, and even edge runtime."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 brought us the groundbreaking ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (previously called the app directory), introducing new features and conventions that quickly became popular in the developer community. Given that Logto’s Next.js SDK fully supports these new features, we were inspired to build a new sample project utilizing this App Router."] }), "\n", _jsxs(_components.p, { children: ["In this post, we'll walk you through the details of migrating our old sample project to the new one using the App Router. The project was built upon the old sample project and followed the official migration ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "guide" }), ". The process involved several steps: creating pages and layouts, migrating API routes, and utilizing server and client components."] }), "\n", _jsx(LogtoCloudButton, { children: "Try Logto Cloud Preview to integrate with Next.js 13" }), "\n", _jsxs(_components.h2, { id: "the-migration-process", children: ["The migration process", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#the-migration-process", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "page-layout-a-new-structure", children: ["Page layout: A new structure", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#page-layout-a-new-structure", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["In our original setup, we utilized an ", _jsx(_components.code, { children: "_app.tsx" }), " file for setting up the SWR fetcher and an ", _jsx(_components.code, { children: "index.tsx" }), " file served as the home page."] }), "\n", _jsxs(_components.p, { children: ["With the App Router, these become ", _jsx(_components.code, { children: "layout.tsx" }), " and ", _jsx(_components.code, { children: "page.tsx" }), ". The ", _jsx(_components.code, { children: "layout.tsx" }), " file contains the core information, while ", _jsx(_components.code, { children: "page.tsx" }), " mirrors the functionality of the old ", _jsx(_components.code, { children: "index.tsx" }), " file."] }), "\n", _jsxs(_components.h3, { id: "client-component", children: ["Client component", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#client-component", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "One hiccup arose during the first step: setting an \"onClick\" handler for the button was unsuccessful, yielding an error message stating, \"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: ["To remedy this issue, we extracted the problematic section into a separate component and prefixed the file with ", _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-routes", children: ["API routes", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-routes", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Transitioning the API routes was as simple as transferring the previous files from ", _jsx(_components.code, { children: "/pages/api" }), " to ", _jsx(_components.code, { children: "/app/api" }), " with a few tweaks:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " was renamed to ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["The exported function was renamed to ", _jsx(_components.code, { children: "GET" }), " or another relevant method name."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "server-component", children: ["Server component", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#server-component", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Within the ", _jsx(_components.code, { children: "api" }), " folder, we have the capability to add ", _jsx(_components.code, { children: "server-only" }), " functions, which allow React Server Components to fetch data."] }), "\n", _jsxs(_components.p, { children: ["In the ", _jsx(_components.code, { children: "/app/api/logto/user" }), " directory, there's a ", _jsx(_components.code, { children: "get-user.tsx" }), " file:"] }), "\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` guarantees any modules that import code in file\n// will never run on the client. Even though this particular api\n// doesn't currently use sensitive environment variables, it's\n// good practise to add `server-only` preemptively.\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('Something went wrong!');\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: ["This function can then be invoked 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

Hello 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: "Upon completing the migration, we found our code and structure significantly more streamlined and intuitive. Although it seemed challenging at the outset, the process was far from daunting. We hope our experience can serve as a valuable guide, helping you confidently migrate your projects to the App Router." }), "\n", _jsx(_components.p, { children: "For comparison, here are the links to our projects, both before and after the migration:" }), "\n", _jsxs(_components.p, { children: ["Before: ", _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: ["After: ", _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: "By examining these projects, you can gain a clearer understanding of the changes and benefits introduced by this migration." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Try Logto Cloud Preview to integrate with 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."); }