Next.js 应用中安全存储与使用 API Key 的最佳实践

// app/api/news/route.ts
import { NextResponse } from 'next/server';

export async function GET(request: Request) {
  // 1. 安全地从环境变量中获取 API Key
  const NEWS_API_KEY = process.env.NEWS_API_KEY;

  // 2. 检查 API Key 是否已配置
  if (!NEWS_API_KEY) {
    console.error('NEWS_API_KEY is not configured in environment variables.');
    return NextResponse.json({ error: 'Server configuration error: API Key missing.' }, { status: 500 });
  }

  // 3. 从客户端请求中获取查询参数
  const { searchParams } = new URL(request.url);
  const query = searchParams.get('query') || 'latest news'; // 默认查询

  try {
    // 4. 在服务器端使用 API Key 调用外部 API
    const response = await fetch(`https://api.newscatcherapi.com/v1/latest_headlines?q=${encodeURIComponent(query)}`, {
      headers: {
        'x-api-key': NEWS_API_KEY, // 在服务器端安全地使用 API Key
      },
      // 可以在这里添加其他 fetch 选项，如缓存策略等
      cache: 'no-store', // 确保每次请求都获取最新数据
    });

    // 5. 处理外部 API 的响应
    if (!response.ok) {
      const errorDetails = await response.json();
      console.error(`External API call failed: ${response.status} - ${errorDetails.message || JSON.stringify(errorDetails)}`);
      return NextResponse.json({ error: `Failed to fetch news data from external API: ${errorDetails.message || 'Unknown error'}` }, { status: response.status });
    }

    const data = await response.json();
    // 6. 将处理后的数据发送给客户端
    return NextResponse.json(data);
  } catch (error: any) {
    console.error('Error in API route while fetching news:', error.message);
    return NextResponse.json({ error: 'Internal server error while fetching news data.' }, { status: 500 });
  }
}

// 在客户端组件或服务器组件中调用 Next.js API 路由
'use client'; // 如果是客户端组件

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

async function fetchNewsFromNextApi(query: string) {
  const res = await fetch(`/api/news?query=${encodeURIComponent(query)}`); // 调用本地API路由
  if (!res.ok) {
    const errorData = await res.json();
    throw new Error(errorData.error || 'Failed to fetch news from internal API.');
  }
  return res.json();
}

export default function NewsDisplay() {
  const [news, setNews] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const getNews = async () => {
      try {
        const data = await fetchNewsFromNextApi('technology'); // 例如，获取科技新闻
        setNews(data.articles || []); // 假设数据结构中有 articles 数组
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };
    getNews();
  }, []);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>错误: {error}</p>;

  return (
    <div>
      <h1>最新科技新闻</h1>
      {news.length > 0 ? (
        <ul>
          {news.map((article: any, index: number) => (
            <li key={index}>
              <a href={article.link} target="_blank" rel="noopener noreferrer">
                {article.title}
              </a>
              <p>{article.summary}</p>
            </li>
          ))}
        </ul>
      ) : (
        <p>没有找到新闻。</p>
      )}
    </div>
  );
}