如何利用Next.js 14 Server Actions与Axios实现服务端通信及最佳实践

一、实现服务端通信的步骤 #

1. 安装 Axios #

首先在项目中安装 Axios：

npm install axios
# 或者
yarn add axios

2. 创建 Server Action #

在 Next.js 14 中，Server Action 只需添加 'use server' 标记即可在服务端运行。直接在 Action 中使用 Axios 发起请求：

// app/actions.ts
'use server';

import axios from 'axios';

// 示例：GET 请求外部 API
export async function fetchExternalData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    return response.data;
  } catch (error) {
    // 区分 Axios 错误与普通错误，返回友好提示
    if (axios.isAxiosError(error)) {
      throw new Error(`请求失败: ${error.response?.data?.message || error.message}`);
    } else {
      throw new Error('未知错误');
    }
  }
}

// 示例：POST 请求提交数据
export async function submitData(payload: { name: string; email: string }) {
  try {
    const response = await axios.post('https://api.example.com/submit', payload, {
      headers: { 'Content-Type': 'application/json' },
    });
    return response.data;
  } catch (error) {
    if (axios.isAxiosError(error)) {
      console.error('请求错误详情:', error.response?.data);
      throw new Error(`提交失败: ${error.response?.statusText || error.message}`);
    }
    throw new Error('提交数据时发生未知错误');
  }
}

3. 在组件中调用 Server Action #

无论是客户端组件还是服务端组件，都可以直接调用这些 Action：

// app/page.tsx
'use client'; // 客户端组件需要添加此标记

import { fetchExternalData, submitData } from './actions';

export default function Home() {
  const handleFetch = async () => {
    try {
      const data = await fetchExternalData();
      console.log('获取到的数据:', data);
    } catch (err) {
      console.error('获取数据失败:', err);
    }
  };

  const handleSubmit = async () => {
    try {
      const result = await submitData({ name: 'John Doe', email: 'john@example.com' });
      console.log('提交结果:', result);
    } catch (err) {
      console.error('提交失败:', err);
    }
  };

  return (
    <div className="p-4">
      <button onClick={handleFetch} className="mr-4 p-2 bg-blue-500 text-white">
        获取数据
      </button>
      <button onClick={handleSubmit} className="p-2 bg-green-500 text-white">
        提交数据
      </button>
    </div>
  );
}

二、最佳实践 #

1. 统一配置 Axios 实例 #

创建全局 Axios 实例，集中管理 baseURL、超时、拦截器等配置，避免重复代码：

// lib/axios.ts
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: process.env.EXTERNAL_API_BASE_URL, // 从环境变量读取
  timeout: 10000, // 10秒超时
  headers: { 'Content-Type': 'application/json' },
});

// 请求拦截器：添加认证 Token
axiosInstance.interceptors.request.use(
  (config) => {
    const token = process.env.EXTERNAL_API_TOKEN;
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// 响应拦截器：统一处理错误状态码
axiosInstance.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      throw new Error('认证失败，请检查 Token');
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

之后在 Server Action 中直接导入这个实例使用即可。

2. 用环境变量管理敏感信息 #

不要在代码中硬编码 API 密钥、baseURL 等敏感信息，将它们放在 .env.local 文件中：

EXTERNAL_API_BASE_URL=https://api.example.com
EXTERNAL_API_TOKEN=your-secret-token

Next.js 会自动加载这些变量，在 Server Action 中直接通过 process.env 访问。

3. 完善错误处理与日志 #

在 Server Action 中务必捕获并处理 Axios 错误，记录详细日志（如响应状态码、错误数据）以便调试，同时返回用户友好的错误信息，避免暴露内部细节。

4. 结合 Next.js 缓存优化性能 #

对于可复用的请求结果，使用 Next.js 的缓存机制减少重复调用外部 API：

'use server';

import axiosInstance from '@/lib/axios';
import { unstable_cache } from 'next/cache';

// 缓存请求结果，1小时后重新验证
export const fetchCachedData = unstable_cache(
  async () => {
    const response = await axiosInstance.get('/data');
    return response.data;
  },
  ['external-data-cache'], // 缓存唯一标识
  { revalidate: 3600 }
);

5. 并发请求优化 #

如果需要同时发起多个请求，使用 Promise.all 提高效率：

'use server';

import axiosInstance from '@/lib/axios';

export async function fetchMultipleResources() {
  try {
    const [users, products] = await Promise.all([
      axiosInstance.get('/users'),
      axiosInstance.get('/products'),
    ]);
    return { users: users.data, products: products.data };
  } catch (error) {
    throw new Error('获取多资源失败');
  }
}

6. 避免在 Server Action 中混入客户端逻辑 #

Server Action 运行在服务端，可安全处理敏感操作（如认证、密钥管理），不要将仅客户端的逻辑（如 DOM 操作）放在其中。

内容的提问来源于stack exchange，提问作者Meet Rathod