在 Next.js 中添加推荐

推荐是电商、新闻等网站常用的功能，可为用户提供更多的相关内容或产品，提升用户体验和转化率。在 Next.js 中实现推荐，我们可以采用以下两种方式。

方式一：传统的后端渲染

第一种方式是采用传统的后端渲染方法，通过服务端获取数据并渲染到页面中。具体实现方法如下：

1. 在服务器端，我们可以通过查询数据库或调用 API 获取当前产品或文章的相关内容，保存到变量中。
2. 在页面中，我们通过传递关键词或 ID 参数来获取推荐内容，并在服务器端渲染到页面中。

示例代码：

// /pages/detail/[id].jsx
import { useRouter } from 'next/router';
import getRecommendations from '../../lib/getRecommendations';

function Detail({ data, recommendations }) {
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
      <h2>推荐</h2>
      <ul>
        {recommendations.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const { id } = params;
  const data = await getDataFromDB(id);
  const recommendations = await getRecommendations(data.keywords);
  return {
    props: {
      data,
      recommendations,
    },
  };
}

方式二：客户端渲染 + API

第二种方式是采用客户端渲染，通过 API 获取数据并在页面中呈现。具体实现方法如下：

1. 在页面中，我们通过页面路由参数或组件状态获取当前产品或文章的关键词或 ID。
2. 在客户端，我们通过调用 API 获取推荐列表，并在页面中呈现。

示例代码：

// /pages/detail/[id].jsx
import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import getRecommendations from '../../lib/getRecommendations';

function Detail({ data }) {
  const router = useRouter();
  const [recommendations, setRecommendations] = useState([]);

  useEffect(() => {
    async function fetchRecommendations() {
      const { keywords } = data;
      const res = await fetch(`/api/recommendations?keywords=${keywords}`);
      const data = await res.json();
      setRecommendations(data);
    }
    fetchRecommendations();
  }, [data]);

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
      <h2>推荐</h2>
      <ul>
        {recommendations.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export async function getServerSideProps({ params }) {
  const { id } = params;
  const data = await getDataFromDB(id);
  return {
    props: { data },
  };
}

// /pages/api/recommendations.js
export default async function handler(req, res) {
  const { keywords } = req.query;
  const recommendations = await getRecommendations(keywords);
  res.json(recommendations);
}

这里我们使用了 Next.js 提供的 getServerSideProps 方法和 API 路由来实现客户端渲染。在页面服务端渲染时，我们通过 getServerSideProps 方法获取数据并传递到页面当中。在客户端渲染时，我们通过 API 路由来获取推荐内容。

以上就是在 Next.js 中添加推荐的实现方式。在实际应用中，我们还需要根据业务需求和数据特点进行优化和改进。