Next.js中实现按钮点击跳转至Cloudinary生成链接的方案问询

方案一：直接通过组件Props传递链接（最简单高效） #

你的上传逻辑已经在app/page.js中完成，且已拿到result.secure_url，不需要额外编写API路由，直接将链接作为props传给按钮组件即可：

1. 修改app/page.js，将链接传递给Cloudinary组件：

// app/page.js
import CloudinaryButton from './components/Cloudinary';

export default async function Home() {
  // 你的Cloudinary上传逻辑，已获取到上传结果
  const result = await cloudinary.uploader.upload('目标文件路径');
  const cloudinaryUrl = result.secure_url;

  return (
    <div>
      {/* 将生成的链接作为props传入按钮组件 */}
      <CloudinaryButton cloudinaryUrl={cloudinaryUrl} />
    </div>
  );
}

2. 修改app/components/Cloudinary.js，接收props并实现点击跳转：

// app/components/Cloudinary.js
export default function CloudinaryButton({ cloudinaryUrl }) {
  const handleClick = () => {
    // 方式1：在新标签页打开链接
    window.open(cloudinaryUrl, '_blank');
    // 方式2：在当前页面跳转
    // window.location.href = cloudinaryUrl;
  };

  return (
    <button onClick={handleClick}>
      查看Cloudinary资源
    </button>
  );
}

方案二：使用API路由获取链接（适用于需动态读取的场景） #

如果你的业务场景需要通过接口动态获取链接（比如上传后链接存储在数据库），可以按以下步骤实现：

1. 先确保上传完成后，将result.secure_url存储到数据库/缓存中（比如用Prisma操作MySQL、MongoDB等）。

2. 创建API路由文件app/api/cloudinary-url/route.js：

// app/api/cloudinary-url/route.js
import { NextResponse } from "next/server";
// 导入你的数据库操作工具，示例用Prisma
// import prisma from '@/lib/prisma';

export async function GET(request) {
  // 从请求参数中获取上传记录的标识（比如id）
  const { searchParams } = new URL(request.url);
  const uploadId = searchParams.get('id');

  // 从数据库查询对应的链接
  // const uploadRecord = await prisma.upload.findUnique({
  //   where: { id: uploadId },
  //   select: { secureUrl: true }
  // });

  // 以下为模拟数据，实际替换为数据库查询结果
  const secureUrl = "https://res.cloudinary.com/你的云名称/image/upload/资源路径";

  if (!secureUrl) {
    return NextResponse.json({ error: "资源链接不存在" }, { status: 404 });
  }

  return NextResponse.json({ url: secureUrl });
}

3. 修改app/components/Cloudinary.js，点击按钮时调用API并跳转：

// app/components/Cloudinary.js
export default function CloudinaryButton() {
  const handleClick = async () => {
    try {
      // 传入上传记录的id，需替换为实际业务中的标识
      const response = await fetch('/api/cloudinary-url?id=你的上传记录ID');
      const data = await response.json();
      
      if (data.url) {
        window.open(data.url, '_blank');
      }
    } catch (error) {
      console.error('获取链接失败:', error);
    }
  };

  return (
    <button onClick={handleClick}>
      查看Cloudinary资源
    </button>
  );
}

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