Next.js’te API Endpoint’lerini Gizleme Rehberi<\/p>\n
Next.js uygulaman\u0131zda API endpoint’lerinizi korumak ve g\u00fcvenli\u011fi sa\u011flamak i\u00e7in \u00e7e\u015fitli y\u00f6ntemler mevcuttur. Bu makalede, API anahtarlar\u0131n\u0131z\u0131, gizli verilerinizi ve endpoint’lerinizi nas\u0131l g\u00fcvenli bir \u015fekilde gizleyebilece\u011finizi ad\u0131m ad\u0131m \u00f6\u011freneceksiniz. Next.js’in sundu\u011fu \u00f6zelliklerden ve en iyi uygulamalardan yararlanarak, uygulaman\u0131z\u0131n g\u00fcvenli\u011fini art\u0131racaks\u0131n\u0131z. Ba\u015ftan sona, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in anla\u015f\u0131l\u0131r ve pratik bir rehber sunuyoruz.<\/p>\n
Next.js, sunucu taraf\u0131nda \u00e7al\u0131\u015fan API fonksiyonlar\u0131 olu\u015fturman\u0131za olanak sa\u011flayan yerle\u015fik bir API Routes \u00f6zelli\u011fi sunar. Bu, frontend’iniz ve backend’iniz aras\u0131nda daha iyi bir organizasyon sa\u011flar ve g\u00fcvenlik a\u00e7\u0131s\u0131ndan \u00f6nemli avantajlar sunar. API Routes, Ancak, Next.js API Routes’u kullan\u0131rken, endpoint’lerinizi ve API anahtarlar\u0131n\u0131z\u0131 korumak i\u00e7in ek \u00f6nlemler alman\u0131z gerekir. Direkt olarak client-side’dan eri\u015filebilen API Routes, k\u00f6t\u00fc niyetli ki\u015filer taraf\u0131ndan k\u00f6t\u00fcye kullan\u0131labilir. Bu y\u00fczden, g\u00fcvenlik \u00f6nlemleri almak kritik \u00f6nem ta\u015f\u0131r. Bunlar, yetkilendirme (authentication) ve yetkilendirme (authorization) mekanizmalar\u0131n\u0131 uygulamaktan, do\u011frulama i\u015flemlerini yapmaktan ve verileri \u015fifreleyerek korumaktan ge\u00e7er.<\/p>\n Yeni ba\u015flayanlar i\u00e7in en basit y\u00f6ntem, API key’lerinizi do\u011frudan kodunuzda saklamamakt\u0131r. Bunun yerine, \u00e7evre de\u011fi\u015fkenlerini kullan\u0131n. Next.js, \u00e7evre de\u011fi\u015fkenlerini <\/code><\/p>\n \u00d6nemli Not: API key'inizi kodunuzda \u015fu \u015fekilde kullanabilirsiniz:<\/p>\n <\/code><\/p>\n API key'lerini gizlemek yeterli de\u011fildir. Uygulaman\u0131z\u0131n g\u00fcvenli\u011fini sa\u011flamak i\u00e7in yetkilendirme (authentication) ve yetkilendirme (authorization) mekanizmalar\u0131 uygulaman\u0131z gerekir. Yetkilendirme, kullan\u0131c\u0131n\u0131n kimli\u011fini do\u011frulama i\u015flemidir, yetkilendirme ise kullan\u0131c\u0131n\u0131n belirli bir kayna\u011fa eri\u015fme iznine sahip olup olmad\u0131\u011f\u0131n\u0131 kontrol etme i\u015flemidir. JWT (JSON Web Tokens) veya OAuth 2.0 gibi standart yetkilendirme protokolleri kullanarak, sadece yetkili kullan\u0131c\u0131lar\u0131n API endpoint'lerinize eri\u015febilmelerini sa\u011flayabilirsiniz. <\/p>\n \u00d6rne\u011fin, JWT kullanarak bir API endpoint'ini koruyabilirsiniz. Kullan\u0131c\u0131 giri\u015f yapt\u0131\u011f\u0131nda, bir JWT tokeni olu\u015fturulur ve kullan\u0131c\u0131ya verilir. Kullan\u0131c\u0131, sonraki API \u00e7a\u011fr\u0131lar\u0131nda bu tokeni header'da g\u00f6nderir. Sunucu, tokeni do\u011frulayarak kullan\u0131c\u0131n\u0131n kimli\u011fini ve yetkilerini do\u011frular.<\/p>\n <\/code><\/p>\n Bu \u00f6rnekte, Daha y\u00fcksek g\u00fcvenlik seviyesi i\u00e7in, bir API Gateway veya Reverse Proxy kullanabilirsiniz. API Gateway, API endpoint'leriniz i\u00e7in tek bir giri\u015f noktas\u0131 g\u00f6revi g\u00f6r\u00fcr ve \u00e7e\u015fitli g\u00fcvenlik mekanizmalar\u0131 uygulayabilir. Bunlar aras\u0131nda kimlik do\u011frulama, yetkilendirme, h\u0131z s\u0131n\u0131rlamas\u0131, ve DDoS (Distributed Denial of Service) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 koruma bulunur. Next.js ile birlikte kullan\u0131labilecek pop\u00fcler API Gateway'ler aras\u0131nda AWS API Gateway, Google Cloud API Gateway ve Azure API Management bulunur. Bunlar\u0131n kullan\u0131m\u0131, Next.js uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini ve g\u00fcvenli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. <\/p>\n Reverse Proxy'ler, istekleri y\u00f6nlendirmek ve sunucu taraf\u0131nda \u00e7e\u015fitli g\u00fcvenlik i\u015flemleri ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131labilir. Nginx veya Apache gibi reverse proxy yaz\u0131l\u0131mlar\u0131, HTTPS \u015fifrelemesi, g\u00fcvenlik duvar\u0131 kurallar\u0131 ve y\u00fck dengeleme gibi yetenekler sunar. Bu sayede, API endpoint'lerinizin do\u011frudan internetten eri\u015filebilirli\u011fini engelleyerek g\u00fcvenlik seviyesini art\u0131r\u0131rs\u0131n\u0131z. Reverse Proxy, sunucular\u0131n\u0131z\u0131n ve API'lerinizin IP adreslerini gizleyerek, g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131 ve sald\u0131r\u0131lar\u0131 \u00f6nlemede olduk\u00e7a etkili bir y\u00f6ntemdir.<\/p>\n Bir reverse proxy kurulumu, uygulaman\u0131z\u0131n mimarisini daha karma\u015f\u0131k hale getirebilir; ancak, g\u00fcvenlik ve performans a\u00e7\u0131s\u0131ndan sa\u011flad\u0131\u011f\u0131 avantajlar g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, b\u00fcy\u00fck \u00f6l\u00e7ekli projeler i\u00e7in de\u011ferli bir yat\u0131r\u0131md\u0131r. Karma\u015f\u0131k bir uygulama mimarisinde, g\u00fcvenli\u011fi sa\u011flamak ve API endpoint'lerinizi korumak i\u00e7in uzman yard\u0131m\u0131 alman\u0131z gerekebilir.<\/p>\n Bir e-ticaret uygulamas\u0131nda, \u00f6deme i\u015flemlerini i\u015fleyen API endpoint'leri son derece hassas veriler i\u00e7erir. Bu endpoint'leri korumak i\u00e7in, \u00f6ncelikle g\u00fcvenli bir \u00f6deme ge\u00e7idi kullanmal\u0131 ve API key'lerini asla do\u011frudan kodda saklamamal\u0131s\u0131n\u0131z. \u00c7evre de\u011fi\u015fkenleri ve g\u00fcvenli bir yap\u0131land\u0131rma y\u00f6netimi sistemi (\u00f6rne\u011fin, HashiCorp Vault) kullanarak, API key'lerini g\u00fcvenli bir \u015fekilde saklayabilirsiniz. Ayr\u0131ca, JWT veya OAuth 2.0 gibi yetkilendirme mekanizmalar\u0131 kullanarak, sadece yetkili kullan\u0131c\u0131lar\u0131n \u00f6deme i\u015flemlerini ger\u00e7ekle\u015ftirebilmelerini sa\u011flayabilirsiniz. Ek olarak, bir API Gateway veya Reverse Proxy kullanarak, uygulaman\u0131z\u0131n g\u00fcvenli\u011fini ve performans\u0131n\u0131 daha da art\u0131rabilirsiniz. Bu uygulamay\u0131 geli\u015ftirmek ve g\u00fcvenli\u011fini sa\u011flamak i\u00e7in, g\u00fcvenlik uzmanlar\u0131ndan destek alman\u0131z tavsiye edilir.<\/p>\n Farkl\u0131 g\u00fcvenlik yakla\u015f\u0131mlar\u0131n\u0131n performans\u0131n\u0131 kar\u015f\u0131la\u015ft\u0131rmak i\u00e7in a\u015fa\u011f\u0131daki tabloya g\u00f6z atabilirsiniz. Bu tablo, genel bir k\u0131lavuzdur ve ger\u00e7ek performans, uygulaman\u0131z\u0131n \u00f6zel gereksinimlerine ba\u011fl\u0131 olarak de\u011fi\u015febilir:<\/p>\n Yukar\u0131daki tablodan da g\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, performans ile g\u00fcvenlik aras\u0131nda bir denge kurmak \u00f6nemlidir. En g\u00fcvenli y\u00f6ntemler genellikle daha karma\u015f\u0131kt\u0131r ve performans\u0131 biraz d\u00fc\u015f\u00fcrebilir. Ancak, g\u00fcvenlik a\u00e7\u0131klar\u0131n\u0131n maliyeti, performans kayb\u0131ndan \u00e7ok daha y\u00fcksek olabilir.<\/p>\npages\/api<\/code> dizini alt\u0131nda olu\u015fturulur ve dosya adlar\u0131 endpoint’leri tan\u0131mlar. \u00d6rne\u011fin, pages\/api\/users.js<\/code> dosyas\u0131 \/api\/users<\/code> endpoint’ini tan\u0131mlar. Bu \u015fekilde, backend kodunuzu frontend’inizden ayr\u0131 tutar ve daha d\u00fczenli bir proje yap\u0131s\u0131 olu\u015fturursunuz. Ayr\u0131ca, Next.js’in sunucu taraf\u0131 renderlama \u00f6zelli\u011fi sayesinde, API \u00e7a\u011fr\u0131lar\u0131n\u0131z\u0131n sunucuda g\u00fcvenli bir \u015fekilde i\u015flenmesini sa\u011flar.<\/p>\nAPI Key’lerinizi Nas\u0131l Gizlersiniz? (Yeni Ba\u015flayanlar \u0130\u00e7in)<\/h2>\n
.env.local<\/code> dosyas\u0131nda saklaman\u0131za olanak tan\u0131r. Bu dosya, kodunuzu s\u00fcr\u00fcm kontrol sistemine (\u00f6rne\u011fin, Git) eklememeniz gereken gizli verileri i\u00e7erir. .env.local<\/code> dosyas\u0131na API key’inizi ekleyin:<\/p>\n\nNEXT_PUBLIC_API_KEY=YOUR_API_KEY\n<\/pre>\nNEXT_PUBLIC_<\/code> \u00f6neki ile ba\u015flayan de\u011fi\u015fkenler, client-side'dan eri\u015filebilir hale gelir. G\u00fcvenlik a\u00e7\u0131s\u0131ndan kritik \u00f6nem ta\u015f\u0131yan API key'leriniz i\u00e7in bu \u00f6neki kullanmamal\u0131s\u0131n\u0131z<\/u>. \u00d6rne\u011fin, sunucu taraf\u0131nda kullan\u0131lacak bir API key i\u00e7in API_KEY<\/code> gibi bir de\u011fi\u015fken ad\u0131 kullanmal\u0131s\u0131n\u0131z. Client-side'dan eri\u015fmeniz gereken de\u011fi\u015fkenler i\u00e7in ise NEXT_PUBLIC_<\/code> \u00f6neki kullanabilirsiniz.<\/p>\n\n\/\/ pages\/api\/data.js\nexport default async function handler(req, res) {\n const apiKey = process.env.API_KEY;\n\n \/\/ API \u00e7a\u011fr\u0131s\u0131 yap\u0131n\n try {\n const response = await fetch('...', {\n headers: {\n 'Authorization': Bearer ${apiKey}<\/code>\n }\n });\n\n \/\/ ...\n } catch (error) {\n \/\/ ...\n }\n}\n<\/pre>\nOrta Seviye: Yetkilendirme ve Yetkilendirme<\/h2>\n
\n\/\/ pages\/api\/protected.js\nimport jwt from 'jsonwebtoken';\n\nexport default async function handler(req, res) {\n const token = req.headers.authorization?.split(' ')[1];\n\n if (!token) {\n return res.status(401).json({ message: 'Yetkisiz eri\u015fim' });\n }\n\n try {\n const decoded = jwt.verify(token, process.env.JWT_SECRET);\n \/\/ decoded.user i\u00e7ine kullan\u0131c\u0131 bilgilerini ekleyebilirsiniz.\n \/\/ ... (kullan\u0131c\u0131n\u0131n eri\u015fimine izin verilen i\u015flemler) ...\n\n } catch (error) {\n return res.status(401).json({ message: 'Ge\u00e7ersiz token' });\n }\n}\n<\/pre>\nJWT_SECRET<\/code> \u00e7evre de\u011fi\u015fkeni, JWT tokenlerini imzalamak i\u00e7in kullan\u0131lan gizli bir anahtard\u0131r. Bu anahtar\u0131n asla kodunuzda do\u011frudan yer almamas\u0131 ve g\u00fcvenli bir \u015fekilde saklanmas\u0131 \u00e7ok \u00f6nemlidir. Ayr\u0131ca, jsonwebtoken<\/code> k\u00fct\u00fcphanesini kullanmak i\u00e7in npm install jsonwebtoken<\/code> komutunu \u00e7al\u0131\u015ft\u0131rman\u0131z gerekir.<\/p>\n\u0130leri Seviye Teknikler: API Gateway ve Reverse Proxy<\/h2>\n
Vaka Analizi: E-Ticaret Uygulamas\u0131<\/h2>\n
Performans Kar\u015f\u0131la\u015ft\u0131rmas\u0131: Farkl\u0131 Yakla\u015f\u0131mlar<\/h2>\n
\n
\n Y\u00f6ntem<\/th>\n Performans<\/th>\n G\u00fcvenlik<\/th>\n Karma\u015f\u0131kl\u0131k<\/th>\n<\/tr>\n \n API Key'leri do\u011frudan kodda<\/td>\n Y\u00fcksek<\/td>\n D\u00fc\u015f\u00fck<\/td>\n D\u00fc\u015f\u00fck<\/td>\n<\/tr>\n \n \u00c7evre de\u011fi\u015fkenleri<\/td>\n Orta<\/td>\n Orta<\/td>\n Orta<\/td>\n<\/tr>\n \n JWT Yetkilendirme<\/td>\n Orta<\/td>\n Y\u00fcksek<\/td>\n Orta<\/td>\n<\/tr>\n \n API Gateway<\/td>\n Orta-D\u00fc\u015f\u00fck<\/td>\n \u00c7ok Y\u00fcksek<\/td>\n Y\u00fcksek<\/td>\n<\/tr>\n<\/table>\n G\u00fcvenlik Uyar\u0131lar\u0131<\/h2>\n