如何在Next.js中使用Laravel构建的REST API？相关实现方案解惑

一、Laravel + Next.js 搭配是否合理？ #

完全合理。Laravel作为后端框架，擅长处理业务逻辑、数据库交互、权限验证等后端核心工作；Next.js专注前端渲染（支持SSR/SSG/ISR）、路由管理和用户界面开发，二者分工明确，生态成熟，适合从中小型到大型的各类项目。

二、Next.js 调用 Laravel API 的两种方式：Route Handler vs Server Actions #

1. Route Handler（路由处理器） #

• 核心作用：在Next.js的app/api目录下创建中间层API路由，负责转发请求到Laravel后端，同时可做数据预处理、权限校验、缓存等操作，避免前端直接暴露后端API地址。
• 适用场景：需要在多个组件复用的API请求、需要做中间逻辑处理、前端通过HTTP请求获取数据的场景。
• 代码示例：
  创建app/api/posts/route.js作为代理路由：

import { NextResponse } from 'next/server';

export async function GET() {
  // 从环境变量读取配置，避免硬编码
  const laravelApiUrl = `${process.env.LARAVEL_API_URL}/posts`;
  const authToken = process.env.LARAVEL_API_TOKEN;

  const response = await fetch(laravelApiUrl, {
    headers: {
      'Authorization': `Bearer ${authToken}`,
      'Accept': 'application/json',
    },
  });

  if (!response.ok) {
    return NextResponse.json({ error: '获取文章失败' }, { status: response.status });
  }

  const posts = await response.json();
  return NextResponse.json(posts);
}

前端组件调用这个代理路由：

'use client';

import { useEffect, useState } from 'react';

export default function PostsPage() {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchPosts() {
      try {
        const res = await fetch('/api/posts');
        if (!res.ok) throw new Error('请求失败');
        const data = await res.json();
        setPosts(data);
      } catch (err) {
        setError(err.message);
      }
    }
    fetchPosts();
  }, []);

  if (error) return <div>错误：{error}</div>;
  return (
    <div>
      <h1>文章列表</h1>
      {posts.map(post => (
        <div key={post.id} className="post-item">
          <h3>{post.title}</h3>
          <p>{post.excerpt}</p>
        </div>
      ))}
    </div>
  );
}

2. Server Actions（服务器动作） #

• 核心作用：直接在服务器端执行异步操作，无需单独创建API路由，代码与组件绑定更紧凑，适合和用户交互绑定的数据修改操作。
• 适用场景：表单提交（创建/更新/删除数据）、不需要复用的单次服务器端操作。
• 代码示例：
  在组件内定义并使用Server Action：

'use client';

import { useState } from 'react';

// 标记为服务器端执行函数
async function createPost(formData) {
  'use server';
  const title = formData.get('title');
  const content = formData.get('content');

  const laravelApiUrl = `${process.env.LARAVEL_API_URL}/posts`;
  const authToken = process.env.LARAVEL_API_TOKEN;

  const response = await fetch(laravelApiUrl, {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${authToken}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ title, content }),
  });

  if (!response.ok) {
    throw new Error('创建文章失败');
  }

  return await response.json();
}

export default function CreatePostPage() {
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  async function handleSubmit(formData) {
    try {
      const newPost = await createPost(formData);
      setMessage(`文章创建成功：${newPost.title}`);
      setError('');
    } catch (err) {
      setError(err.message);
      setMessage('');
    }
  }

  return (
    <div>
      <h1>创建文章</h1>
      {message && <div className="success">{message}</div>}
      {error && <div className="error">{error}</div>}
      <form action={handleSubmit}>
        <input type="text" name="title" placeholder="文章标题" required />
        <textarea name="content" placeholder="文章内容" required />
        <button type="submit">提交</button>
      </form>
    </div>
  );
}

三、两种方式怎么选？ #

• 做数据查询、需要跨组件复用的请求：选Route Handler，它是独立的API路由，支持缓存、多组件调用，逻辑更清晰。
• 做表单提交、单次数据修改操作：选Server Actions，无需额外创建路由，代码更简洁，直接和交互逻辑绑定。

四、能否直接在前端调用Laravel API？ #

可以，但不推荐。直接调用会暴露后端API地址，若涉及认证，敏感的token可能在前端泄露。通过Next.js的服务器层（Route Handler或Server Actions）转发请求，可将敏感配置（如API token）存在环境变量中，安全性更高。

内容的提问来源于stack exchange，提问作者Selçuk