Next.jsでAPIキーを安全に扱う方法

Transcript

1. Next.jsでAPIキーを安全に扱う方法 yamatai12 1
2. 自己紹介 yamatai12（Webエンジニア） SNS X(taiyama1212) Qiita(yamatai12) Zenn(yamatai12) 趣味は筋トレ プロフィールです、よろしくお願いします 2
3. 今日のまとめ Next.jsのサーバーコンポーネントはサーバー上で実行される APIキーをサーバー側で付与すればブラウザに露出しない "server-only" で誤用を防げる 3
4. 背景 あるNext.jsを使っているプロジェクトでは以下のような認可に関わる要素があった。 prod/dev 等の環境ごとに固定の共通のAPIキー APIキーをブラウザに公開されると、誰でもAPIを直接叩けてしまう。 4
5. Next.jsのサーバーコンポーネント (1/2) サーバー上で実行されるので、APIキーを安全に使える クライアントコンポーネント（ 'use client' ）は従来のReactと同じ 5
6. Next.jsのサーバーコンポーネント (2/2) //呟きに関する情報を表示するページ import LikeButton from "@/app/ui/like-button"; import { getTweet } from "@/lib/data"; export default async function Page({ params, }: { params: { id: string }; }) { const { id } = params; const tweet = await getTweet(id); // サーバーコンポーネントでのデータ取得 return ( <div> <main> <h1>{tweet.title}</h1> {/* LikeButton から Server Action を呼んで “更新” する（mutation） */} <LikeButton tweetId={id} initialLikes={tweet.likes} /> {/* 従来のコンポーネント、stateやイベントハンドラー */} </main> </div> ); } 6
7. サーバーアクションでのデータフェッチ (1/3) Next.jsで使用できるサーバー上で実行される非同期関数のこと。 データの取得や変更をサーバー側で行える。 7
8. サーバーアクションでのデータフェッチ (2/3) "use client"; import { useState, useTransition } from "react"; import { likeTweet } from "@/lib/actions"; export default function LikeButton({ tweetId, initialLikes, }: { tweetId: string; initialLikes: number; }) { const [likes, setLikes] = useState(initialLikes); const [isPending, startTransition] = useTransition(); return ( <button type="button" disabled={isPending} onClick={() => { startTransition(async () => { const nextLikes = await likeTweet(tweetId); // mutation（サーバーで更新） setLikes(nextLikes); }); }} ... 8
9. サーバーアクションでのデータフェッチ (3/3) "use server"; import { incrementTweetLike, getTweet } from "@/lib/data"; // Server Action（mutation） export async function likeTweet(tweetId: string) { await incrementTweetLike(tweetId); // DB更新など（サーバー側） const tweet = await getTweet(tweetId); // 更新後の値を返す（簡易） return tweet.likes; } 9
10. APIキーをリクエストに付与するサーバー専用のモジ ュール 役割 サーバーアクションで実行するリクエストをインターセプトし、 リクエストの内容を変更する import "server-only" // ← これがあると、クライアントで誤ってimportするとビルドエラーになる ... axiosInstance.interceptors.request.use((config) => { config.baseURL = serverEnv.API_ORIGIN; config.headers["X-Api-Key"] = serverEnv.API_KEY; return config; }); ... //このaxiosInstanceを再exportする 10
11. Next.jsサーバーを通す構成 これにより、APIキーや環境変数をクライアントから見れないようにすることができる 11
12. まとめ Next.jsのサーバーコンポーネントはサーバー上で実行される APIキーをサーバー側で付与すればブラウザに露出しない "server-only" で誤用を防げる 12
13. 参考 https://kaminashi-developer.hatenablog.jp/entry/nextjs-server-actions https://Next.js.org/docs/14/app/building-your-application/data-fetching/server- actions-and-mutations https://Next.jsjp.org/docs/app/getting-started/server-and-client-components https://qiita.com/buntafujikawa/items/78e9204cc9ea7eaabd3d 13