Özellikle yeni öğrenirken ve özel anahtar gerektiren genel API'lerle oynamaya başladığımızda böyle sorunlarımız olabiliyor.
Anahtarlarınızı ön uçta korumanın iyi (veya herhangi) bir yolu yoktur. İyi bir alternatif, arka uç kodu tarayıcıya açıklanmadığından kendi sunucunuzda bir proxy oluşturmaktır. Ancak bu API'leri kullanan birçok kişi, henüz arka uç hakkında pek bir şey bilmeyen yeni başlayanlardır.
Peki, Next JS, entegre ve kullanıma hazır API Rotaları ile bunu sağlayabilir mi? Temelde, kullanıma hazır bir sunucu olan API uç noktaları oluşturmak için kullanabileceğiniz bir Node JS ortamıdır.
İlk Kurulum
İlk önce bir sonraki js uygulamasını oluşturalım.
npx create-next-app next-api
# veya
yarn create next-app next-api
cd next-api
Farklı bir .env dosyası
Projeye girdikten sonra bir dosya oluşturabiliriz .env.local. .envBu dosyalara aşina iseniz, normal dosyalarınızla aynı görünür . Aradaki fark, içindeki değişkenlerin .env.local yalnızca Next'in Node JS ortamında mevcut olmasıdır. Bu, tarayıcının bunlara erişimi olmadığı anlamına gelir.
Peki bu değişkenleri nerede kullanabiliriz?
İçinde pagesadında başka bir klasör var api, buradaki herhangi bir dosya bir API uç noktası olarak ele alınacaktır.
Aşağı yukarı böyle çalışır.
Sunucu tarafında elimizde pages/api/hello.js
export default (req, res) => {
res.status(200).json({ name: 'Ahmet Veli' })
}
const fetchHello = async (page) => {
const res = await fetch(`/api/hello`); // Api yolumuzu buraya giriyoruz
const data = await res.json();
// data = { name: "Ahmet Veli" }
return data;
};
Anahtarı korumak
Artık bunun nasıl çalıştığını bildiğimize göre, dosyaya bir anahtar ekleyelim .env.local.
İsteğimin URL'sini göndermem gereken bir anahtarım olduğunu varsayalım.
Anahtarı içeri ekleyelim .env.local
SECRET_KEY=secret_anahtar
Ve anahtarımızı client tarafında kullanmak yerine içeride kullanırız hello.js içinde.
// pages/api/hello.js
import axios from "axios";
export default async (req, res) => {
const URL = `https://api.example.com/?&api_key=${process.env.SECRET_KEY}`;
const response = await axios.get(URL);
res.status(200).json({ data: response.data })
}
şimdi istemci tarafında /api/hello ya call atarak anahtarımızı gizlemiş olarak client side da işimizi yapabiliriz.
Hepsi bu kadar, anahtarımız ağ sekmesinde hiçbir yerde görünmüyor.
