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>   ); }