infodp / next13_fullstack

Next Js 13 - FullStack - Back y Frontend- MongoDB Atlas. Más info en: https://youtu.be/O2R047kxMKE

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: d(...).json is not a function

busysignalco opened this issue · comments

Hola!, Muchas gracias por los tutoriales y codigos de Nextjs. He intentado realizar el mismo proceso pero con una app diferente y me he topado con este error:

TypeError: d(...).json is not a function
at l (/var/task/.next/server/app/api/order/route.js:1:838)

Codigo:

/api/order/route.js

import connectDB from "@/lib/dbConnect";
import NextResponse from "next/server";
import Order from "@/models/Order";

export const POST = async (req, res) => {
  await connectDB();
  try {
    const body = await req.json();
    const newOrder = await Order.create(body);
    return NextResponse.json({ data: newOrder }, { status: 201 });
  } catch (error) {
    return NextResponse.json({ data: null }, { status: 500 });
  }
};

export const GET = async () => {
  await connectDB();
  try {
    const result = await Order.find({});
    return NextResponse.json({ data: result }, { status: 200 });
  } catch (error) {
    console.log(error);
    return NextResponse.json({ data: null }, { status: 500 });
  }
};

(components)/Pedidos.js

import Link from "next/link";

const getData = async () => {
  try {
    const response = await fetch("/api/order", {
      cache: "no-store",
    });
    return response.json();
  } catch (error) {
    console.log("Error : ", error);
  }
};

//Para ver todos los documentos que estan en ATLAS en la consola de VSC
//const {data} = await getData()
//console.log(data);

const Pedidos = async () => {
  const { data } = await getData();

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      {data.map((element) => (
        <div
          key={element._id}
          className="p-3 shadow-lg shadow-indigo-500/50 my-4 flex justify-between gap-4 items-start"
        >
          <div>
            {/* <p>{element._id}</p>   */}
            <h2 className="font-bold text-2xl text-slate-700"></h2>
            <p>{element.name}</p>
          </div>

          {/* Botones de acciones */}
          <div className="flex mt-4 space-x-3 md:mt-6">
            <Link
              href={`/edit/${element._id}`}
              className="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-violet-400 rounded-lg hover:bg-violet-600 focus:ring-4 focus:outline-none"
            >
              Ver
            </Link>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Pedidos;

POST me funciona aunque tuve que sacarle el if porque me salia un error.

"dependencies": {
"mongodb": "^6.3.0",
"mongoose": "^8.1.0",
"next": "14.1.0",
"next-auth": "^4.24.5",
"react": "^18",
"react-dom": "^18",
}

Ojala me puedas ayudar, de igual forma si no se puede muchas gracias.

Un detalle, lo he subido a vercel. No lo tengo en localhost.

Este era el problema

import NextResponse from "next/server";

y debia ser:

import { NextResponse } from "next/server";

pense que pretier habia sido. Pero no.