Next.js Sunucu Bileşenlerini Kullanarak API Anahtarları Nasıl Güvenli Bir Şekilde Kullanılır

Genel Bakış

We can use Next.js server components⁠ to properly secure our API key from exposure in the frontend of our dapp. To further increase our API key security, we can also restrict our API key to certain Subgraphs or domains in Subgraph Studio.

In this cookbook, we will go over how to create a Next.js server component that queries a Subgraph while also hiding the API key from the frontend.

Kısıtlamalar

• Next.js sunucu bileşenleri, servis dışı bırakma saldırıları ile API anahtarlarının boşaltılmasına karşı koruma sağlamaz.
• The Graph Ağ geçitleri, servis dışı bırakma saldırı tespiti ve saldırıyı hafifletme stratejilerine sahiptir. Ancak sunucu bileşenlerini kullanmak bu korumaları zayıflatabilir.
• Next.js sunucu bileşenleri, sunucunun çökmesi ihtimali dolayısıyla merkezileşme riskleri taşır.

Neden Gerekli

Standart bir React uygulamasında, ön yüz koduna dahil edilen API anahtarları istemci tarafında açığa çıkabilir ve güvenlik riski oluşturabilir. .env dosyaları yaygın olarak kullanılsa da React kodu istemci tarafında çalıştığı için anahtarları tam olarak korumazlar ve API anahtarı başlıklarda açığa çıkar. Next.js Sunucu Bileşenleri bu sorunu, hassas işlemleri sunucu tarafında yürüterek çözer.

Using client-side rendering to query a Subgraph

Prerequisites

• Subgraph Studio’dan bir API anahtarı
• Temel Next.js ve React bilgisi.
• Uygulama Yönlendiricisi⁠ kullanan mevcut bir Next.js projesi.

Adım Adım Talimatlar

Adım 1: Ortam Değişkenlerini Ayarlayın

1. Next.js projemizin kök dizininde .env.local dosyası oluşturun.
2. API anahtarımızı ekleyin: API_KEY=<buraya_api_anahtarını_yerleştirin>.

Adım 2: Bir Sunucu Bileşeni Oluşturma

1. components dizinimizde “ServerComponent.js” adında yeni bir dosya oluşturun.
2. Sunucu bileşenini kurmak için sağlanan örnek kodu kullanın.

Adım 3: Sunucu Tarafı API İsteğini Gerçekleştirin

ServerComponent.js’e aşağıdaki kodu ekleyin:

1const API_KEY = process.env.API_KEY23export default async function ServerComponent() {4  const response = await fetch(5    `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/HUZDsRpEVP2AvzDCyzDHtdc64dyDxx8FQjzsmqSg4H3B`,6    {7      method: 'POST',8      headers: {9        'Content-Type': 'application/json',10      },11      body: JSON.stringify({12        query: /* GraphQL */ `13          {14            factories(first: 5) {15              id16              poolCount17              txCount18              totalVolumeUSD19            }20          }21        `,22      }),23    },24  )2526  const responseData = await response.json()27  const data = responseData.data2829  return (30    <div>31      <h1>Server Component</h1>32      {data ? (33        <ul>34          {data.factories.map((factory) => (35            <li key={factory.id}>36              <p>ID: {factory.id}</p>37              <p>Pool Count: {factory.poolCount}</p>38              <p>Transaction Count: {factory.txCount}</p>39              <p>Total Volume USD: {factory.totalVolumeUSD}</p>40            </li>41          ))}42        </ul>43      ) : (44        <p>Loading data...</p>45      )}46    </div>47  )48}

Adım 4: Sunucu Bileşenini Kullanın

1. Sayfa dosyamızda (örneğin, pages/index.js), ServerComponent’ı içe aktarın.
2. Bileşeni işleyin:

1import ServerComponent from './components/ServerComponent'23export default function Home() {4  return (5    <main>6      <ServerComponent />7    </main>8  )9}

Adım 5: Dapp’imizi Çalıştırın ve Test Edin

npm run dev komutunu kullanarak Next.js uygulamamızı başlatın. Sunucu bileşeninin API anahtarını açığa çıkarmadan veri çektiğini doğrulayın.

Sonuç

Next.js Sunucu Bileşenlerini kullanarak, API anahtarını istemci tarafında gizlemeyi başardık ve bu da uygulamamızın güvenliğini artırdı. Bu yöntem, hassas işlemlerin potansiyel istemci-taraflı güvenlik açıklıklarından uzak bir şekilde sunucu tarafında ele alındığını garanti eder. Son olarak, API anahtar güvenliğinizi daha da artırmak için diğer API anahtar güvenlik önlemlerini incelemeyi unutmayın.