Selam geliştirici dostum! Next.js dünyasına dalıp güçlü API'lar oluşturmaya hazır mısınız? Bu blog yazısında, bir Next.js API örneğini inceleyeceğiz, API'ların önemini tartışacağız ve API geliştirmenizi her zamankinden daha sorunsuz hale getirecek harika bir araç olan Apidog'u tanıtacağız. O halde, en sevdiğiniz içeceği alın ve başlayalım!
Next.js Nedir?
API geliştirmesinin inceliklerine dalmadan önce, Next.js'in ne olduğunu anlamak için bir an ayıralım. Next.js, geliştiricilerin sunucu tarafında oluşturulmuş React uygulamalarını kolaylıkla oluşturmalarını sağlayan popüler bir React çerçevesidir. Statik site oluşturma, sunucu tarafında oluşturma ve güçlü bir API rota sistemi gibi özellikler sunar. Bu, onu modern web uygulamaları oluşturmak için mükemmel bir seçim haline getirir.
API'lar için Neden Next.js Kullanmalısınız?
Merak ediyor olabilirsiniz, neden bu kadar çok seçenek varken API'lar için Next.js kullanmalıyım? Harika bir soru! İşte birkaç ilgi çekici neden:
Basitlik: Next.js, API rotaları oluşturmak için basit ve sezgisel bir yol sunar. Ayrı bir sunucu kurmanız veya karmaşık ara yazılımlar yapılandırmanız gerekmez. Hepsi yerleşik!
Performans: Next.js ile, API'larınızın performansını optimize etmek için sunucu tarafında oluşturma ve statik site oluşturmadan yararlanabilirsiniz. Bu, daha hızlı yanıt süreleri ve daha iyi bir kullanıcı deneyimi anlamına gelir.
Esneklik: Next.js, Node.js, Express ve daha fazlası dahil olmak üzere çeşitli arka uç teknolojilerini kullanmanıza olanak tanır. İhtiyaçlarınıza en uygun araçları seçebilirsiniz.
SEO Dostu: Next.js, SEO göz önünde bulundurularak tasarlanmıştır ve API'larınızın arama motorları tarafından keşfedilmesini kolaylaştırır.
Next.js Projenizi Kurma
Basit bir Next.js projesiyle başlayalım. Henüz yapmadıysanız, makinenize Node.js ve npm (veya yarn) yüklemeniz gerekir. Bu yapıldıktan sonra, aşağıdaki komutu çalıştırarak yeni bir Next.js projesi oluşturabilirsiniz:
npx create-next-app my-nextjs-api
Proje dizininize gidin:
cd my-nextjs-api
Şimdi, ilk API rotamızı oluşturmaya dalalım!
İlk Next.js API Rotanızı Oluşturma
Next.js'te, API rotaları pages/api dizininde saklanır. Kullanıcıların bir listesini döndüren basit bir API rotası oluşturalım. pages/api dizininde users.js adlı yeni bir dosya oluşturun:
mkdir -p pages/api
touch pages/api/users.js
users.js dosyasını açın ve aşağıdaki kodu ekleyin:
// pages/api/users.js
export default function handler(req, res) {
const users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
];
res.status(200).json(users);
}
Bu kod, kullanıcıların bir listesiyle yanıt veren temel bir API rotası tanımlar. handler fonksiyonu iki argüman alır: req (istek nesnesi) ve res (yanıt nesnesi). 200 (OK) durum koduyla bir JSON yanıtı göndermek için res.status(200).json(users) kullanırız.
API'nizi Test Etme
Yeni API'nizi test etmek için, Next.js geliştirme sunucunuzu başlatın:
npm run dev
Tarayıcınızı açın ve http://localhost:3000/api/users adresine gidin. Kullanıcıların listesiyle bir JSON yanıtı görmelisiniz:
[
{ "id": 1, "name": "John Doe" },
{ "id": 2, "name": "Jane Doe" }
]
Apidog'u Tanıyalım: API Geliştirme Yoldaşınız
API'lar geliştirmek ve test etmek göz korkutucu bir görev olabilir, ancak doğru araçlarla bu bir esinti haline gelir. İşte Apidog'un devreye girdiği yer burasıdır. Apidog, API'larınızı zahmetsizce tasarlamanıza, test etmenize ve belgelemenize olanak tanıyan hepsi bir arada bir API geliştirme aracıdır. İş akışınızı kolaylaştırmak için kullanıcı dostu bir arayüz ve güçlü özellikler sunar.
İş akışınızı geliştirmek için Apidog'u nasıl kullanabileceğiniz aşağıda açıklanmıştır. Apidog , API'nizi doğrudan araç içinde test etmenizi sağlar. GET, POST, PUT ve DELETE istekleri yapabilir ve yanıtları gerçek zamanlı olarak görebilirsiniz.
Adım 1: Apidog'u açın ve yeni bir istek oluşturun.
Adım 2: Yapmak istediğiniz POST isteği için API ayrıntılarını bulun veya manuel olarak girin.
Adım 3: Gerekli parametreleri ve istek gövdesine dahil etmek istediğiniz verileri doldurun.
Apidog'u iş akışınıza entegre ederek, zaman kazanabilir ve API geliştirmedeki yaygın tuzaklardan kaçınabilirsiniz. Ayrıca, indirmek ve kullanmak ücretsizdir!
Sözümüze güvenmeyin; Apidog'u ücretsiz indirin ve farkı kendiniz deneyimleyin!
Daha Fazla Karmaşıklık Ekleme: Sorgu Parametreleri
Şimdi temel bir API rotamız olduğuna göre, sorgu parametrelerini işleyerek biraz karmaşıklık ekleyelim. Kullanıcıların listesini adlarına göre filtrelemek istediğimizi varsayalım. Bunu users.js dosyamızı değiştirerek başarabiliriz:
// pages/api/users.js
export default function handler(req, res) {
const { query } = req;
const { name } = query;
const users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
];
if (name) {
const filteredUsers = users.filter(user => user.name.toLowerCase().includes(name.toLowerCase()));
res.status(200).json(filteredUsers);
} else {
res.status(200).json(users);
}
}
Bu güncellemeyle, API'miz artık kullanıcıları name sorgu parametresine göre filtreleyebilir. Örneğin, http://localhost:3000/api/users?name=john adresine gitmek şunları döndürecektir:
[
{ "id": 1, "name": "John Doe" }
]
Farklı HTTP Yöntemlerini İşleme
API'ların genellikle GET, POST, PUT ve DELETE gibi farklı HTTP yöntemlerini işlemesi gerekir. Yeni kullanıcılar eklemek için POST isteklerini işlemek üzere users.js dosyamızı değiştirelim:
// pages/api/users.js
let users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
];
export default function handler(req, res) {
const { method } = req;
switch (method) {
case 'GET':
res.status(200).json(users);
break;
case 'POST':
const { name } = req.body;
const newUser = { id: users.length + 1, name };
users.push(newUser);
res.status(201).json(newUser);
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}
Artık API'miz hem GET hem de POST isteklerini işleyebilir. POST isteğini test etmek için Postman gibi bir araç veya daha iyisi Apidog kullanabilirsiniz. http://localhost:3000/api/users adresine bir JSON gövdesiyle bir POST isteği yapın:
{
"name": "Alice Smith"
}
Yanıt, yeni oluşturulan kullanıcı olmalıdır:
{
"id": 3,
"name": "Alice Smith"
}
Next.js API'larında Hata İşleme
Sağlam hata işleme, herhangi bir API için çok önemlidir. Geçersiz istekler için hata işlemeyi dahil etmek üzere users.js dosyamızı geliştirelim:
// pages/api/users.js
let users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
];
export default function handler(req, res) {
const { method } = req;
switch (method) {
case 'GET':
res.status(200).json(users);
break;
case 'POST':
const { name } = req.body;
if (!name) {
res.status(400).json({ error: 'Name is required' });
} else {
const newUser = { id: users.length + 1, name };
users.push(newUser);
res.status(201).json(newUser);
}
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}
Şimdi, gövdede bir name özelliği olmadan bir POST isteği yapmaya çalışırsanız, bir hata yanıtı alacaksınız:
{
"error": "Name is required"
}
Next.js API'nizi Güvenli Hale Getirme
Güvenlik, herhangi bir API için en büyük önceliktir. API rotalarımız için temel kimlik doğrulamayı uygulayalım. İstekleri doğrulamak için bir API anahtarı kullanacağız. İlk olarak, API anahtarımız için yeni bir ortam değişkeni oluşturalım. Projenizin kökünde bir .env.local dosyası oluşturun:
API_KEY=mysecretapikey
Ardından, API anahtar kimlik doğrulamasını dahil etmek için users.js dosyanızı güncelleyin:
// pages/api/users.js
let users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Doe' },
];
export default function handler(req, res) {
const { method, headers } = req;
const apiKey = headers['x-api-key'];
if (apiKey !== process.env.API_KEY) {
return res.status(401).json
({ error: 'Unauthorized' });
}
switch (method) {
case 'GET':
res.status(200).json(users);
break;
case 'POST':
const { name } = req.body;
if (!name) {
res.status(400).json({ error: 'Name is required' });
} else {
const newUser = { id: users.length + 1, name };
users.push(newUser);
res.status(201).json(newUser);
}
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}
Şimdi, API rotalarınız kimlik doğrulaması için bir API anahtarı gerektirir. API'ye erişmek için isteklerinizde x-api-key başlığını ekleyin:
{
"x-api-key": "mysecretapikey"
}
Sonuç
Next.js ile API'lar oluşturmak hem eğlenceli hem de ödüllendiricidir. API rotaları oluşturmanın, farklı HTTP yöntemlerini işlemenin, hata işlemenin ve güvenlik eklemenin temellerini ele aldık. Ayrıca, API'larınızı tasarlamak, test etmek ve belgelemek için harika bir araç olan Apidog'u tanıttık.
İster deneyimli bir geliştirici olun, ister yeni başlıyor olun, Next.js ve Apidog, güçlü, ölçeklenebilir API'lar oluşturmak için ihtiyacınız olan araçları sağlar. Öyleyse, ne bekliyorsunuz? Bugün Next.js API'nizi oluşturmaya başlayın ve geliştirme sürecinizi kolaylaştırmak için Apidog'u ücretsiz indirmeyi unutmayın.
