Next.js应用中API密钥的安全管理与数据请求策略

# .env.local
NEWS_API_KEY=YOUR_NEWS_API_KEY_GOES_HERE

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

export async function GET(request: NextRequest) {
  // 从环境变量中获取API密钥
  const apiKey = process.env.NEWS_API_KEY;

  // 检查API密钥是否存在
  if (!apiKey) {
    console.error('NEWS_API_KEY is not defined in environment variables.');
    return NextResponse.json(
      { error: 'Server configuration error: API key missing.' },
      { status: 500 }
    );
  }

  // 从请求URL中获取查询参数，例如：/api/news?q=Next.js
  const { searchParams } = new URL(request.url);
  const query = searchParams.get('q') || 'Next.js'; // 默认查询Next.js

  try {
    // 构建外部API的URL
    const externalApiUrl = `https://api.newscatcherapi.com/v2/search?q=${encodeURIComponent(query)}&lang=en`;

    // 向外部API发起请求，并附带API密钥
    const response = await fetch(externalApiUrl, {
      headers: {
        'x-api-key': apiKey, // 根据Newscatcher API文档，API密钥在请求头中
      },
      // Cache-Control 头部，告诉客户端和中间代理如何缓存响应
      // 对于API路由，通常不需要设置此头部，因为它是服务器端逻辑
      // 但如果外部API有特定的缓存需求，可以在这里添加
    });

    // 检查外部API的响应状态
    if (!response.ok) {
      const errorText = await response.text();
      console.error(`External API error: ${response.status} - ${errorText}`);
      return NextResponse.json(
        { error: `Failed to fetch news from external API: ${response.statusText}` },
        { status: response.status }
      );
    }

    // 解析外部API的响应数据
    const data = await response.json();

    // 将数据返回给客户端
    return NextResponse.json(data, { status: 200 });

  } catch (error) {
    console.error('Error fetching news:', error);
    return NextResponse.json(
      { error: 'Internal server error while fetching news.' },
      { status: 500 }
    );
  }
}

// app/page.tsx (或任何客户端组件)
'use client'; // 如果在App Router中使用客户端组件

import { useEffect, useState } from 'react';

interface Article {
  title: string;
  link: string;
  summary: string;
}

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

  useEffect(() => {
    async function fetchNews() {
      try {
        // 客户端调用自己的API路由，而不是直接调用外部API
        const response = await fetch('/api/news?q=Next.js'); // 可以传递查询参数

        if (!response.ok) {
          const errorData = await response.json();
          throw new Error(errorData.error || 'Failed to fetch news');
        }

        const data = await response.json();
        // Newscatcher API的响应结构可能包含一个 'articles' 数组
        setNews(data.articles || []); 
      } catch (err: any) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    fetchNews();
  }, []);

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

  if (error) {
    return <p style={{ color: 'red' }}>错误: {error}</p>;
  }

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