SvelteKit 2: Kod Tabanl\u0131 Router Olu\u015fturma<\/p>\n
SvelteKit’in dosya tabanl\u0131 y\u00f6nlendirmesi olduk\u00e7a kullan\u0131\u015fl\u0131 olsa da, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in kod tabanl\u0131 bir y\u00f6nlendirme \u00e7\u00f6z\u00fcm\u00fc daha esnek ve s\u00fcrd\u00fcr\u00fclebilir olabilir. Bu makalede, SvelteKit 2’de dosya tabanl\u0131 y\u00f6nlendirmeden kod tabanl\u0131 bir y\u00f6nlendirmeye nas\u0131l ge\u00e7i\u015f yapaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Karma\u015f\u0131k rota y\u00f6netimini basitle\u015ftirecek ve kodunuzun \u00f6l\u00e7eklenebilirli\u011fini art\u0131racak bu y\u00f6nteme derinlemesine dalaca\u011f\u0131z.<\/p>\n
SvelteKit’in varsay\u0131lan y\u00f6nlendirme sistemi, dosya sistemini kullan\u0131r. Yani, SvelteKit’te kod tabanl\u0131 y\u00f6nlendirme, A\u015fa\u011f\u0131daki \u00f6rnekte, <\/code><\/p>\n Bu kod, Dinamik rotalar, URL'lerde de\u011fi\u015fken de\u011ferler i\u00e7eren rotalard\u0131r. \u00d6rne\u011fin, bir blog uygulamas\u0131nda her bir blog yaz\u0131s\u0131n\u0131n kendi URL'sine sahip olmas\u0131 i\u00e7in dinamik rotalar kullan\u0131l\u0131r. Kod tabanl\u0131 y\u00f6nlendirme, bu dinamik rotalar\u0131 y\u00f6netmek i\u00e7in \u00e7ok g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. \u015eimdi, bir blog uygulamas\u0131nda blog g\u00f6nderilerinin ID'sini kullanarak dinamik bir y\u00f6nlendirme \u00f6rne\u011fi ele alal\u0131m. Varsayal\u0131m ki, <\/code><\/p>\n Bu \u00f6rnekte, Kod tabanl\u0131 y\u00f6nlendirme, yetkilendirme mant\u0131\u011f\u0131n\u0131 uygulamada \u00f6nemli rol oynar. Kullan\u0131c\u0131n\u0131n belirli bir sayfay\u0131 g\u00f6r\u00fcnt\u00fclemek i\u00e7in gerekli izinlere sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilir ve yetkisiz kullan\u0131c\u0131lar\u0131 giri\u015f sayfas\u0131na veya hata sayfas\u0131na y\u00f6nlendirebilirsiniz.<\/p>\n A\u015fa\u011f\u0131daki \u00f6rnekte, <\/code><\/p>\n Bu \u00f6rnekte, Karma\u015f\u0131k senaryolarda, birden fazla y\u00f6nlendirme ko\u015fulu ve dinamik URL parametreleri ile \u00e7al\u0131\u015fman\u0131z gerekebilir. Bu durumda, \u015fartl\u0131 ifadeler ve fonksiyonel programlama tekniklerini kullanarak y\u00f6nlendirme mant\u0131\u011f\u0131n\u0131z\u0131 daha okunabilir ve s\u00fcrd\u00fcr\u00fclebilir hale getirebilirsiniz.<\/p>\n A\u015fa\u011f\u0131daki \u00f6rnek, fonksiyonel bir yakla\u015f\u0131m kullanarak farkl\u0131 y\u00f6nlendirme ko\u015fullar\u0131n\u0131 ele almaktad\u0131r:<\/p>\n <\/code><\/p>\n Bu yakla\u015f\u0131m, kodun okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. Her bir y\u00f6nlendirme ko\u015fulu, ayr\u0131 bir fonksiyonda y\u00f6netilir ve bu da karma\u015f\u0131kl\u0131\u011f\u0131 azalt\u0131r. Ayr\u0131ca, bu y\u00f6ntemi daha b\u00fcy\u00fck ve daha karma\u015f\u0131k uygulamalar i\u00e7in geni\u015fletebilirsiniz.<\/p>\n Kod tabanl\u0131 y\u00f6nlendirme, performans \u00fczerinde olumsuz bir etkiye sahip olabilir, \u00f6zellikle karma\u015f\u0131k y\u00f6nlendirme mant\u0131\u011f\u0131 kullan\u0131yorsan\u0131z. Performans\u0131 optimize etmek i\u00e7in a\u015fa\u011f\u0131daki \u00f6nerileri dikkate al\u0131n:<\/p>\n SvelteKit'te kod tabanl\u0131 y\u00f6nlendirmeyi \u00f6\u011frenmek i\u00e7in a\u015fa\u011f\u0131daki yol haritas\u0131n\u0131 takip edebilirsiniz:<\/p>\nsrc\/routes<\/code> dizinindeki dosyalar otomatik olarak rotalar olarak tan\u0131mlan\u0131r. Bu basit uygulamalar i\u00e7in idealdir, ancak uygulama b\u00fcy\u00fcd\u00fck\u00e7e, dosya yap\u0131s\u0131 karma\u015f\u0131kla\u015f\u0131r ve y\u00f6netimi zorla\u015f\u0131r. Bu noktada kod tabanl\u0131 bir y\u00f6nlendirme, daha fazla d\u00fczen ve kontrol sa\u011flar. Kod tabanl\u0131 y\u00f6nlendirme, rotalar\u0131 do\u011frudan kod i\u00e7inde tan\u0131mlaman\u0131za olanak tan\u0131r, bu da daha dinamik ve programlanabilir bir y\u00f6nlendirme sistemi kurman\u0131z\u0131 m\u00fcmk\u00fcn k\u0131lar. \u00d6rne\u011fin, bir e-ticaret uygulamas\u0131nda dinamik \u00fcr\u00fcn sayfalar\u0131 olu\u015fturmak i\u00e7in veya yetkilendirme mant\u0131\u011f\u0131n\u0131 y\u00f6nlendirme sistemine entegre etmek i\u00e7in kod tabanl\u0131 y\u00f6nlendirme son derece faydal\u0131d\u0131r. Dosya tabanl\u0131 sistemde bu t\u00fcr dinamik rotalar\u0131 olu\u015fturmak olduk\u00e7a zahmetlidir.<\/p>\nSvelteKit’te Kod Tabanl\u0131 Y\u00f6nlendirme Nas\u0131l Yap\u0131l\u0131r?<\/h2>\n
+page.js<\/code> veya +page.server.js<\/code> dosyalar\u0131nda load<\/code> fonksiyonunu kullanarak ger\u00e7ekle\u015ftirilir. load<\/code> fonksiyonu, bir rotada sunucudan veri \u00e7ekmek veya y\u00f6nlendirme mant\u0131\u011f\u0131n\u0131 uygulamak i\u00e7in ideal bir yerdir. Bu fonksiyon bir redirect<\/code> nesnesi d\u00f6nd\u00fcrerek kullan\u0131c\u0131n\u0131n ba\u015fka bir sayfaya y\u00f6nlendirilmesini sa\u011flayabilir. <\/p>\nBasit Bir Kod Tabanl\u0131 Y\u00f6nlendirme \u00d6rne\u011fi<\/h3>\n
\/<\/code> rotas\u0131ndan \/about<\/code> rotas\u0131na bir y\u00f6nlendirme yap\u0131yoruz:<\/p>\n\/\/ src\/routes\/+page.server.js\n\nexport const load = async ({ fetch, params }) => {\n return {\n redirect: '\/about'\n };\n};<\/pre>\n\/<\/code> rotas\u0131na eri\u015fen bir kullan\u0131c\u0131n\u0131n otomatik olarak \/about<\/code> rotas\u0131na y\u00f6nlendirilmesini sa\u011flar. Bu basit \u00f6rnek, kod tabanl\u0131 y\u00f6nlendirinin temel mant\u0131\u011f\u0131n\u0131 g\u00f6sterir. Daha karma\u015f\u0131k senaryolar i\u00e7in, y\u00f6nlendirme karar\u0131n\u0131 verilerin veya kullan\u0131c\u0131 durumunun etkilemesine izin verebilirsiniz. \u00d6rne\u011fin, oturum a\u00e7mam\u0131\u015f bir kullan\u0131c\u0131n\u0131n giri\u015f sayfas\u0131na y\u00f6nlendirilmesini sa\u011flayabilirsiniz.<\/p>\nDinamik Rotalar ve Kod Tabanl\u0131 Y\u00f6nlendirme<\/h2>\n
params<\/code> nesnesi, URL'deki dinamik segmentleri tutar ve bu segmentleri kullanarak farkl\u0131 y\u00f6nlendirme kararlar\u0131 alabilirsiniz.<\/p>\nDinamik Rotalar \u0130\u00e7in Kod Tabanl\u0131 Y\u00f6nlendirme \u00d6rne\u011fi<\/h3>\n
\/blog\/[id]<\/code> rotas\u0131nda, belirli bir blog g\u00f6nderisinin detaylar\u0131n\u0131 g\u00f6r\u00fcnt\u00fclemek istiyoruz. Ancak, baz\u0131 g\u00f6nderiler silindiyse, kullan\u0131c\u0131lar\u0131 farkl\u0131 bir sayfaya y\u00f6nlendirmek isteyebiliriz.<\/p>\n\/\/ src\/routes\/blog\/[id]\/+page.server.js\n\nexport const load = async ({ fetch, params }) => {\n const postId = params.id;\n const response = await fetch(\/api\/posts\/${postId}<\/code>);\n\n if (!response.ok) {\n return {\n redirect: '\/blog\/not-found'\n };\n }\n\n const post = await response.json();\n return { post };\n};<\/pre>\nload<\/code> fonksiyonu \u00f6ncelikle belirli bir blog g\u00f6nderisi i\u00e7in API'den veri \u00e7eker. E\u011fer g\u00f6nderi bulunmazsa (response.ok false ise), kullan\u0131c\u0131 \/blog\/not-found<\/code> rotas\u0131na y\u00f6nlendirilir. Bu, kullan\u0131c\u0131 deneyimini iyile\u015ftirir ve k\u0131r\u0131k ba\u011flant\u0131lar\u0131 \u00f6nler. Bu \u00f6rnekte, \/api\/posts\/${postId}<\/code> gibi bir API endpoint'ine ihtiya\u00e7 duydu\u011fumuzu belirtmek \u00f6nemlidir. Bu API, blog g\u00f6nderisi verilerini sa\u011flamal\u0131d\u0131r.<\/p>\nYetkilendirme ve Kod Tabanl\u0131 Y\u00f6nlendirme<\/h2>\n
Yetkilendirme \u00d6rne\u011fi<\/h3>\n
\/admin<\/code> rotas\u0131na eri\u015fimi sadece oturum a\u00e7m\u0131\u015f ve y\u00f6netici rol\u00fcne sahip kullan\u0131c\u0131larla s\u0131n\u0131rland\u0131r\u0131yoruz:<\/p>\n\/\/ src\/routes\/admin\/+page.server.js\n\nexport const load = async ({ fetch, session }) => {\n if (!session.user || session.user.role !== 'admin') {\n return {\n redirect: '\/login'\n };\n }\n\n \/\/ Y\u00f6netici panosu i\u00e7in verileri burada al\u0131n\n \/\/ ...\n};<\/pre>\nsession<\/code> nesnesi kullan\u0131c\u0131n\u0131n oturum bilgilerini i\u00e7erir. E\u011fer kullan\u0131c\u0131 oturum a\u00e7mam\u0131\u015fsa veya y\u00f6netici rol\u00fcne sahip de\u011filse, \/login<\/code> rotas\u0131na y\u00f6nlendirilir. Bu \u00f6rnek, SvelteKit'in yerle\u015fik oturum y\u00f6netimi \u00f6zelli\u011fini varsayar. Daha geli\u015fmi\u015f bir yetkilendirme sistemine ihtiyac\u0131n\u0131z varsa, bir \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanesi veya kendi \u00f6zel yetkilendirme \u00e7\u00f6z\u00fcm\u00fcn\u00fcz\u00fc kullanabilirsiniz. Bu \u00e7\u00f6z\u00fcm\u00fcn g\u00fcvenli\u011fi i\u00e7in gerekli \u00f6nlemlerin al\u0131nmas\u0131 olduk\u00e7a \u00f6nemlidir. <\/p>\nKarma\u015f\u0131k Senaryolar ve \u0130leri D\u00fczey Teknikler<\/h2>\n
Fonksiyonel Yakla\u015f\u0131m<\/h3>\n
\/\/ src\/routes\/+page.server.js\n\nconst handleRedirect = (condition, redirectPath) => {\n if (condition) {\n return { redirect: redirectPath };\n }\n return null;\n};\n\nexport const load = async ({ fetch, session, params }) => {\n const redirect1 = handleRedirect(!session.user, '\/login');\n const redirect2 = handleRedirect(params.id === 'secret', '\/error');\n\n if (redirect1) return redirect1;\n if (redirect2) return redirect2;\n\n \/\/ ... di\u011fer i\u015flemler\n};<\/pre>\nPerformans Optimizasyonu<\/h2>\n
\n
Promise.all<\/code> ile birden fazla API \u00e7a\u011fr\u0131s\u0131n\u0131 paralel hale getirin).<\/li>\n<\/ul>\nG\u00fcvenlik Uyar\u0131lar\u0131<\/h2>\n
\u00d6\u011frenme Yol Haritas\u0131<\/h2>\n
Yeni Ba\u015flayanlar<\/h3>\n