"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "giriş", "hProperties": { "id": "giriş" } }, "depth": 2, "value": "Giriş" }, { "data": { "id": "göç-süreci", "hProperties": { "id": "göç-süreci" } }, "depth": 2, "value": "Göç süreci" }, { "data": { "id": "sayfa-düzeni-yeni-bir-yapı", "hProperties": { "id": "sayfa-düzeni-yeni-bir-yapı" } }, "depth": 3, "value": "Sayfa düzeni: Yeni bir yapı" }, { "data": { "id": "i̇stemci-bileşeni", "hProperties": { "id": "i̇stemci-bileşeni" } }, "depth": 3, "value": "İstemci bileşeni" }, { "data": { "id": "api-rotaları", "hProperties": { "id": "api-rotaları" } }, "depth": 3, "value": "API rotaları" }, { "data": { "id": "sunucu-bileşeni", "hProperties": { "id": "sunucu-bileşeni" } }, "depth": 3, "value": "Sunucu bileşeni" }, { "data": { "id": "sonuç", "hProperties": { "id": "sonuç" } }, "depth": 2, "value": "Sonuç" }]; const readingTime = { "minutes": 2, "words": 585, "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: "giriş", children: ["Giriş", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#giriş", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Logto'da, geleneksel \"sayfalar\" klasörünü kullanarak Logto'yu Next.js ile entegre etmeyi etkili bir şekilde gösteren bir ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-sample", children: "örnek proje" }), " ile birlikte ", _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/integrate-logto/next-js/", children: "@logto/next" }), " adında bir Next.js SDK'si sunuyoruz. Bu proje, API rotaları, ", _jsx(_components.code, { children: "getServerSideProps" }), ", Client-side Fetching ve hatta edge runtime örneklerini sunar."] }), "\n", _jsxs(_components.p, { children: ["Next.js 13, bize çığır açan ", _jsx(_components.a, { href: "https://nextjs.org/docs/app", children: "Uygulama Yönlendiricisi" }), "'ni (daha önce app directory olarak adlandırılmıştı) getirdi, yeni özellikler ve kurallar tanıtıldı ki bu hızlı bir şekilde geliştirici topluluğunda popüler hale geldi. Logto'nun Next.js SDK'si bu yeni özellikleri tam olarak desteklediği için, bu Uygulama Yönlendiricisini kullanarak yeni bir örnek proje oluşturmak için ilham aldık."] }), "\n", _jsxs(_components.p, { children: ["Bu gönderide, eski örnek projemizi Uygulama Yönlendiricisini kullanarak yeni birine taşımanın ayrıntılarını sizinle paylaşacağız. Proje, eski örnek projenin üzerine inşa edildi ve resmi göç ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration", children: "rehberi" }), "'ni izledi. Süreç birkaç adımı içeriyordu: sayfalar ve düzenler oluşturma, API rotalarını taşıma ve sunucu ve istemci bileşenlerini kullanma."] }), "\n", _jsx(LogtoCloudButton, { children: "Next.js 13 ile entegrasyon için Logto Cloud Preview deneyin" }), "\n", _jsxs(_components.h2, { id: "göç-süreci", children: ["Göç süreci", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#göç-süreci", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "sayfa-düzeni-yeni-bir-yapı", children: ["Sayfa düzeni: Yeni bir yapı", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sayfa-düzeni-yeni-bir-yapı", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Orijinal ayarlarımızda, SWR alıcıyı kurmak için bir ", _jsx(_components.code, { children: "_app.tsx" }), " dosyası ve ana sayfa olarak hizmet veren bir ", _jsx(_components.code, { children: "index.tsx" }), " dosyası kullandık."] }), "\n", _jsxs(_components.p, { children: ["Uygulama Yönlendiricisi ile bunlar ", _jsx(_components.code, { children: "layout.tsx" }), " ve ", _jsx(_components.code, { children: "page.tsx" }), " olur. ", _jsx(_components.code, { children: "layout.tsx" }), " dosyası, çekirdek bilgileri içerirken, ", _jsx(_components.code, { children: "page.tsx" }), " eski ", _jsx(_components.code, { children: "index.tsx" }), " dosyasının işlevselliğini yansıtır."] }), "\n", _jsxs(_components.h3, { id: "i̇stemci-bileşeni", children: ["İstemci bileşeni", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#i̇stemci-bileşeni", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "İlk adımda bir aksilik ortaya çıktı: buton için bir \"onClick\" işleyici ayarlamak başarısız oldu, bir hata mesajı, \"Etkinlik işleyicileri İstemci Bileşeni özelliklerine geçirilemez. Etkileşim gerekiyorsa, bunun bir kısmını İstemci Bileşeni'ne dönüştürmeyi düşünün.\" dedi." }), "\n", _jsxs(_components.p, { children: ["Bu sorunu çözmek için, sorunlu bölümü ayrı bir bileşene ayırdık ve dosyayı ", _jsx(_components.code, { children: "use client" }), " ile öne çıkardık:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'kullanıcı istemci';\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-rotaları", children: ["API rotaları", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-rotaları", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["API rotalarını taşıma işlemi, ", _jsx(_components.code, { children: "/pages/api" }), "'den ", _jsx(_components.code, { children: "/app/api" }), "'ye birkaç düzeltmeyle önceki dosyaları aktarmak kadar basitti:"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index.ts" }), ", ", _jsx(_components.code, { children: "route.ts" }), " olarak yeniden adlandırıldı."] }), "\n", _jsxs(_components.li, { children: ["Dışa aktarılan fonksiyon, ", _jsx(_components.code, { children: "GET" }), " veya başka bir uygun yöntem adına yeniden adlandırıldı."] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "sunucu-bileşeni", children: ["Sunucu bileşeni", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sunucu-bileşeni", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "api" }), " klasörü içinde, React Sunucu Bileşenlerinin veri almasına izin veren ", _jsx(_components.code, { children: "server-only" }), " fonksiyonlar ekleyebilme yeteneklerine sahibiz."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/app/api/logto/user" }), " dizininde bir ", _jsx(_components.code, { children: "get-user.tsx" }), " dosyası bulunmaktadır:"] }), "\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` garantiler, bu dosyadaki kodu içe aktaran modüllerin\n// asla istemcide çalışmayacağı. Çok özel bir api\n// şu anda hassas ortam değişkenlerini kullanmıyor olsa da, bunu\n// önleyici olarak eklemek iyi bir uygulamadır.\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('Bir şeyler ters gitti!');\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: ["Bu fonksiyon daha sonra ", _jsx(_components.code, { children: "page.tsx" }), "'de çağrılabilir:"] }), "\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

Merhaba Logto.

\n );\n}\n\nexport default Page.\n" }) }), "\n", _jsxs(_components.h2, { id: "sonuç", children: ["Sonuç", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sonuç", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Göçü tamamladıktan sonra, kodumuzun ve yapımızın önemli ölçüde daha düzgün ve sezgisel hale geldiğini gördük. Başlangıçta zor görünmesine rağmen, süreç hiç de ürkütücü değildi. Deneyimimizin, projelerinizi Uygulama Yönlendiricisine güvenle taşımanıza yardımcı olabilecek değerli bir rehber olarak hizmet edebileceğini umuyoruz." }), "\n", _jsx(_components.p, { children: "Karşılaştırma için, göç öncesi ve sonrası projelerimize ait bağlantıları şu şekildedir:" }), "\n", _jsxs(_components.p, { children: ["Önce: ", _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: ["Sonra: ", _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: "Bu projeleri inceleyerek, bu göç tarafından getirilen değişiklikler ve avantajları daha net bir şekilde anlayabilirsiniz." }), "\n", _jsx("br", {}), "\n", _jsx(LogtoCloudButton, { children: "Next.js 13 ile entegrasyon için Logto Cloud Preview deneyin" })] }); } 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."); }