create-next-app中API密钥存储与NewsCatcher API调用方法咨询

一、API密钥存储方式 #

1. 环境变量（推荐） #

• 在项目根目录创建.env.local文件，写入你的API密钥：

  NEWS_CATCHER_API_KEY=你的密钥内容
  

• 注意变量使用场景：
  • 服务器端调用（API路由、服务器组件）：直接用process.env.NEWS_CATCHER_API_KEY，无需前缀，密钥不会暴露给客户端。
  • 客户端组件调用：变量名必须加NEXT_PUBLIC_前缀（如NEXT_PUBLIC_NEWS_CATCHER_API_KEY），但这种方式会将密钥暴露在浏览器中，仅适用于允许公开的密钥。Newscatcher的密钥建议通过服务器端中转，避免直接在客户端使用。

2. API路由中转（安全首选） #

如果密钥需要保密，建议在Next.js的API路由中封装第三方API调用，客户端仅调用自己的API路由，确保密钥只在服务器端存在。

二、API调用方法 #

1. 服务器组件直接调用 #

在服务器组件（如app/page.js）中直接请求第三方API：

async function fetchLatestNews() {
  const apiKey = process.env.NEWS_CATCHER_API_KEY;
  const res = await fetch('https://api.newscatcherapi.com/v2/latest_headlines', {
    headers: {
      'x-api-key': apiKey
    }
  });

  if (!res.ok) {
    throw new Error('获取新闻数据失败');
  }

  return res.json();
}

export default async function Home() {
  const newsData = await fetchLatestNews();

  return (
    <div className="news-container">
      <h1>最新头条</h1>
      {newsData.articles.map(article => (
        <div key={article.title} className="news-item">
          <h3>{article.title}</h3>
          <p>{article.summary}</p>
        </div>
      ))}
    </div>
  );
}

2. API路由中转（客户端调用） #

先创建app/api/news/route.js作为中转接口：

export async function GET() {
  const apiKey = process.env.NEWS_CATCHER_API_KEY;
  const res = await fetch('https://api.newscatcherapi.com/v2/latest_headlines', {
    headers: {
      'x-api-key': apiKey
    }
  });

  const newsData = await res.json();
  return Response.json(newsData);
}

再在客户端组件中调用这个中转接口：

'use client';

import { useEffect, useState } from 'react';

export default function NewsList() {
  const [newsData, setNewsData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function getNews() {
      const res = await fetch('/api/news');
      const data = await res.json();
      setNewsData(data);
      setLoading(false);
    }

    getNews();
  }, []);

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

  return (
    <div className="news-container">
      <h1>最新头条</h1>
      {newsData.articles.map(article => (
        <div key={article.title} className="news-item">
          <h3>{article.title}</h3>
          <p>{article.summary}</p>
        </div>
      ))}
    </div>
  );
}

三、关键注意事项 #

• 禁止将密钥硬编码到代码中，.env.local文件已默认被Next.js的.gitignore排除，不要提交到版本控制。
• 区分开发/生产环境：可分别创建.env.development.local和.env.production.local来管理不同环境的密钥。
• 对于敏感密钥，必须通过服务器端调用，绝对避免在客户端代码中直接使用。

内容的提问来源于stack exchange，提问作者Unnikrishnan KJ