Next.js App Router ile tRPC 11 Kurulumu: 2025 Rehberi<\/b><\/p>\n
Modern web uygulamalar\u0131 geli\u015ftirmek, hem performans\u0131 hem de geli\u015ftirici deneyimini bir arada sunan g\u00fc\u00e7l\u00fc ara\u00e7lar gerektirir. Peki, u\u00e7tan uca tip g\u00fcvenli\u011fi sa\u011flarken, API geli\u015ftirmenin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131 minimuma indirmek m\u00fcmk\u00fcn m\u00fc? Bu kapsaml\u0131 rehberde, Next.js’in \u00e7\u0131\u011f\u0131r a\u00e7an App Router’\u0131 ile tRPC 11’in nas\u0131l entegre edilece\u011fini ad\u0131m ad\u0131m inceleyece\u011fiz. Geli\u015ftirme s\u00fcrecinizi ba\u015ftan sona d\u00f6n\u00fc\u015ft\u00fcrecek bu g\u00fc\u00e7l\u00fc kombinasyonla, 2025 ve sonras\u0131 i\u00e7in \u00f6l\u00e7eklenebilir ve bak\u0131m\u0131 kolay uygulamalar olu\u015fturman\u0131n kap\u0131lar\u0131n\u0131 aralay\u0131n.<\/p>\n
Geli\u015ftiriciler olarak, veri ak\u0131\u015f\u0131n\u0131 y\u00f6netmek, istemci ve sunucu aras\u0131nda g\u00fcvenilir bir ileti\u015fim kurmak her zaman temel zorluklar\u0131m\u0131zdan biri olmu\u015ftur. Geleneksel yakla\u015f\u0131mlar \u00e7o\u011fu zaman bu s\u00fcreci gereksiz yere karma\u015f\u0131k hale getirirken, tRPC ve Next.js App Router’\u0131n birle\u015fimi adeta bir kurtar\u0131c\u0131 gibi sahneye \u00e7\u0131k\u0131yor. Bu ikilinin sundu\u011fu sinerji, hem geli\u015ftirme h\u0131z\u0131n\u0131 art\u0131r\u0131yor hem de hatalara kar\u015f\u0131 daha diren\u00e7li uygulamalar olu\u015fturman\u0131za olanak tan\u0131yor. \u00d6zellikle 2025 trendlerinde, h\u0131z ve g\u00fcvenilirli\u011fin yan\u0131 s\u0131ra geli\u015ftirici deneyimi de b\u00fcy\u00fck bir \u00f6nem ta\u015f\u0131yor.<\/p>\n
API geli\u015ftirme d\u00fcnyas\u0131nda REST ve GraphQL gibi standartlar y\u0131llard\u0131r h\u00fck\u00fcm s\u00fcrmektedir. RESTful API’ler basitlikleri ve geni\u015f destekleri sayesinde yayg\u0131nla\u015fm\u0131\u015f olsa da, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde baz\u0131 dezavantajlar\u0131 bar\u0131nd\u0131r\u0131r. \u00d6rne\u011fin, farkl\u0131 kaynaklar i\u00e7in birden fazla endpoint tan\u0131mlamak gerekebilir ve bu da istemcinin birden \u00e7ok istek yapmas\u0131na yol a\u00e7abilir. Ayr\u0131ca, sunucu ve istemci aras\u0131ndaki veri s\u00f6zle\u015fmelerinin manuel olarak senkronize edilmesi, tip g\u00fcvenli\u011fi eksikli\u011fi nedeniyle run-time hatalar\u0131na davetiye \u00e7\u0131karabilir. Her iki tarafta da ayn\u0131 veri yap\u0131s\u0131n\u0131 sa\u011flamak i\u00e7in genellikle ek ara\u00e7lara veya manuel dok\u00fcmantasyona ihtiya\u00e7 duyulur ki bu da geli\u015ftirme s\u00fcrecini yava\u015flat\u0131r ve hata pay\u0131n\u0131 art\u0131r\u0131r.<\/p>\n
GraphQL ise bu sorunlara bir nebze \u00e7\u00f6z\u00fcm getirir. \u0130stemcinin tam olarak ihtiyac\u0131 olan veriyi tek bir istekte \u00e7ekebilmesine olanak tan\u0131r, bu da fazla veri \u00e7ekme (over-fetching) veya eksik veri \u00e7ekme (under-fetching) sorunlar\u0131n\u0131 ortadan kald\u0131r\u0131r. Ancak GraphQL’in de kendine \u00f6zg\u00fc bir \u00f6\u011frenme e\u011frisi ve karma\u015f\u0131kl\u0131\u011f\u0131 vard\u0131r. \u015eema tan\u0131m\u0131, resolver’lar ve istemci taraf\u0131nda sorgu yazma pratikleri, projeye yeni ba\u015flayanlar i\u00e7in g\u00f6z korkutucu olabilir. \u00dcstelik, GraphQL ile bile u\u00e7tan uca tip g\u00fcvenli\u011fi sa\u011flamak i\u00e7in Apollo Client veya Relay gibi ek k\u00fct\u00fcphanelerle birlikte \u015fema \u00fcretimi gibi ad\u0131mlar atmak gerekebilir. Bu durum, \u00f6zellikle k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projelerde veya prototipleme a\u015famas\u0131nda gereksiz bir y\u00fck olu\u015fturabilir. Her iki yakla\u015f\u0131m da, API katman\u0131n\u0131n ayr\u0131 bir kod taban\u0131nda y\u00f6netilmesini gerektirdi\u011fi i\u00e7in, istemci ve sunucu kodu aras\u0131nda s\u00fcrekli bir ba\u011f kurma ve senkronizasyon ihtiyac\u0131n\u0131 do\u011furur.<\/p>\n
tRPC, “TypeScript Remote Procedure Call”\u0131n k\u0131saltmas\u0131 olup, temelde TypeScript projeleri i\u00e7in tasarlanm\u0131\u015f bir API geli\u015ftirme \u00e7er\u00e7evesidir. En b\u00fcy\u00fck \u00f6zelli\u011fi, istemci ile sunucu aras\u0131nda otomatik olarak u\u00e7tan uca tip g\u00fcvenli\u011fi sa\u011flamas\u0131d\u0131r. Yani, sunucunuzda bir API prosed\u00fcr\u00fc tan\u0131mlad\u0131\u011f\u0131n\u0131zda, bu prosed\u00fcr\u00fcn t\u00fcm tip bilgileri otomatik olarak istemcinize aktar\u0131l\u0131r ve siz istemci taraf\u0131nda bu prosed\u00fcr\u00fc \u00e7a\u011f\u0131r\u0131rken IDE’niz size t\u00fcm tip hatalar\u0131n\u0131 an\u0131nda g\u00f6sterir. Bu, geli\u015ftirme s\u00fcrecindeki hatalar\u0131n b\u00fcy\u00fck bir k\u0131sm\u0131n\u0131 derleme zaman\u0131nda yakalaman\u0131z\u0131 sa\u011flar ve run-time hatalar\u0131n\u0131n \u00f6n\u00fcne ge\u00e7er.<\/p>\n
tRPC, HTTP katman\u0131na herhangi bir \u015fema veya kod \u00fcretimi gerektirmeden tam tip g\u00fcvenli\u011fi getirir. Bu, geli\u015ftiricilerin sadece TypeScript yazarak g\u00fc\u00e7l\u00fc ve g\u00fcvenli API’lar olu\u015fturabilece\u011fi anlam\u0131na gelir. “Zero-bundle” olmas\u0131, istemciye tRPC’ye \u00f6zg\u00fc ekstra bir \u00e7al\u0131\u015fma zaman\u0131 kodu g\u00f6ndermedi\u011fi anlam\u0131na gelir; sadece TypeScript tiplerini kullan\u0131r. Bu sayede, uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 y\u00fck\u00fc (bundle size) minimumda kal\u0131r. Geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan ise tRPC adeta bir r\u00fcya gibidir. IDE’nizin sundu\u011fu otomatik tamamlama (autocomplete) ve tip kontrol\u00fc sayesinde, sunucu taraf\u0131nda tan\u0131mlad\u0131\u011f\u0131n\u0131z prosed\u00fcrleri istemci taraf\u0131nda kullan\u0131rken sanki yerel bir fonksiyon \u00e7a\u011f\u0131r\u0131yormu\u015f gibi hissedersiniz. Bu ak\u0131c\u0131 deneyim, API geli\u015ftirme s\u00fcrecini \u00e7ok daha h\u0131zl\u0131, keyifli ve hatas\u0131z hale getirir. Sonu\u00e7 olarak, tRPC, modern web geli\u015ftirmenin en b\u00fcy\u00fck sorunlar\u0131ndan biri olan “client-server type mismatch” sorununa zarif ve etkili bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
Next.js 13 ile tan\u0131t\u0131lan App Router, React ekosisteminde bir d\u00f6n\u00fcm noktas\u0131 olarak kabul ediliyor. Bu yeni y\u00f6nlendirme sistemi, React Server Components (RSC) mimarisini merkeze alarak performans\u0131 ve geli\u015ftirme deneyimini bir \u00fcst seviyeye ta\u015f\u0131yor. App Router, sunucuda render edilen bile\u015fenler (Server Components) ile istemcide render edilen bile\u015fenleri (Client Components) bir araya getirerek, her iki taraf\u0131n avantajlar\u0131n\u0131 kullanman\u0131za olanak tan\u0131r. Server Components, sunucuda \u00e7al\u0131\u015farak veri \u00e7ekme, dosya eri\u015fimi veya veritaban\u0131 sorgular\u0131 gibi i\u015flemleri do\u011frudan yapabilir ve bu i\u015flemleri istemciye g\u00f6ndermeden \u00f6nce tamamlar. Bu sayede istemcinin JavaScript y\u00fck\u00fc azal\u0131r ve ilk sayfa y\u00fckleme s\u00fcresi \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131sal\u0131r.<\/p>\n
App Router ayr\u0131ca, tRPC 11’i Next.js App Router projenize entegre etmek, ba\u015flang\u0131\u00e7ta biraz g\u00f6z korkutucu gelebilir; ancak do\u011fru ad\u0131mlar\u0131 izledi\u011finizde s\u00fcrecin ne kadar mant\u0131kl\u0131 ve kolay oldu\u011funu g\u00f6receksiniz. Amac\u0131m\u0131z, hem sunucu taraf\u0131nda g\u00fc\u00e7l\u00fc ve tip-g\u00fcvenli bir API olu\u015fturmak hem de bu API’yi Next.js’in modern sunucu ve istemci bile\u015fen yap\u0131lar\u0131yla sorunsuz bir \u015fekilde kullanabilmek. Bu b\u00f6l\u00fcmde, projenizi nas\u0131l olu\u015fturaca\u011f\u0131n\u0131zdan tRPC ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 eklemeye, sunucu taraf\u0131 yap\u0131land\u0131rmas\u0131ndan Next.js API rotalar\u0131n\u0131 tan\u0131mlamaya kadar her ad\u0131m\u0131 detayl\u0131ca ele alaca\u011f\u0131z. Bu ad\u0131mlar, projenizin temelini sa\u011flam bir \u015fekilde atarak, ilerideki geli\u015ftirmeleriniz i\u00e7in g\u00fc\u00e7l\u00fc bir zemin haz\u0131rlayacakt\u0131r. Unutmay\u0131n, do\u011fru kurulum, sorunsuz bir geli\u015ftirme deneyiminin anahtar\u0131d\u0131r.<\/p>\n \u00d6ncelikle Next.js App Router destekli bir proje olu\u015fturarak ba\u015flayaca\u011f\u0131z. Komut sat\u0131r\u0131n\u0131z\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131n:<\/p>\n <\/code><\/p>\n Bu komut size birka\u00e7 soru soracakt\u0131r. TypeScript'i ve App Router'\u0131 etkinle\u015ftirdi\u011finizden emin olun:<\/p>\n Proje olu\u015fturulduktan sonra, projenizin dizinine gidin:<\/p>\n <\/code><\/p>\n \u015eimdi tRPC ve ilgili ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckleyelim. tRPC, verimli veri \u00e7ekme ve \u00f6nbellekleme i\u00e7in <\/code><\/p>\n Bu ba\u011f\u0131ml\u0131l\u0131klar, tRPC sunucunuzu kurmak, istemcinizle ileti\u015fim kurmak ve veri do\u011frulamay\u0131 sa\u011flamak i\u00e7in gerekli temel yap\u0131 ta\u015flar\u0131d\u0131r. tRPC'yi Next.js projenize entegre etmenin ilk ad\u0131m\u0131, sunucu taraf\u0131 yap\u0131land\u0131rmas\u0131n\u0131 olu\u015fturmakt\u0131r. <\/code><\/p>\n Burada <\/code><\/p>\n Bu \u015eimdi tRPC router'lar\u0131m\u0131z\u0131 tan\u0131mlayal\u0131m. Router'lar, API prosed\u00fcrlerinizi d\u00fczenlemenin ve gruplaman\u0131n bir yoludur. <\/code><\/p>\n Bu Son olarak, t\u00fcm router'lar\u0131 birle\u015ftiren ana tRPC router'\u0131n\u0131 <\/code><\/p>\n Next.js App Router'da, API rotalar\u0131 da dosya sistemi tabanl\u0131d\u0131r ve <\/code><\/p>\n Burada <\/code> Bu durumda yukar\u0131daki import Sunucu taraf\u0131 tRPC API'mizi ba\u015far\u0131yla kurdu\u011fumuza g\u00f6re, \u015fimdi bu g\u00fc\u00e7l\u00fc API'yi Next.js istemci bile\u015fenlerimizde ve hatta sunucu bile\u015fenlerimizde nas\u0131l kullanaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frenme zaman\u0131. tRPC'nin ger\u00e7ek g\u00fcc\u00fc, istemci taraf\u0131nda sundu\u011fu u\u00e7tan uca tip g\u00fcvenli\u011fi ve \u0130stemci taraf\u0131nda tRPC kullanabilmek i\u00e7in \u00f6ncelikle bir tRPC istemcisi olu\u015fturmal\u0131 ve bu istemciyi Next.js uygulaman\u0131z\u0131n k\u00f6k bile\u015fenine sa\u011flamal\u0131s\u0131n\u0131z. Bunun i\u00e7in <\/code><\/p>\n Bu dosyada \u015eimdi bu istemciyi Next.js uygulaman\u0131z\u0131n layout.tsx<\/code>, page.tsx<\/code>, loading.tsx<\/code>, error.tsx<\/code> gibi dosya tabanl\u0131 \u00f6zel bile\u015fenler arac\u0131l\u0131\u011f\u0131yla sezgisel bir dosya sistemi y\u00f6nlendirmesi sunar. Bu yap\u0131, proje organizasyonunu basitle\u015ftirirken, routing mant\u0131\u011f\u0131n\u0131 daha okunur hale getirir. Sunucu Eylemleri (Server Actions) \u00f6zelli\u011fi ise, istemciden do\u011frudan sunucuda \u00e7al\u0131\u015ft\u0131r\u0131labilir fonksiyonlar tan\u0131mlaman\u0131za imkan tan\u0131r, bu da form g\u00f6nderimleri ve veri mutasyonlar\u0131 gibi i\u015flemleri daha g\u00fcvenli ve tip-g\u00fcvenli bir \u015fekilde yapman\u0131z\u0131 sa\u011flar. Next.js App Router’\u0131n getirdi\u011fi en b\u00fcy\u00fck avantajlardan biri de, veri \u00e7ekme mekanizmalar\u0131n\u0131n optimize edilmi\u015f olmas\u0131d\u0131r. fetch<\/code> API’sinin geni\u015fletilmi\u015f \u00f6zellikleri ve React’\u0131n use<\/code> hook’u sayesinde, asenkron veri \u00e7ekme i\u015flemleri Server Components i\u00e7inde daha do\u011fal ve verimli hale gelir. T\u00fcm bu \u00f6zellikler, Next.js App Router’\u0131 modern, y\u00fcksek performansl\u0131 ve karma\u015f\u0131k web uygulamalar\u0131 geli\u015ftirmek i\u00e7in ideal bir platform haline getirir.<\/p>\ntRPC 11 ve Next.js App Router Kurulumuna Ad\u0131m Ad\u0131m Ba\u015flang\u0131\u00e7<\/h2>\n
Proje Olu\u015fturma ve Temel Ba\u011f\u0131ml\u0131l\u0131klar\u0131 Y\u00fckleme<\/h3>\n
\n npx create-next-app@latest my-trpc-app<\/span>\n<\/pre>\n\n
src\/<\/code> directory? Yes<\/li>\n\n cd my-trpc-app<\/span>\n<\/pre>\n@tanstack\/react-query<\/code>'den faydalan\u0131r. Ayr\u0131ca, API girdilerini do\u011frulamak i\u00e7in zod<\/code> k\u00fct\u00fcphanesini kullanaca\u011f\u0131z:<\/p>\n\n npm install @trpc\/server @trpc\/client @trpc\/react-query @tanstack\/react-query zod<\/span>\n<\/pre>\n@trpc\/client<\/code> ve @trpc\/react-query<\/code> istemci taraf\u0131 i\u00e7in, @trpc\/server<\/code> ise sunucu taraf\u0131 i\u00e7in gereklidir. zod<\/code> ise hem istemci hem de sunucu taraf\u0131nda veri \u015femalar\u0131n\u0131 tan\u0131mlayarak, API'nize g\u00f6nderilen verilerin tip g\u00fcvenli\u011fini ve ge\u00e7erlili\u011fini sa\u011flar. Bu, \u00f6zellikle Next.js App Router ortam\u0131nda, Server Actions veya Client Components arac\u0131l\u0131\u011f\u0131yla veri g\u00f6nderirken kritik \u00f6neme sahiptir. Ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00fckledikten sonra, projenizin geli\u015ftirme ortam\u0131 tRPC entegrasyonuna haz\u0131rd\u0131r.<\/p>\nSunucu Taraf\u0131 tRPC Yap\u0131land\u0131rmas\u0131 (
server\/trpc.ts<\/code> ve server\/routers\/_app.ts<\/code>)<\/h3>\nsrc<\/code> dizini alt\u0131nda server<\/code> ad\u0131nda yeni bir klas\u00f6r olu\u015ftural\u0131m. Bu klas\u00f6r tRPC sunucumuzun mant\u0131\u011f\u0131n\u0131 bar\u0131nd\u0131racak.<\/p>\nsrc\/server\/trpc.ts<\/code> dosyas\u0131, tRPC sunucusunun temelini olu\u015fturur. Burada, tRPC router'\u0131m\u0131z\u0131, context'i ve prosed\u00fcrleri (query\/mutation) ba\u015flatmak i\u00e7in gerekli ara\u00e7lar\u0131 tan\u0131mlayaca\u011f\u0131z:<\/p>\n\n <code<\/span>>\n import { initTRPC } from '@trpc\/server';<\/span>\n import { createContext } from '.\/context';<\/span>\n\n \/**<\/span>\n * Bu, tRPC sunucumuzun her iste\u011fi i\u00e7in ba\u011flam olu\u015fturmak \u00fczere kullan\u0131lacak i\u015flevdir.<\/span>\n * Genellikle, kimlik do\u011frulama, veritaban\u0131 ba\u011flant\u0131s\u0131 gibi iste\u011fe \u00f6zel verileri i\u00e7erir.<\/span>\n *\/<\/span>\n export const createTRPCContext = createContext;<\/span>\n\n const t = initTRPC.contextinitTRPC.context().create()<\/code> ile tRPC \u00f6rne\u011fini ba\u015flat\u0131yoruz. createTRPCContext<\/code> fonksiyonu ise her istek i\u00e7in bir context olu\u015fturacak. Bu context, veritaban\u0131 ba\u011flant\u0131lar\u0131, kimlik do\u011frulama bilgileri gibi verilere eri\u015fim sa\u011flamak i\u00e7in kullan\u0131l\u0131r. \u015eimdi src\/server\/context.ts<\/code> dosyas\u0131n\u0131 olu\u015ftural\u0131m:<\/p>\n\n <code<\/span>>\n import { type inferAsyncReturnType } from '@trpc\/server';<\/span>\n import { type FetchCreateContextFnOptions } from '@trpc\/server\/adapters\/fetch';<\/span>\n\n \/**<\/span>\n * Sunucu taraf\u0131 iste\u011fi i\u00e7in olu\u015fturulan ba\u011flam.<\/span>\n * Burada herhangi bir iste\u011fe \u00f6zel veri (\u00f6rn: session, db) d\u00f6nd\u00fcrebilirsiniz.<\/span>\n *\/<\/span>\n export const createContext = async (opts: FetchCreateContextFnOptions) => {<\/span>\n return {<\/span>\n \/\/ \u00d6rnek olarak, istek ba\u015fl\u0131klar\u0131na eri\u015febilirsiniz<\/span>\n headers: opts.req.headers,<\/span>\n };<\/span>\n };<\/span>\n\n export type Context = inferAsyncReturnTypecontext.ts<\/code> dosyas\u0131, tRPC prosed\u00fcrleriniz i\u00e7inde kullanabilece\u011finiz global verilere eri\u015fim sa\u011flar. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n kimlik do\u011frulama bilgilerini burada i\u015fleyebilirsiniz.<\/p>\nsrc\/server\/routers<\/code> klas\u00f6r\u00fcn\u00fc olu\u015fturun. \u0130\u00e7ine bir _app.ts<\/code> dosyas\u0131 ve \u00f6rnek olarak post.ts<\/code> dosyas\u0131 ekleyelim.<\/p>\nsrc\/server\/routers\/post.ts<\/code>:<\/p>\n\n <code<\/span>>\n import { z } from 'zod';<\/span>\n import { publicProcedure, router } from '..\/trpc';<\/span>\n\n interface Post {<\/span>\n id: string;<\/span>\n title: string;<\/span>\n content: string;<\/span>\n }<\/span>\n\n const posts: Post[] = [<\/span>\n { id: '1', title: '\u0130lk Yaz\u0131', content: 'Bu bir deneme yaz\u0131s\u0131d\u0131r.' },<\/span>\n ];<\/span>\n\n export const postRouter = router({<\/span>\n getPosts: publicProcedure<\/span>\n .query(() => {<\/span>\n return posts;<\/span>\n }),<\/span>\n\n getPostById: publicProcedure<\/span>\n .input(z.object({ id: z.string() }))<\/span>\n .query(({ input }) => {<\/span>\n return posts.find(post => post.id === input.id);<\/span>\n }),<\/span>\n\n createPost: publicProcedure<\/span>\n .input(z.object({<\/span>\n title: z.string().min(5),<\/span>\n content: z.string().min(10),<\/span>\n }))<\/span>\n .mutation(({ input }) => {<\/span>\n const newPost: Post = {<\/span>\n id: (posts.length + 1).toString(),<\/span>\n ...input,<\/span>\n };<\/span>\n posts.push(newPost);<\/span>\n return newPost;<\/span>\n }),<\/span>\n });<\/span>\n <\/code<\/span>>\n<\/pre>\npostRouter<\/code>, iki sorgu (getPosts<\/code>, getPostById<\/code>) ve bir mutasyon (createPost<\/code>) tan\u0131ml\u0131yor. zod<\/code> kullanarak girdilerin do\u011frulu\u011funu sa\u011fl\u0131yoruz. \u00d6rne\u011fin, createPost<\/code> mutasyonunda title<\/code> ve content<\/code> alanlar\u0131n\u0131n minimum uzunlukta olmas\u0131n\u0131 zorunlu k\u0131l\u0131yoruz. Bu, API'nize gelen verilerin her zaman beklendi\u011fi gibi olmas\u0131n\u0131 garanti eder.<\/p>\nsrc\/server\/routers\/_app.ts<\/code> dosyas\u0131nda olu\u015ftural\u0131m:<\/p>\n\n <code<\/span>>\n import { router } from '..\/trpc';<\/span>\n import { postRouter } from '.\/post';<\/span>\n\n export const appRouter = router({<\/span>\n post: postRouter, \/\/ Post router'\u0131 burada app router'a ekliyoruz<\/span>\n });<\/span>\n\n \/\/ \u0130stemci taraf\u0131nda kullan\u0131lacak app router tipi<\/span>\n export type AppRouter = typeof appRouter;<\/span>\n <\/code<\/span>>\n<\/pre>\n_app.ts<\/code> dosyas\u0131, t\u00fcm alt router'lar\u0131n\u0131z\u0131 bir araya getiren ana tRPC router'\u0131d\u0131r. AppRouter<\/code> tipi, istemci taraf\u0131nda tip \u00e7\u0131kar\u0131m\u0131 i\u00e7in kritik \u00f6neme sahiptir. Bu yap\u0131land\u0131rma ile sunucu taraf\u0131 tRPC API'nizin temellerini atm\u0131\u015f oldunuz. Art\u0131k Next.js App Router'\u0131n API route'lar\u0131 arac\u0131l\u0131\u011f\u0131yla bu API'yi d\u0131\u015f d\u00fcnyaya a\u00e7abiliriz.<\/p>\nNext.js API Route Olu\u015fturma (
app\/api\/trpc\/[trpc]\/route.ts<\/code>)<\/h3>\napp\/api<\/code> dizini alt\u0131nda tan\u0131mlan\u0131r. tRPC sunucumuzu Next.js uygulamam\u0131zla entegre etmek i\u00e7in \u00f6zel bir API route dosyas\u0131 olu\u015fturaca\u011f\u0131z. Bu dosya, t\u00fcm tRPC isteklerini tRPC sunucumuza y\u00f6nlendirecek bir k\u00f6pr\u00fc g\u00f6revi g\u00f6recek.<\/p>\nsrc\/app\/api\/trpc\/[trpc]\/route.ts<\/code> yolunda bir dosya olu\u015ftural\u0131m. K\u00f6\u015feli parantezler [trpc]<\/code> dinamik bir rota segmenti oldu\u011funu g\u00f6sterir ve gelen tRPC isteklerinin farkl\u0131 prosed\u00fcrlere y\u00f6nlendirilmesini sa\u011flar.<\/p>\n\n <code<\/span>>\n import { fetchRequestHandler } from '@trpc\/server\/adapters\/fetch';<\/span>\n import { appRouter, createTRPCContext } from '@\/server'; \/\/ appRouter ve context'i i\u00e7e aktar\u0131n<\/span>\n\n const handler = (req: Request) =><\/span>\n fetchRequestHandler({<\/span>\n endpoint: '\/api\/trpc',<\/span>\n req,<\/span>\n router: appRouter,<\/span>\n createContext: createTRPCContext,<\/span>\n });<\/span>\n\n export { handler as GET, handler as POST };<\/span>\n <\/code<\/span>>\n<\/pre>\n@trpc\/server\/adapters\/fetch<\/code> i\u00e7indeki fetchRequestHandler<\/code>'\u0131 kullan\u0131yoruz. Bu handler, gelen HTTP isteklerini al\u0131r, tRPC context'ini olu\u015fturur ve iste\u011fi appRouter<\/code>'daki ilgili tRPC prosed\u00fcr\u00fcne y\u00f6nlendirir. endpoint: '\/api\/trpc'<\/code> tRPC istemcinizin istek g\u00f6nderece\u011fi URL'i tan\u0131mlar. Son olarak, bu handler<\/code>'\u0131 hem GET<\/code> hem de POST<\/code> istekleri i\u00e7in d\u0131\u015fa aktar\u0131yoruz, \u00e7\u00fcnk\u00fc tRPC hem sorgular (GET<\/code>) hem de mutasyonlar (POST<\/code>) i\u00e7in bu handler'\u0131 kullan\u0131r. Bu ad\u0131m, Next.js uygulaman\u0131z\u0131n tRPC API'nizle ileti\u015fim kurmas\u0131n\u0131 sa\u011flayan temel ba\u011flant\u0131y\u0131 kurar. Art\u0131k sunucu taraf\u0131n\u0131z haz\u0131r ve istemci taraf\u0131nda bu API'yi kullanmaya ba\u015flayabiliriz.<\/p>\nappRouter<\/code> ve createTRPCContext<\/code> import yolunun server<\/code> klas\u00f6r\u00fcn\u00fc hedefledi\u011finden emin olun. Genellikle src\/server\/index.ts<\/code> gibi bir dosya olu\u015fturup t\u00fcm \u00f6nemli server taraf\u0131 tRPC dosyalar\u0131n\u0131 buradan export etmek, import yollar\u0131n\u0131 daha d\u00fczenli hale getirir. \u00d6rne\u011fin src\/server\/index.ts<\/code> i\u00e7eri\u011fi \u015f\u00f6yle olabilir: <\/p>\nexport * from '.\/trpc';<\/span>export * from '.\/context';<\/span>export * from '.\/routers\/_app';<\/span><\/pre>\nimport { appRouter, createTRPCContext } from '@\/server';<\/code> \u015feklinde daha temiz olacakt\u0131r.\n<\/div>\n\u0130stemci Taraf\u0131nda tRPC Kullan\u0131m\u0131 ve Ger\u00e7ek D\u00fcnya Senaryolar\u0131<\/h2>\n
@tanstack\/react-query<\/code> ile entegrasyonu sayesinde ortaya \u00e7\u0131kar. Bu b\u00f6l\u00fcm, tRPC istemcisini nas\u0131l yap\u0131land\u0131raca\u011f\u0131n\u0131zdan, veri \u00e7ekme ve g\u00fcncelleme i\u015flemlerini nas\u0131l yapaca\u011f\u0131n\u0131za, ve k\u00fc\u00e7\u00fck bir blog uygulamas\u0131 \u00fczerinden ger\u00e7ek d\u00fcnya senaryolar\u0131na kadar geni\u015f bir yelpazeyi kapsayacak. Performans optimizasyonlar\u0131 ve \u00f6nbellekleme stratejileri ile uygulaman\u0131z\u0131n h\u0131z\u0131n\u0131 ve duyarl\u0131l\u0131\u011f\u0131n\u0131 nas\u0131l art\u0131rabilece\u011finizi de detayl\u0131ca inceleyece\u011fiz.<\/p>\ntRPC \u0130stemcisi Olu\u015fturma ve Provider Yap\u0131land\u0131rmas\u0131<\/h3>\n
src\/lib<\/code> dizini alt\u0131nda trpc.ts<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m. Bu dosya, tRPC istemcisini yap\u0131land\u0131racak ve @tanstack\/react-query<\/code> ile entegrasyonu sa\u011flayacakt\u0131r.<\/p>\nsrc\/lib\/trpc.ts<\/code>:<\/p>\n\n <code<\/span>>\n import { httpBatchLink, loggerLink } from '@trpc\/client';<\/span>\n import { createTRPCReact } from '@trpc\/react-query';<\/span>\n import { type AppRouter } from '@\/server\/routers\/_app';<\/span>\n import superjson from 'superjson';<\/span>\n\n export const trpc = createTRPCReactcreateTRPCReactAppRouter<\/code> tipini sunucu taraf\u0131nda tan\u0131mlad\u0131\u011f\u0131m\u0131z _app.ts<\/code> dosyas\u0131ndan i\u00e7e aktard\u0131\u011f\u0131m\u0131z i\u00e7in, bu, istemci taraf\u0131nda da otomatik tip g\u00fcvenli\u011fi sa\u011flar. createClient<\/code> fonksiyonu, superjson<\/code> kullanarak karma\u015f\u0131k tipleri serile\u015ftirir ve httpBatchLink<\/code> ile API endpoint'ini belirtir. loggerLink<\/code> ise geli\u015ftirme ortam\u0131nda konsola tRPC isteklerini loglamaya yarar.<\/p>\napp\/layout.tsx<\/code> dosyas\u0131nda sa\u011flayarak t\u00fcm bile\u015fenlerinizin tRPC'ye eri\u015fmesini sa\u011flayal\u0131m. src\/app\/layout.tsx<\/code> dosyas\u0131 tipik olarak t\u00fcm uygulaman\u0131z\u0131 sarmalayan k\u00f6k layout'tur. Burada, @tanstack\/react-query<\/code> i\u00e7in QueryClientProvider<\/code> ve tRPC i\u00e7in trpc.Provider<\/code>'\u0131 kullanaca\u011f\u0131z. Ancak bu provider'lar istemci bile\u015fenleri oldu\u011fu i\u00e7in, bunlar\u0131 sarmalayan bir client component olu\u015fturmam\u0131z gerekecek.<\/p>\nsrc\/app\/trpc-provider.tsx<\/code> (Client Component):<\/p>\n\n <code<\/span>>\n 'use client';<\/span>\n\n import { QueryClient, QueryClientProvider } from '@tanstack\/react-query';<\/span>\n import { loggerLink, httpBatchLink } from '@trpc\/client';<\/span>\n