Modern web uygulamalar\u0131nda i\u00e7erik monetizasyonu ve mikro\u00f6deme y\u00f6ntemleri, kullan\u0131c\u0131 deneyimini bozmadan geliri art\u0131rman\u0131n yollar\u0131n\u0131 arayan geli\u015ftiriciler i\u00e7in \u00f6nemli bir sorun olmaya devam ediyor. Bu rehberde, Web3 tabanl\u0131 mikro\u00f6deme \u00e7\u00f6z\u00fcm\u00fc x402-next’i, Next.js 16’n\u0131n sundu\u011fu yenilik\u00e7i sunucu bile\u015fenleri ve hibrit olu\u015fturma yetenekleriyle nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m inceleyece\u011fiz.<\/p>\n
Web geli\u015ftirme d\u00fcnyas\u0131 h\u0131zla evrimle\u015firken, yeni teknolojiler ve yakla\u015f\u0131mlar ortaya \u00e7\u0131k\u0131yor. Bu de\u011fi\u015fim r\u00fczgar\u0131n\u0131n en dikkat \u00e7ekici akt\u00f6rlerinden ikisi \u015f\u00fcphesiz x402-next ve Next.js 16\u2019d\u0131r. Bu iki g\u00fc\u00e7l\u00fc arac\u0131n birle\u015fimi, geli\u015ftiricilere Web3 tabanl\u0131 uygulamalar olu\u015ftururken \u00fcst d\u00fczey performans, esneklik ve kullan\u0131c\u0131 deneyimi sunma potansiyeli ta\u015f\u0131r. Ancak bu potansiyeli tam olarak anlamak i\u00e7in, \u00f6ncelikle her bir bile\u015fenin neyi temsil etti\u011fini ve hangi temel prensipler \u00fczerine in\u015fa edildi\u011fini kavramak \u00f6nemlidir.<\/p>\n
Geleneksel web monetizasyon modelleri genellikle reklamlar, pahal\u0131 abonelikler veya karma\u015f\u0131k \u00f6deme duvarlar\u0131 \u00fczerine kuruludur. Bu modeller \u00e7o\u011fu zaman kullan\u0131c\u0131 deneyimini olumsuz etkilerken, i\u00e7erik \u00fcreticileri i\u00e7in de gelir elde etme s\u00fcrecini zorla\u015ft\u0131rabilir. \u0130\u015fte tam da bu noktada x402-next devreye giriyor. x402-next, \u00f6zellikle Lightning Network gibi Layer 2 \u00e7\u00f6z\u00fcmlerini kullanarak, neredeyse anl\u0131k ve \u00e7ok d\u00fc\u015f\u00fck maliyetli mikro\u00f6demeleri m\u00fcmk\u00fcn k\u0131lan bir protokold\u00fcr. Esasen, bir API veya i\u00e7eri\u011fe eri\u015fim kar\u015f\u0131l\u0131\u011f\u0131nda k\u00fc\u00e7\u00fck miktarda kripto para biriminin (genellikle Satoshi) \u00f6denmesini sa\u011flar.<\/p>\n
Bu sistemin en b\u00fcy\u00fck avantajlar\u0131ndan biri, kullan\u0131c\u0131lar\u0131n uzun kay\u0131t s\u00fcre\u00e7lerinden, kredi kart\u0131 bilgilerini girmekten veya b\u00fcy\u00fck miktarda \u00f6deme yapmaktan ka\u00e7\u0131narak, yaln\u0131zca ihtiya\u00e7 duyduklar\u0131 i\u00e7eri\u011fe veya hizmete eri\u015fim i\u00e7in minimum bir \u00fccret \u00f6demesine olanak tan\u0131mas\u0131d\u0131r. x402-next, Web3 ekosisteminin merkezinde yer alan merkeziyetsizlik ve \u015feffafl\u0131k ilkeleriyle uyumlu \u00e7al\u0131\u015f\u0131r. Geli\u015ftiriciler i\u00e7in, bu \u00e7\u00f6z\u00fcm, uygulamalar\u0131na entegre edilebilir basit API’ler sunarak, i\u00e7eriklerini veya API hizmetlerini monetizasyon modelleriyle zenginle\u015ftirmeleri i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 seti sa\u011flar. Dolay\u0131s\u0131yla, kullan\u0131c\u0131lar\u0131n c\u00fczdanlar\u0131n\u0131 ba\u011flamalar\u0131 ve belirlenen miktar\u0131 onaylamalar\u0131, bir i\u00e7eri\u011fe eri\u015fimin kilidini a\u00e7mak i\u00e7in yeterli hale gelir. Bu, \u00f6zellikle premium makaleler, \u00f6zel API u\u00e7 noktalar\u0131 veya oyun i\u00e7i \u00f6\u011feler gibi dijital varl\u0131klar\u0131n de\u011feri d\u00fc\u015f\u00fck, ancak y\u00fcksek hacimli al\u0131m sat\u0131m\u0131na olanak tan\u0131yan senaryolar i\u00e7in idealdir.<\/p>\n
Next.js, Vercel taraf\u0131ndan geli\u015ftirilen ve React tabanl\u0131 uygulamalar i\u00e7in pop\u00fcler bir a\u00e7\u0131k kaynakl\u0131 \u00e7er\u00e7evedir. Geli\u015ftiricilere sunucu taraf\u0131 olu\u015fturma (SSR), statik site olu\u015fturma (SSG) ve art\u0131ml\u0131 statik yenileme (ISR) gibi hibrit olu\u015fturma yetenekleri sunarak hem performans\u0131 hem de SEO’yu optimize etme imkan\u0131 tan\u0131r. Next.js 16 ile birlikte tan\u0131t\u0131lan en \u00e7\u0131\u011f\u0131r a\u00e7\u0131c\u0131 \u00f6zelliklerden biri ise “Sunucu Bile\u015fenleri” (Server Components) kavram\u0131d\u0131r. Bu \u00f6zellik, geli\u015ftiricilerin React bile\u015fenlerini sunucu taraf\u0131nda \u00e7al\u0131\u015ft\u0131rmas\u0131na olanak tan\u0131r, bu da istemci taraf\u0131na g\u00f6nderilen JavaScript miktar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r ve b\u00f6ylece ilk y\u00fckleme s\u00fcresini (TTI – Time To Interactive) iyile\u015ftirir.<\/p>\n
Sunucu Bile\u015fenleri, \u00f6zellikle veri \u00e7ekme ve hassas i\u015f mant\u0131\u011f\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rma gibi g\u00f6revler i\u00e7in idealdir. Veritaban\u0131 sorgular\u0131n\u0131 do\u011frudan bile\u015fenin i\u00e7inde yapabilir, API anahtarlar\u0131n\u0131 istemci taraf\u0131na if\u015fa etmeden sunucuda g\u00fcvende tutabilirsiniz. Bu, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan kritik uygulamalar ve g\u00fcvenlik odakl\u0131 senaryolar i\u00e7in muazzam avantajlar sunar. Next.js 16 ayr\u0131ca, geli\u015ftiricilere uygulama yap\u0131s\u0131n\u0131 daha sezgisel bir \u015fekilde y\u00f6netme yetene\u011fi veren App Router gibi yenilikleri de beraberinde getirmi\u015ftir. App Router, klas\u00f6r tabanl\u0131 y\u00f6nlendirme, d\u00fczenler, veri \u00e7ekme mekanizmalar\u0131 ve daha bir\u00e7ok \u00f6zelli\u011fi tek bir tutarl\u0131 yap\u0131da birle\u015ftirir. Bu g\u00fc\u00e7l\u00fc yetenekler sayesinde, Next.js 16, modern, h\u0131zl\u0131 ve g\u00fcvenli web uygulamalar\u0131 geli\u015ftirmek i\u00e7in vazge\u00e7ilmez bir ara\u00e7 haline gelmi\u015ftir. x402-next gibi Web3 entegrasyonlar\u0131yla birle\u015fti\u011finde, bu yetenekler, kullan\u0131c\u0131lar\u0131na kesintisiz ve y\u00fcksek performansl\u0131 bir deneyim sunarken, geli\u015ftiricilere de e\u015fsiz bir esneklik sa\u011flar.<\/p>\n
Modern web uygulamalar\u0131 geli\u015ftirilirken, teknolojilerin do\u011fru bir \u015fekilde birle\u015ftirilmesi, uygulaman\u0131n ba\u015far\u0131s\u0131 i\u00e7in hayati \u00f6nem ta\u015f\u0131r. x402-next’in Next.js 16 ile entegrasyonu, geli\u015ftiricilere ve son kullan\u0131c\u0131lara bir dizi \u00f6nemli avantaj sunar. Bu kombinasyon, \u00f6zellikle performans, g\u00fcvenlik, geli\u015ftirici deneyimi ve kullan\u0131c\u0131 memnuniyeti a\u00e7\u0131s\u0131ndan \u00e7\u0131\u011f\u0131r a\u00e7\u0131c\u0131 f\u0131rsatlar yarat\u0131r. Geleneksel yakla\u015f\u0131mlar\u0131n s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 a\u015farak, daha verimli ve gelece\u011fe d\u00f6n\u00fck bir web deneyimi sunmay\u0131 hedefler.<\/p>\n
Next.js 16’n\u0131n sunucu bile\u015fenleri, istemci taraf\u0131na g\u00f6nderilen JavaScript miktar\u0131n\u0131 azaltarak ilk y\u00fckleme s\u00fcresini ve etkile\u015fim zaman\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. x402-next entegrasyonunda bu, \u00f6deme do\u011frulama veya i\u00e7erik kilitleme gibi hassas i\u015flemlerin sunucuda g\u00fcvenli ve h\u0131zl\u0131 bir \u015fekilde yap\u0131labilmesi anlam\u0131na gelir. B\u00f6ylece, kullan\u0131c\u0131lar \u00f6deme ak\u0131\u015f\u0131nda tak\u0131lmadan veya uzun bekleme s\u00fcreleriyle kar\u015f\u0131la\u015fmadan i\u00e7eri\u011fe an\u0131nda eri\u015febilirler. \u00d6rne\u011fin, bir makaleyi okumak isteyen bir kullan\u0131c\u0131, \u00f6deme i\u015flemi arka planda sunucuda halledilirken, yaln\u0131zca minimum bir aray\u00fcz g\u00fcncellemesiyle i\u00e7eri\u011fe kavu\u015fur. Bu kesintisiz ak\u0131\u015f, kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131rken, potansiyel olarak d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 da y\u00fckseltir.<\/p>\n
Next.js’in App Router yap\u0131s\u0131 ve dosya tabanl\u0131 y\u00f6nlendirme sistemi, geli\u015ftiricilerin API rotalar\u0131n\u0131 ve kullan\u0131c\u0131 aray\u00fcz\u00fc bile\u015fenlerini organize etmelerini kolayla\u015ft\u0131r\u0131r. x402-next, net ve basit API’ler sunarak bu yap\u0131ya kolayca entegre edilebilir. Geli\u015ftiriciler, mikro\u00f6deme mant\u0131\u011f\u0131n\u0131 ayr\u0131 API rotalar\u0131nda veya sunucu bile\u015fenlerinde y\u00f6netebilir, b\u00f6ylece kodun okunabilirli\u011fini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. Ayr\u0131ca, Next.js’in zengin ekosistemi ve g\u00fc\u00e7l\u00fc geli\u015ftirme ara\u00e7lar\u0131, x402-next ile birlikte \u00e7al\u0131\u015f\u0131rken hata ay\u0131klama ve da\u011f\u0131t\u0131m s\u00fcre\u00e7lerini basitle\u015ftirir. Bu entegrasyon sayesinde, geli\u015ftiriciler \u00f6deme sisteminin karma\u015f\u0131kl\u0131\u011f\u0131yla u\u011fra\u015fmak yerine, uygulaman\u0131n temel \u00f6zelliklerine odaklanabilirler.<\/p>\n
Web3 teknolojilerinin do\u011fas\u0131 gere\u011fi, x402-next g\u00fcvenli ve \u015feffaf \u00f6deme i\u015flemleri sunar. Next.js 16’n\u0131n sunucu bile\u015fenleri ise hassas API anahtarlar\u0131n\u0131n veya i\u015f mant\u0131\u011f\u0131n\u0131n istemci taraf\u0131nda a\u00e7\u0131\u011fa \u00e7\u0131kmas\u0131n\u0131 engelleyerek ek bir g\u00fcvenlik katman\u0131 sa\u011flar. \u00d6deme do\u011frulama gibi kritik i\u015flemlerin sunucuda ger\u00e7ekle\u015ftirilmesi, potansiyel g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 azalt\u0131r ve k\u00f6t\u00fc niyetli sald\u0131r\u0131lara kar\u015f\u0131 daha diren\u00e7li bir yap\u0131 olu\u015fturur. Ayr\u0131ca, kripto para birimleriyle yap\u0131lan \u00f6demeler, geleneksel bankac\u0131l\u0131k sistemlerine k\u0131yasla genellikle daha az ki\u015fisel bilgi gerektirdi\u011finden, kullan\u0131c\u0131 gizlili\u011fini de art\u0131r\u0131r. Bu kombinasyon, hem geli\u015ftiriciler hem de kullan\u0131c\u0131lar i\u00e7in daha g\u00fcvenli bir dijital finansal etkile\u015fim ortam\u0131 yarat\u0131r.<\/p>\n
x402-next, Web3’\u00fcn sundu\u011fu merkeziyetsiz, sans\u00fcre dayan\u0131kl\u0131 ve a\u00e7\u0131k finansal sistemlerin bir par\u00e7as\u0131d\u0131r. Next.js 16 ise web geli\u015ftirmenin en modern ve verimli y\u00f6ntemlerini temsil eder. Bu iki teknolojinin birle\u015fimi, gelece\u011fin web’i i\u00e7in sa\u011flam bir temel olu\u015fturur. Mikro\u00f6deme modelleri, i\u00e7erik \u00fcreticileri i\u00e7in yeni gelir ak\u0131\u015flar\u0131 yarat\u0131rken, kullan\u0131c\u0131lar i\u00e7in de daha adil ve eri\u015filebilir bir internet vaat eder. Bu entegrasyonu benimsemek, uygulaman\u0131z\u0131 sadece g\u00fcncel de\u011fil, ayn\u0131 zamanda Web3 devriminin \u00f6n saflar\u0131nda konumland\u0131r\u0131r. B\u00f6ylece, hem teknolojik yenilikleri takip eder hem de kullan\u0131c\u0131lar\u0131n\u0131za de\u011fer odakl\u0131 bir deneyim sunars\u0131n\u0131z.<\/p>\n
x402-next’i Next.js 16 projenize dahil etmek, uygulaman\u0131za mikro\u00f6deme yetenekleri kazand\u0131rmak i\u00e7in atman\u0131z gereken temel ad\u0131mlardan olu\u015fur. Bu s\u00fcre\u00e7, yeni bir Next.js projesi olu\u015fturmaktan, gerekli ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fcklemeye ve son olarak x402-next’i uygulama mant\u0131\u011f\u0131n\u0131za entegre etmeye kadar uzan\u0131r. Bu rehberde, her ad\u0131m\u0131 ayr\u0131nt\u0131l\u0131 bir \u015fekilde ele alarak, projenizi sorunsuz bir \u015fekilde aya\u011fa kald\u0131rman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z.<\/p>\n
E\u011fer mevcut bir Next.js 16 projeniz yoksa, projenizin temelini olu\u015fturmakla ba\u015flay\u0131n. Next.js CLI (Komut Sat\u0131r\u0131 Aray\u00fcz\u00fc) size bu konuda b\u00fcy\u00fck kolayl\u0131k sa\u011flayacakt\u0131r. Terminalinizi a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n
\nnpx create-next-app@latest my-x402-next-app --typescript --eslint --app\n<\/pre>\n<\/code><\/p>\n
Bu komut, my-x402-next-app<\/code> ad\u0131nda yeni bir Next.js projesi olu\u015fturacakt\u0131r. --typescript<\/code> TypeScript deste\u011fi, --eslint<\/code> ESLint yap\u0131land\u0131rmas\u0131 ve --app<\/code> ise App Router'\u0131 kullanarak bir proje iskeleti olu\u015fturulmas\u0131n\u0131 sa\u011flar. Proje olu\u015fturulduktan sonra, projenizin dizinine girin:<\/p>\n\ncd my-x402-next-app\n<\/pre>\n<\/code><\/p>\n
\u015eimdi projenizi \u00e7al\u0131\u015ft\u0131rarak her \u015feyin yolunda oldu\u011funu kontrol edebilirsiniz:<\/p>\n
\nnpm run dev\n<\/pre>\n<\/code><\/p>\n
Taray\u0131c\u0131n\u0131zda http:\/\/localhost:3000<\/code> adresine giderek varsay\u0131lan Next.js ba\u015flang\u0131\u00e7 sayfas\u0131n\u0131 g\u00f6rmelisiniz.<\/p>\n2. x402-next Ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 Ekleme<\/h3>\n
x402-next'i kullanabilmek i\u00e7in gerekli paketleri projenize dahil etmeniz gerekir. Genellikle bu, @x402\/next<\/code> veya benzeri bir paketin y\u00fcklenmesini i\u00e7erir. Paketin ad\u0131 ve kullan\u0131m \u015fekli projenin g\u00fcncel versiyonuna g\u00f6re de\u011fi\u015fiklik g\u00f6sterebilir, bu y\u00fczden resmi d\u00f6k\u00fcmantasyona ba\u015fvurmak her zaman en iyisidir. Varsay\u0131msal olarak, a\u015fa\u011f\u0131daki gibi bir komut kullanabilirsiniz:<\/p>\n\nnpm install @x402\/next @x402\/core lightning-payreq\n# veya yarn kullan\u0131yorsan\u0131z:\n# yarn add @x402\/next @x402\/core lightning-payreq\n<\/pre>\n<\/code><\/p>\n
Bu paketler, x402-next protokol\u00fcn\u00fc projenizde kullanmak i\u00e7in gerekli temel mod\u00fclleri ve Lightning Network \u00f6deme isteklerini i\u015flemek i\u00e7in yard\u0131mc\u0131 ara\u00e7lar\u0131 sa\u011flar. Kurulum tamamland\u0131ktan sonra, package.json<\/code> dosyan\u0131z\u0131n dependencies<\/code> b\u00f6l\u00fcm\u00fcnde bu yeni ba\u011f\u0131ml\u0131l\u0131klar\u0131 g\u00f6receksiniz.<\/p>\n3. API Rotalar\u0131 ve Middleware ile x402-next Yap\u0131land\u0131rmas\u0131<\/h3>\n
x402-next, genellikle bir API rotas\u0131 veya middleware \u00fczerinden uygulaman\u0131z\u0131n backend'ine entegre edilir. Bu, i\u00e7erik veya hizmet eri\u015fimi i\u00e7in \u00f6deme gereksinimi kontrol\u00fcn\u00fc ve \u00f6deme do\u011frulama mant\u0131\u011f\u0131n\u0131 sunucu taraf\u0131nda tutman\u0131z\u0131 sa\u011flar. Next.js 16'n\u0131n App Router'\u0131 ile bu i\u015flemi kolayca yapabiliriz.<\/p>\n
a. Bir \u00d6deme Kontrol Middleware'i Olu\u015fturma<\/h4>\n
middleware.ts<\/code> dosyas\u0131, belirli rotalara gelen istekleri engellemek veya i\u015flemek i\u00e7in kullan\u0131labilir. Bu, x402-next i\u00e7in m\u00fckemmel bir kullan\u0131m durumudur. Projenizin k\u00f6k dizininde veya src<\/code> klas\u00f6r\u00fc alt\u0131nda bir middleware.ts<\/code> dosyas\u0131 olu\u015fturun:<\/p>\n\nimport { NextRequest, NextResponse } from 'next\/server';\nimport { createX402Middleware } from '@x402\/next';\n\n\/\/ \u00d6rnek bir \u00f6deme kontrol\u00fc fonksiyonu\n\/\/ Ger\u00e7ek uygulamada bu bir veritaban\u0131 sorgusu veya token kontrol\u00fc olabilir.\nconst isUserPaid = async (req: NextRequest) => {\n \/\/ Burada kullan\u0131c\u0131n\u0131n oturum bilgilerini veya \u00f6deme durumunu kontrol edin\n \/\/ \u00d6rne\u011fin, bir \u00e7erezden 'paid_access' flag'ini okuyabilirsiniz.\n \/\/ const hasPaid = req.cookies.get('paid_access')?.value === 'true';\n \/\/ return hasPaid;\n return false; \/\/ \u015eimdilik varsay\u0131lan olarak \u00f6denmemi\u015f kabul ediyoruz\n};\n\nconst x402Middleware = createX402Middleware({\n getInvoice: async (req: NextRequest, amount: number) => {\n \/\/ Burada kendi Lightning Network \u00f6deme faturan\u0131z\u0131 olu\u015fturmal\u0131s\u0131n\u0131z.\n \/\/ Bu genellikle bir backend servisinden gelir.\n console.log(Fatura talep edildi: ${amount} Satoshi<\/code>);\n \/\/ Ger\u00e7ek bir uygulamada, burada bir \u00f6deme sa\u011flay\u0131c\u0131s\u0131na istek g\u00f6ndereceksiniz.\n \/\/ \u00d6rnek olarak sabit bir fatura d\u00f6nd\u00fcr\u00fcyoruz (GER\u00c7EK KULLANIM \u0130\u00c7\u0130N UYGUN DE\u011e\u0130LD\u0130R)\n return {\n paymentRequest: 'lnbc1... (ger\u00e7ek bir fatura iste\u011fi buraya gelecek)',\n invoiceId: 'unique-invoice-id-123',\n };\n },\n onPaymentVerified: async (req: NextRequest, invoiceId: string) => {\n \/\/ \u00d6deme do\u011fruland\u0131\u011f\u0131nda yap\u0131lacak i\u015flemler\n console.log(\u00d6deme ba\u015far\u0131yla do\u011fruland\u0131: ${invoiceId}<\/code>);\n const response = NextResponse.next();\n \/\/ Kullan\u0131c\u0131ya eri\u015fim izni vermek i\u00e7in bir \u00e7erez ayarlayabilirsiniz\n response.cookies.set('paid_access', 'true', { maxAge: 60 * 60 }); \/\/ 1 saat\n return response;\n },\n shouldBlock: async (req: NextRequest) => {\n \/\/ Hangi yollar\u0131n x402 ile korunaca\u011f\u0131n\u0131 belirleyin\n if (req.nextUrl.pathname.startsWith('\/premium')) {\n return !(await isUserPaid(req)); \/\/ Sadece \u00f6deme yap\u0131lmad\u0131ysa engelle\n }\n return false; \/\/ Di\u011fer yollar\u0131 engelleme\n },\n});\n\nexport async function middleware(req: NextRequest) {\n return x402Middleware(req);\n}\n\nexport const config = {\n matcher: ['\/premium\/:path*', '\/api\/x402\/:path*'], \/\/ x402'nin koruyaca\u011f\u0131 rotalar\n};\n<\/pre>\n<\/code><\/p>\n
Yukar\u0131daki middleware, \/premium<\/code> ile ba\u015flayan t\u00fcm rotalara gelen istekleri kontrol eder. E\u011fer kullan\u0131c\u0131 \u00f6deme yapmam\u0131\u015fsa, x402-next bir \u00f6deme faturas\u0131 olu\u015fturur ve kullan\u0131c\u0131n\u0131n i\u00e7eri\u011fe eri\u015fimi engellenir. \u00d6deme yap\u0131ld\u0131\u011f\u0131nda ise onPaymentVerified<\/code> fonksiyonu \u00e7al\u0131\u015f\u0131r ve kullan\u0131c\u0131ya eri\u015fim izni verilir. getInvoice<\/code> fonksiyonunu kendi Lightning Network entegrasyonunuza g\u00f6re d\u00fczenlemeniz gerekti\u011fini unutmay\u0131n. Bu genellikle bir d\u0131\u015f hizmet veya kendi Lightning d\u00fc\u011f\u00fcm\u00fcn\u00fczle etkile\u015fimi i\u00e7erir.<\/p>\nb. API Rotas\u0131 Olu\u015fturma (\u0130ste\u011fe Ba\u011fl\u0131 ama Faydal\u0131)<\/h4>\n
Bazen \u00f6deme faturas\u0131 olu\u015fturma gibi belirli i\u015flemleri ayr\u0131 bir API rotas\u0131nda tutmak daha temiz bir yap\u0131 sa\u011flar. \u00d6rne\u011fin, app\/api\/x402\/invoice\/route.ts<\/code> ad\u0131nda bir dosya olu\u015fturabilirsiniz:<\/p>\n\nimport { NextRequest, NextResponse } from 'next\/server';\nimport { createInvoice } from '@\/utils\/lightning'; \/\/ Kendi Lightning util'inizi varsay\u0131yoruz\n\nexport async function POST(req: NextRequest) {\n try {\n const { amount } = await req.json();\n if (!amount || typeof amount !== 'number') {\n return NextResponse.json({ error: 'Ge\u00e7ersiz miktar' }, { status: 400 });\n }\n const invoice = await createInvoice(amount); \/\/ Kendi fatura olu\u015fturma mant\u0131\u011f\u0131n\u0131z\n return NextResponse.json(invoice);\n } catch (error) {\n console.error('Fatura olu\u015fturma hatas\u0131:', error);\n return NextResponse.json({ error: 'Fatura olu\u015fturulamad\u0131' }, { status: 500 });\n }\n}\n<\/pre>\n<\/code><\/p>\n
Bu rotay\u0131 middleware'deki getInvoice<\/code> fonksiyonunda kullanabilirsiniz. Bu yap\u0131, mikro\u00f6deme entegrasyonunuzu mod\u00fcler hale getirir ve y\u00f6netimi kolayla\u015ft\u0131r\u0131r. Her ad\u0131mda, projenizin gereksinimlerine ve kullanmak istedi\u011finiz Lightning Network hizmetine g\u00f6re uyarlamalar yapman\u0131z gerekecektir. x402-next'in g\u00fcc\u00fc, bu t\u00fcr esneklikleri kolayca sa\u011flayabilmesinden gelir.<\/p>\nKullan\u0131c\u0131 Aray\u00fcz\u00fcnde x402-next Deneyimi: Bile\u015fen Olu\u015fturma ve Dinamik \u0130\u00e7erik Monetizasyonu<\/h2>\n
x402-next'in Next.js 16 projenize entegrasyonunun \u00f6nemli bir par\u00e7as\u0131 da, kullan\u0131c\u0131 aray\u00fcz\u00fcnde (UI) \u00f6deme ak\u0131\u015f\u0131n\u0131 y\u00f6netmektir. Kullan\u0131c\u0131lar\u0131n bir i\u00e7eri\u011fe veya API'ye eri\u015fim i\u00e7in \u00f6deme yapmalar\u0131 gerekti\u011finde, bu durumu onlara a\u00e7\u0131k\u00e7a belirtmeli ve sorunsuz bir \u00f6deme deneyimi sunmal\u0131s\u0131n\u0131z. Next.js'in zengin bile\u015fen yap\u0131s\u0131 ve React'\u0131n dinamik do\u011fas\u0131, bu deneyimi tasarlaman\u0131za olanak tan\u0131r. Bu b\u00f6l\u00fcmde, x402-next ile i\u00e7eriklerinizi nas\u0131l kilitleyece\u011finizi ve \u00f6deme ak\u0131\u015f\u0131n\u0131 kullan\u0131c\u0131 dostu bir \u015fekilde nas\u0131l y\u00f6netece\u011finizi ele alaca\u011f\u0131z.<\/p>\n
1. x402-next Bile\u015fenlerini Kullanarak \u0130\u00e7eri\u011fi Kitleme<\/h3>\n
Diyelim ki \/premium<\/code> yolunda eri\u015filebilen bir premium makale sayfan\u0131z var. Bu sayfan\u0131n i\u00e7eri\u011finin yaln\u0131zca \u00f6deme yapan kullan\u0131c\u0131lara g\u00f6r\u00fcnmesini istiyorsunuz. Next.js Sunucu Bile\u015fenleri ve x402-next middleware'i bu senaryoda harika bir kombinasyon olu\u015fturur. Middleware, kullan\u0131c\u0131n\u0131n \u00f6deme durumunu kontrol edecek ve e\u011fer \u00f6deme yap\u0131lmad\u0131ysa, bir 402 Payment Required yan\u0131t\u0131 veya \u00f6zel bir \u00f6deme ekran\u0131 d\u00f6nd\u00fcrecektir. \u0130stemci taraf\u0131nda ise, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcz bu durumu yakalay\u0131p uygun bir \u015fekilde tepki verebilir.<\/p>\n\u00d6ncelikle, premium i\u00e7eri\u011finizi i\u00e7eren bir sunucu bile\u015feni olu\u015ftural\u0131m. \u00d6rne\u011fin, app\/premium\/page.tsx<\/code>:<\/p>\n\n\/\/ app\/premium\/page.tsx\nimport { notFound } from 'next\/navigation';\nimport { cookies } from 'next\/headers'; \/\/ Sunucu bile\u015fenlerinde \u00e7erezlere eri\u015fim\n\nasync function getPremiumContent() {\n const cookieStore = cookies();\n const hasPaid = cookieStore.get('paid_access')?.value === 'true';\n\n if (!hasPaid) {\n \/\/ Kullan\u0131c\u0131 \u00f6deme yapmad\u0131ysa, ya 402 d\u00f6nd\u00fcr ya da \u00f6zel bir UI bile\u015feni g\u00f6ster\n \/\/ Middleware 402 d\u00f6nd\u00fcrece\u011fi i\u00e7in, burada sadece i\u00e7eri\u011fi engelliyoruz\n return null; \n }\n\n \/\/ \u00d6deme yap\u0131ld\u0131ysa, i\u00e7eri\u011fi \u00e7ek\n \/\/ Bu k\u0131s\u0131m bir veritaban\u0131 sorgusu veya ba\u015fka bir API \u00e7a\u011fr\u0131s\u0131 olabilir\n const content = {\n title: \"x402-next ile Premium Makale\",\n body: \"Bu, sadece \u00f6deme yapan abonelerimiz i\u00e7in \u00f6zel olarak haz\u0131rlanm\u0131\u015f derinlemesine bir analizdir. Web3 mikro\u00f6demelerinin gelece\u011fi...\",\n };\n return content;\n}\n\nexport default async function PremiumPage() {\n const content = await getPremiumContent();\n\n if (!content) {\n \/\/ Kullan\u0131c\u0131 \u00f6deme yapmad\u0131ysa veya eri\u015fim izni yoksa\n \/\/ Burada kullan\u0131c\u0131ya \u00f6deme yapmas\u0131 gerekti\u011fini bildiren bir bile\u015fen g\u00f6sterebiliriz\n \/\/ Veya middleware zaten 402 d\u00f6nd\u00fcrd\u00fcyse bu k\u0131sma hi\u00e7 gelmeyebilir.\n return (\n \n Premium \u0130\u00e7eri\u011fe Eri\u015fim Engellendi<\/h2>\n
Bu i\u00e7eri\u011fe eri\u015fmek i\u00e7in l\u00fctfen \u00f6deme yap\u0131n.<\/p>\n