"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "wprowadzenie", "hProperties": { "id": "wprowadzenie" } }, "depth": 2, "value": "Wprowadzenie" }, { "data": { "id": "proces-migracji", "hProperties": { "id": "proces-migracji" } }, "depth": 2, "value": "Proces migracji" }, { "data": { "id": "układ-strony-nowa-struktura", "hProperties": { "id": "układ-strony-nowa-struktura" } }, "depth": 3, "value": "Układ strony: Nowa struktura" }, { "data": { "id": "komponent-klienta", "hProperties": { "id": "komponent-klienta" } }, "depth": 3, "value": "Komponent klienta" }, { "data": { "id": "trasy-api", "hProperties": { "id": "trasy-api" } }, "depth": 3, "value": "Trasy API" }, { "data": { "id": "komponent-serwera", "hProperties": { "id": "komponent-serwera" } }, "depth": 3, "value": "Komponent serwera" }, { "data": { "id": "wnioski", "hProperties": { "id": "wnioski" } }, "depth": 2, "value": "Wnioski" }]; const readingTime = { "minutes": 2, "words": 613, "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: "wprowadzenie", children: ["Wprowadzenie", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wprowadzenie", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["W Logto oferujemy SDK Next.js o nazwie ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), ", któremu towarzyszy ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "projekt próbny" }), ". Ten projekt skutecznie pokazuje, jak zintegrować Logto z Next.js przy użyciu tradycyjnego folderu \"strony\", oferując przykłady tras API, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Client-side Fetching, a nawet runtime krawędzi."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13 przyniósł nam przełomowy ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "App Router" }), " (wcześniej nazywany katalogiem aplikacji), wprowadzając nowe funkcje i konwencje, które szybko zyskały popularność w społeczności deweloperów. Biorąc pod uwagę, że SDK Next.js Logto w pełni obsługuje te nowe funkcje, zainspirowało nas to do zbudowania nowego projektu próbnego, wykorzystującego ten App Router."] }), "\n", _jsxs(_components.p, { children: ["W tym poście przeprowadzimy Cię przez szczegóły migracji naszego starego projektu próbnego do nowego, wykorzystującego App Router. Projekt został zbudowany na bazie starego projektu próbnego i był zgodny z oficjalnym przewodnikiem migracyjnym ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "przewodnik" }), ". Proces obejmował kilka kroków: tworzenie stron i układów, migrację tras API i wykorzystanie komponentów serwera i klienta."] }), "\n", _jsx(LogtoCloudButton, { children: "Wypróbuj Logto Cloud Preview, aby zintegrować go z Next.js 13" }), "\n", _jsxs(_components.h2, { id: "proces-migracji", children: ["Proces migracji", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#proces-migracji", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "układ-strony-nowa-struktura", children: ["Układ strony: Nowa struktura", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#układ-strony-nowa-struktura", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["W naszej pierwotnej konfiguracji używaliśmy pliku ", _jsx(_components.code, { children: "_app.tsx" }), " do konfiguracji SWR fetcher, a plik ", _jsx(_components.code, { children: "index.tsx" }), " służył jako strona główna."] }), "\n", _jsxs(_components.p, { children: ["Z App Router, te stają się ", _jsx(_components.code, { children: "layout.tsx" }), " i ", _jsx(_components.code, { children: "page.tsx" }), ". Plik ", _jsx(_components.code, { children: "layout.tsx" }), " zawiera podstawowe informacje, a ", _jsx(_components.code, { children: "page.tsx" }), " odzwierciedla funkcjonalność starego pliku ", _jsx(_components.code, { children: "index.tsx" }), "."] }), "\n", _jsxs(_components.h3, { id: "komponent-klienta", children: ["Komponent klienta", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#komponent-klienta", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Podczas pierwszego kroku pojawił się drobny problem: ustawienie obsługi zdarzeń \"onClick\" dla przycisku nie powiodło się, generując komunikat o błędzie stwierdzającym, \"Programy obsługi zdarzeń nie mogą być przekazywane do właściwości komponentu klienta. Jeśli potrzebujesz interaktywności, rozważ przekształcenie części tego w komponent klienta.\"" }), "\n", _jsxs(_components.p, { children: ["Aby rozwiązać ten problem, wyodrębniliśmy problematyczny fragment do osobnego komponentu i przedrostkowaliśmy plik ", _jsx(_components.code, { children: "use client" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'użyj klienta';\n\ntype Props = {\n jestUwierzytelniony: boolean;\n};\n\nconst Nav = ({ jestUwierzytelniony }: Props) => {\n return (\n \n );\n};\n\nexport default Nav;\n" }) }), "\n", _jsxs(_components.h3, { id: "trasy-api", children: ["Trasy API", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#trasy-api", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Przejście tras API było tak proste, jak przeniesienie poprzednich plików z ", _jsx(_components.code, { children: "/pages/api" }), " do ", _jsx(_components.code, { children: "/app/api" }), " z kilkoma zmianami:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), " został przemianowany na ", _jsx(_components.code, { children: "route.ts" }), "."] }), "\n", _jsxs(_components.li, { children: ["Wyeksportowaną funkcję przemianowano na ", _jsx(_components.code, { children: "GET" }), " lub inną odpowiednią nazwę metody."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "komponent-serwera", children: ["Komponent serwera", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#komponent-serwera", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["W folderze ", _jsx(_components.code, { children: "api" }), " mamy możliwość dodania funkcji ", _jsx(_components.code, { children: "server-only" }), ", które pozwalają komponentom serwera React na pobieranie danych."] }), "\n", _jsxs(_components.p, { children: ["W katalogu ", _jsx(_components.code, { children: "/app/api/logto/user" }), " znajduje się plik ", _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` gwarantuje, że żadne moduły, które importują kod w pliku\n// nigdy nie będą działać na kliencie. Chociaż ten konkretny interfejs api\n// obecnie nie korzysta z poufnych zmiennych środowiskowych, to\n// dobrą praktyką jest dodawanie `server-only` prewencyjnie.\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('Coś poszło nie tak!');\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: ["Ta funkcja może być następnie wywołana w ", _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

\n \n

Witaj Logto.

\n \n

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "wnioski", children: ["Wnioski", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wnioski", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Po zakończeniu migracji stwierdziliśmy, że nasz kod i struktura są znacznie bardziej uporządkowane i intuicyjne. Mimo że wydawało się, że jest to na początku wyzwanie, proces nie był wcale przerażający. Mamy nadzieję, że nasze doświadczenia mogą służyć jako cenny przewodnik, pomagając Ci z ufnością przenosić swoje projekty do App Router." }), "\n", _jsx(_components.p, { children: "W celu porównania, oto linki do naszych projektów, zarówno przed jak i po migracji:" }), "\n", _jsxs(_components.p, { children: ["Przed: ", _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: ["Po: ", _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: "Przez badanie tych projektów możesz lepiej zrozumieć zmiany i korzyści wprowadzone przez tę migrację." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Wypróbuj Logto Cloud Preview, aby zintegrować go z 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."); }