"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "önkoşullar", "hProperties": { "id": "önkoşullar" } }, "depth": 2, "value": "Önkoşullar" }, { "data": { "id": "logtoyu-yapılandırın", "hProperties": { "id": "logtoyu-yapılandırın" } }, "depth": 2, "value": "Logto'yu Yapılandırın" }, { "data": { "id": "nextjs-uygulamasını-kurun", "hProperties": { "id": "nextjs-uygulamasını-kurun" } }, "depth": 2, "value": "Next.js uygulamasını kurun" }, { "data": { "id": "logto-kütüphanesini-tanımlayın", "hProperties": { "id": "logto-kütüphanesini-tanımlayın" } }, "depth": 2, "value": "Logto kütüphanesini tanımlayın" }, { "data": { "id": "giriş-ve-çıkış-düğmelerini-uygulayın", "hProperties": { "id": "giriş-ve-çıkış-düğmelerini-uygulayın" } }, "depth": 2, "value": "Giriş ve çıkış düğmelerini uygulayın" }, { "data": { "id": "giriş", "hProperties": { "id": "giriş" } }, "depth": 3, "value": "Giriş" }, { "data": { "id": "çıkış", "hProperties": { "id": "çıkış" } }, "depth": 3, "value": "Çıkış" }, { "data": { "id": "geri-çağırma-sayfası-hazırlayın", "hProperties": { "id": "geri-çağırma-sayfası-hazırlayın" } }, "depth": 2, "value": "Geri çağırma sayfası hazırlayın" }, { "data": { "id": "kullanıcı-bağlamını-görüntüleme-ve-güvenli-sayfa", "hProperties": { "id": "kullanıcı-bağlamını-görüntüleme-ve-güvenli-sayfa" } }, "depth": 2, "value": "Kullanıcı bağlamını görüntüleme ve güvenli sayfa" }, { "data": { "id": "sonuç", "hProperties": { "id": "sonuç" } }, "depth": 2, "value": "Sonuç" }]; const readingTime = { "minutes": 3, "words": 976, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/api-reference/functions/server-actions", children: "Sunucu Eylemleri" }), " geleneksel REST API'lerine ihtiyaç duymadan güçlü web uygulamaları oluşturmak için yenilenmiş bir yaklaşım sunar. Bunu daha önce ", _jsx(_components.a, { href: "https://blog.logto.io/nextjs-server-actions-stateless-session/", children: "makalemizde" }), " tartışmıştık."] }), "\n", _jsxs(_components.p, { children: ["Bugün, deneye tabi bir özellik olmasına rağmen ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next", children: "Next.js SDK'mızda" }), " Sunucu Eylemleri için resmi desteği duyurmaktan heyecan duyuyoruz."] }), "\n", _jsxs(_components.p, { children: ["Hızlı bir genel bakış için ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "bu örneği" }), " inceleyin ve bu kılavuzda Logto'yu Sunucu Eylemleri ile nasıl entegre edeceğimizi ayrıntılı olarak takip edin."] }), "\n", _jsxs(_components.h2, { id: "önkoşullar", children: ["Önkoşullar", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#önkoşullar", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Başlamak için aşağıdakilere sahip olduğunuzdan emin olun:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Çalışan bir Logto örneği veya bir Logto Cloud hesabına erişim." }), "\n", _jsx(_components.li, { children: "Sunucu Eylemleri özelliği etkinleştirilmiş bir Next.js projesi." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "logtoyu-yapılandırın", children: ["Logto'yu Yapılandırın", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logtoyu-yapılandırın", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Logto'yu kendi barındırıyorsanız, Logto örneğinizi ayarlamak için Logto \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started/", children: "Başlarken" }), "\" belgelerine bakın."] }), "\n", _jsxs(_components.p, { children: ["Logto Cloud kullanıyorsanız ", _jsx(_components.code, { children: "https://cloud.logto.io/" }), " URL'sini girerek veya kendi barındırma için ayarladığınız uç noktayı giderek Logto Konsolunu açın."] }), "\n", _jsx(LogtoCloudButton, { children: "Logto Cloud'u açın ve yapılandırmayı zahmetsizce tamamlayın" }), "\n", _jsx(_components.p, { children: "Sonra \"Uygulamalar\" sekmesine gidin ve \"Uygulama oluştur\"a tıklayın." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/applications_tab_67594608b6.png", alt: "Uygulamalar sekmesi" }) }), "\n", _jsx(_components.p, { children: "Görünen modalda \"Next.js (Uygulama Yöneticisi)\" seçeneğini seçin ve \"Next.js Uygulaması\" gibi bir uygulama adı verin. Ardından \"Uygulama oluştur\"a tıklayın." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_73ae186100.webp", alt: "Uygulama oluştur" }) }), "\n", _jsx(_components.p, { children: "Logto'da bir eğitim sayfasına yönlendirileceksiniz. Uygulama detayları sayfasına ilerlemek için \"Bitir ve tamamlandı\"ya tıklayın." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_details_e27b24d4a0.webp", alt: "Uygulama detayları" }) }), "\n", _jsx(_components.p, { children: "\"Yönlendirme URI'leri\" bölümüne aşağıdaki değeri girin:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "[your-nextjs-base-url]/callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Örneğin, Next.js'i ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "http://localhost:3000" }) }), " üzerinde barındırıyorsanız, değer şöyle olmalıdır:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http://localhost:3000/callback\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/save_changes_2314e02212.webp", alt: "Değişiklikleri kaydet" }) }), "\n", _jsx(_components.p, { children: "Altta bulunan \"Değişiklikleri Kaydet\" düğmesine tıklayın. Başarıyla gerçekleştikten sonra, bu sayfayı açık tutun çünkü Next.js yapılandırması için faydalı olacaktır." }), "\n", _jsxs(_components.h2, { id: "nextjs-uygulamasını-kurun", children: ["Next.js uygulamasını kurun", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nextjs-uygulamasını-kurun", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["En son Next.js sürümüne sahip bir projeye sahip olduğunuzdan emin olun. Henüz bir tane yoksa, bir tane oluşturmak için ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "resmi kurulum kılavuzunu" }), " takip edebilirsiniz."] }), "\n", _jsxs(_components.p, { children: ["Bu kılavuzun yazıldığı sırada, bu özellik deneysel olup ", _jsx(_components.code, { children: "next.config.js" }), " içinde etkinleştirilmelidir."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "module.exports = {\n experimental: {\n serverActions: true,\n },\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "logto-kütüphanesini-tanımlayın", children: ["Logto kütüphanesini tanımlayın", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-kütüphanesini-tanımlayın", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "npm" }), " kullanarak ", _jsx(_components.code, { children: "@logto/next" }), " modülünü şu şekilde kurarak başlayın:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i @logto/next\n" }) }), "\n", _jsxs(_components.p, { children: ["Ayrıca ", _jsx(_components.code, { children: "yarn" }), " veya ", _jsx(_components.code, { children: "pnpm" }), " kullanabilirsiniz."] }), "\n", _jsxs(_components.p, { children: ["Daha sonra bazı \"sunucu eylemleri\" işlevleri oluşturalım, yeni dosya ", _jsx(_components.code, { children: "libraries/logto.ts:" }), " oluşturulacak"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use server';\n\nimport LogtoClient from '@logto/next/server-actions';\nimport { cookies } from 'next/headers';\n\nconst config = {\n appId: process.env.APP_ID ?? '', // Bunu detaylar sayfasında bulabilirsiniz.\n appSecret: process.env.APP_SECRET ?? '', // Bunu detaylar sayfasında bulabilirsiniz.\n endpoint: process.env.ENDPOINT ?? 'http://localhost:3001', // Bunu detaylar sayfasında bulabilirsiniz.\n baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',\n cookieSecret: process.env.COOKIE_SECRET ?? 'en az 32 karakter uzunluğunda karmaşık şifre',\n cookieSecure: process.env.NODE_ENV === 'production',\n};\n\nconst logtoClient = new LogtoClient(config);\n\nconst cookieName = `logto:${config.appId}`;\n\nconst setCookies = (value?: string) => {\n if (value === undefined) {\n return;\n }\n\n cookies().set(cookieName, value, {\n maxAge: 14 * 3600 * 24,\n secure: config.cookieSecure,\n });\n};\n\nconst getCookie = () => {\n return cookies().get(cookieName)?.value ?? '';\n};\n\nexport const signIn = async () => {\n const { url, newCookie } = await logtoClient.handleSignIn(\n getCookie(),\n `${config.baseUrl}/callback`\n );\n\n setCookies(newCookie);\n\n return url;\n};\n\nexport const handleSignIn = async (searchParams: Record) => {\n // searchParams nesnesini bir sorgu dizesine dönüştür.\n const search = new URLSearchParams(searchParams).toString();\n\n const newCookie = await logtoClient.handleSignInCallback(\n getCookie(),\n `${config.baseUrl}/callback?${search}`\n );\n\n setCookies(newCookie);\n};\n\nexport const signOut = async () => {\n const url = await logtoClient.handleSignOut(getCookie(), `${config.baseUrl}/callback`);\n\n setCookies('');\n\n return url;\n};\n\nexport const getLogtoContext = async () => {\n return await logtoClient.getLogtoContext(getCookie());\n};\n" }) }), "\n", _jsx(_components.p, { children: "Bu dosyada, kimlik doğrulama amaçları için dört işlevi dışa aktarıyoruz. İlk satırda \"'use server';\" ifadesi, dosyadaki kodun yalnızca sunucu tarafında çalışabileceğini belirtir. Çerez tabanlı oturumları yönetmek için \"'next/headers';\" kullanıyoruz." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "\"user server\"" }), " referansı: ", _jsx(_components.a, { href: "https://react.dev/reference/react/use-server", children: "https://react.dev/reference/react/use-server" })] }), "\n", _jsxs(_components.li, { children: ["Çerezleri yönetmek için ", _jsx(_components.code, { children: "\"next/headers\"" }), " kullanma referansı: ", _jsx(_components.a, { href: "https://nextjs.org/docs/api-reference/next/headers", children: "https://nextjs.org/docs/api-reference/next/headers" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "Dışa aktardığımız bu işlevler doğrudan istemci tarafı React bileşeninden çağrılabilir. Bu, Sunucu Eylemlerini kullanmanın en büyük avantajıdır. Bu işlevleri nasıl kullanacağımızı görmek için bir sonraki bölüme geçelim." }), "\n", _jsxs(_components.h2, { id: "giriş-ve-çıkış-düğmelerini-uygulayın", children: ["Giriş ve çıkış düğmelerini uygulayın", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#giriş-ve-çıkış-düğmelerini-uygulayın", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Kimlik doğrulama işlevleri ile, sayfayı oluşturalım. Giriş ve çıkış işlemlerini başlatmak için iki istemci bileşeni oluşturacağız." }), "\n", _jsxs(_components.h3, { id: "giriş", children: ["Giriş", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#giriş", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/app/sign-in.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { signIn } from '../libraries/logto';\n\nconst SignIn = () => {\n const router = useRouter();\n\n const handleClick = async () => {\n const redirectUrl = await signIn();\n\n router.push(redirectUrl);\n };\n\n return ;\n};\n\nexport default SignIn;\n" }) }), "\n", _jsxs(_components.p, { children: ["Burada, önceki bölümde tanımlanan ", _jsx(_components.code, { children: "signIn" }), " işlevini içe aktarıyoruz. Kod sunucu tarafında yürütülmesine rağmen, bu işlev yine de bir kullanıcı giriş düğmesine tıkladığında ", _jsx(_components.code, { children: ";\n};\n\nexport default SignOut;\n" }) }), "\n", _jsx(_components.p, { children: "Çıkış işlemi, giriş işlemine benzer şekilde gerçekleştirilir." }), "\n", _jsxs(_components.h2, { id: "geri-çağırma-sayfası-hazırlayın", children: ["Geri çağırma sayfası hazırlayın", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#geri-çağırma-sayfası-hazırlayın", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Standart bir OIDC kimlik sağlayıcısı olarak, Logto oturum açma işlemi tamamlandıktan sonra kullanıcıları bir geri çağırma URL'sine yönlendirir. Bu nedenle, oturum açma sonucu yönetmek için bir geri çağırma sayfası hazırlamamız gerekmektedir." }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "/app/callback/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { handleSignIn } from '../../libraries/logto';\nimport { useEffect } from 'react';\n\ntype Props = {\n searchParams: Record;\n};\n\nexport default function Callback({ searchParams }: Props) {\n const router = useRouter();\n\n useEffect(() => {\n handleSignIn(searchParams).then(() => {\n router.push('/');\n });\n }, [router, searchParams]);\n\n return

