错误：意外的令牌'<', "<!DOCTYPE "... is not valid JSON in next js

Question

应用程序/服务/page.tsx

import ServiceCard from "@/components/ui/ServiceCard";
import { serviceType } from "@/models/serviceModel";

const getServices = async () => {
  const res = await fetch(`http://localhost:3000/api/services`);
  return res.json();
};
const ServicePage = async () => {
  const d: serviceType[] = await getServices();
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 mx-4 my-2">
      {d.map((service) => (
        <ServiceCard service={service} key={service._id?.toString()} />
      ))}
    </div>
  );
};

export default ServicePage;

应用程序/api/services/route.ts

import { connectDatabase } from "@/actions/connectDatabase";
import { ServiceModel } from "@/models/serviceModel";
import { NextResponse } from "next/server";

export const GET = async (request: Request) => {
  try {
    connectDatabase();
    const services = await ServiceModel.find();
    console.log(services);
    return NextResponse.json(services);
  } catch (error) {
    console.log(error + "error api service");
  }
};

我无法发现错误，请看一下。而且邮递员也无法工作。

我无法使用 next js api 路由获取数据。但我可以使用服务器操作获取数据。

Answer 1

问题解决了。我忘记在此处的应用程序/服务/页面上添加“使用服务器”。 只需在 getServices() 函数中添加一行即可。下面是答案。

const getServices = async () => { “使用服务器”； const res = 等待 fetch(

http://localhost:3000/api/services

); 返回 res.json(); };

休息一切都好。