Next.js应用中API Key的安全管理与服务器端数据获取实践

# .env.local
NEWS_API_KEY=your_super_secret_news_api_key_here

// app/api/news/route.ts (或 .js)

import { NextResponse } from 'next/server';

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

    if (!apiKey) {
      return NextResponse.json({ error: 'API Key not configured' }, { status: 500 });
    }

    // 构造请求URL
    // 假设NewsCatcher API的搜索端点是 /v1/search
    // 你可能需要根据实际API文档调整查询参数
    const url = `https://api.newscatcherapi.com/v1/search?q=Next.js&lang=en&page_size=10`;

    // 发起服务器端请求，将API Key放在请求头中（根据API文档调整）
    const response = await fetch(url, {
      headers: {
        'x-api-key': apiKey, // 根据NewsCatcher API文档，API Key可能在请求头中
        // 或者 'Authorization': `Bearer ${apiKey}`
      },
      // cache: 'no-store' // 如果需要每次请求都获取最新数据
    });

    if (!response.ok) {
      // 处理API请求失败的情况
      const errorData = await response.json();
      console.error('External API error:', errorData);
      return NextResponse.json({ error: 'Failed to fetch news data from external API', details: errorData }, { status: response.status });
    }

    const data = await response.json();

    // 将获取到的数据返回给客户端
    return NextResponse.json(data);

  } catch (error) {
    console.error('Error in API route:', error);
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

// app/page.tsx (或任何客户端组件)

'use client'; // 标记为客户端组件

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

interface Article {
  title: string;
  link: 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路由
        const response = await fetch('/api/news');

        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>Loading news...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Latest News</h1>
      <ul>
        {news.length > 0 ? (
          news.map((article, index) => (
            <li key={index}>
              <a href={article.link} target="_blank" rel="noopener noreferrer">
                {article.title}
              </a>
            </li>
          ))
        ) : (
          <p>No news found.</p>
        )}
      </ul>
    </div>
  );
}