Next.js APIキーを隠したい

前提

Next.jsでAPIを使ってデータを取得しています。
ページ表示時サーバーサイドでデータを取得
クライアントサイドでの通信は環境変数を使用してAPIキーを指定している

実現したいこと

クリックされた時に
条件を変えてクライアントサイドで再度API通信をした際にAPIキーが見えてしまうので隠したい。

最初はサーバーサイドでAPI通信をしているので問題ないですが、条件を変えて再度API通信をするとクライアントサイドの処理になるためAPIキーがディベロッパーツールで見えてしまう。

クリックイベントでクライアントサイドではなくサーバーサイドで処理を実行させる方法があるのでしょうか？
それが不可の場合APIキーを扱う際は通常どのように管理するのでしょうか？

発生している問題・エラーメッセージ

ボタンをクリック→再度API通信をして条件に合うデータを再取得
クライアントサイドでの処理になるためAPIキーがディベロッパーツール上に表示される

該当のソースコード

index.js

import axios from 'axios';
import { useEffect, useState } from 'react';

export async function getServerSideProps() {

    let dataes;
    
    await axios.get('http://webservice.recruit.co.jp/hotpepper/middle_area/v1/?format=json&key=*****')
    
    .then(nn=>dataes=nn.data.results.middle_area)
    
    .catch(error=>console.log(error))

    return {props:{dataes}}
        
    }

            
    

function Main({dataes}) {
    
    const[state,setstate]=useState([])

    // 条件を変えるためstateでデータを管理
    useEffect(()=>{
        setstate(dataes)
    },[dataes])

// ボタンがクリックされた際に再度API通信をして新たにデータを取得
    const pp=()=>{
        const url='https://api-cors4544545454.herokuapp.com/http://webservice.recruit.co.jp/hotpepper/large_area/v1/?format=json&key='+process.env.NEXT_PUBLIC_APIKEY;
         axios.get(url)
    
        .then(nn=>setstate(nn.data.results.large_area))
        
        .catch(error=>console.log(error))
    
    }

    return(
<>
 {state.map((i,index)=>(
    <div>
        <p>{i.name}</p>
        <button onClick={pp}>押下</button>
    </div>
     ))}
    
    </>

    )
}

export default Main;

試したこと

クライアントサイドでAPI通信をするときは環境変数を使用

クリックされた時にクライアントサイドではなくサーバーサイドで処理を行う方法があるのでしょうか？

補足情報（FW/ツールのバージョンなど）

Next.js ver 12.1

行動規範の内容に同意します

回答3件

ServerMiddleWareはサーバサイド側だけ実行されるので、クライアント側には漏れないかと思います。

但し、サーバ側で実行する関係上、SinglePageApplication(SPA)モードでは使えません。
また、ServerSideRendering(SSR)モードはnode.jsをサーバ側で常時起動させておく必要があり、nginxやapache等のウェブサーバと連携するのであればReverseProxyが必要になりTCP Timewaitでポートが枯渇しやすく、一般に公開する本格的なサービスで使うには向かない印象です。

nuxt.jsのサーバサイド機能を使うくらいならSPAで作りCDNにキャッシュさせ、サーバ側はサーバ側専用の言語でAPIをSPA側へ提供するという設計にした方が良いかと思います。

投稿2022/08/06 06:09

ippei

総合スコア89

公開鍵はクライアント側に持たせるもので「.env.local」に書いていたとしても見えてしまいます。例え難読化を行ったとしても見えてしまいます。JavaScript(React)自体がそういうものなのです。クライアント側で公開鍵を用いてサーバーへアクセスし、サーバー側で秘密鍵を用いて処理をし、結果をクライアントへ返します。

まずはAPIキーと呼んでいるものが、本当に隠す必要があるものであるかを確認する必要があります。

投稿2022/08/03 09:45

編集2022/08/03 19:09