Signing in...

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Burada ", _jsx(_components.code, { children: "useEffect" }), " ile bir istemci bileşenini kullanıyoruz, bu da iyi bir kullanıcı deneyimi için \"\" yükleniyor \"\" sayfasını görüntülmeyi kolaylaştırır."] }), "\n", _jsxs(_components.h2, { id: "kullanıcı-bağlamını-görüntüleme-ve-güvenli-sayfa", children: ["Kullanıcı bağlamını görüntüleme ve güvenli sayfa", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kullanıcı-bağlamını-görüntüleme-ve-güvenli-sayfa", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Şimdi, Logto SDK'sının kullanımını göstermek için minimal bir ana sayfa yapalım. Gerekirse, bilinmeyen kullanıcılardan herhangi bir kaynağı koruyarak ", _jsx(_components.code, { children: "isAuthenticated" }), " değerini kontrol edin ve giriş sayfasına yönlendirin veya hata mesajları gösterin."] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "app/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getLogtoContext } from '../libraries/logto';\nimport styles from './page.module.css';\nimport SignIn from './sign-in';\nimport SignOut from './sign-out';\n\nexport default async function Home() {\n const { isAuthenticated, claims } = await getLogtoContext();\n return (\n

Merhaba Logto.

{isAuthenticated ? : }

\n {claims && (\n

İddialar:

\n \n \n \n \n \n \n \n \n {Object.entries(claims).map(([key, value]) => (\n \n \n \n \n ))}\n \n

İsim	Değer
{key}	{value}

\n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Görüldüğü üzere, ", _jsx(_components.code, { children: "useEffect" }), " ve karmaşık durum değişikliklerini yönetme ihtiyacını ortadan kaldıran bir ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components", children: "sunucu bileşeni" }), " oluşturulmuştur."] }), "\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: "Sunucu eylemleri, geleneksel REST API'lerine dayanan geleneksel Next.js uygulamalarına kıyasla kimlik doğrulamanın uygulanması için daha basit ve doğrudan bir yol sunar." }), "\n", _jsxs(_components.p, { children: ["Tüm kod örneği bu depoda bulunabilir: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample" })] }), "\n", _jsx(_components.p, { children: "Neden Logto Cloud'u denemiyor ve kolaylığı aksiyonda deneyimlemiyorsun?" }), "\n", _jsx(LogtoCloudButton, { children: "Logto'yu bugün 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."); }