错误 500 在请求 POST 时出现 – Next JS 13 应用程序目录

huangapple
go评论136阅读模式
英文:

Error 500 when request POST - Next JS 13 app directory

问题

我创建了一个简单的路由来创建用户。
当我发送请求时，我收到错误消息：500 Internal Server Error。

日志显示：

  1. 错误 TypeError：res.status 不是一个函数
  2.     在 POST (webpack-internal:///(rsc)/./app/api/register/route.ts:33:20)
  3.     在异步评估 (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:37)

我的路由位于 app/api/register/route.ts 中，
而我的组件在 app/components/Connextion.tsx 中调用了该路由。

以下是我的组件：

  1. function Connexion() {
  2.     const [hasAccount, setHasAccount] = useState<boolean>(true);
  3.     const [email, setEmail] = useState<string | null>(null);
  4.     const [password, setPassword] = useState<string | null>(null);
  5.     const [confirmPassword, setConfirmPassword] = useState<string | null>(null);
  7.     const register = useCallback(async () => {
  8.         try {
  9.             if (password !== confirmPassword) Notifier("密码不匹配", "error");
  11.             await axios.post("/api/register", {
  12.                 email,
  13.                 password,
  14.             });
  15.         } catch (error) {
  16.             console.error(error);
  17.         }
  18.     }, [email, password, confirmPassword]);
  20.     return (
  21. [...]

这是我的路由：

  1. import bcrypt from "bcrypt";
  2. import { NextApiRequest, NextApiResponse } from "next";
  3. import prismadb from "@/lib/prismadb";
  5. export async function POST(req: NextApiRequest, res: NextApiResponse) {
  6.     try {
  7.         if (req.method !== "POST") return res.status(405).end();
  8.         const { email, password } = req.body;
  10.         const existingUser = await prismadb.user.findUnique({
  11.             where: {
  12.                 email,
  13.             },
  14.         });
  16.         if (existingUser) return res.status(422).json({ error: "电子邮件已存在。请登录。" });
  18.         const hashedPassword = await bcrypt.hash(password, 12);
  20.         const user = await prismadb.user.create({
  21.             data: {
  22.                 email,
  23.                 hashedPassword,
  24.                 image: "",
  25.                 emailVerified: new Date(),
  26.             },
  27.         });
  29.         return res.status(200).json(user);
  30.     } catch (error) {
  31.         return res.status(400).json({ error: `出现错误：${error}` });
  32.     }
  33. };

在POSTMAN上发送的请求返回相同的错误。

我犯了什么错误？非常感谢！

英文:

I creating a simple route to create a user.
When I send the request I get error : 500 Internal Server Error.

The logs shows :

  1.  error TypeError: res.status is not a function
  2.     at POST (webpack-internal:///(rsc)/./app/api/register/route.ts:33:20)
  3.     at async eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:254:37)

I have my route in app/api/register/route.ts
And my component calling the route in app/components/Connextion.tsx

Here is my component :

  1. function Connexion() {
  2.     const [hasAccount, setHasAccount] = useState&lt;boolean&gt;(true);
  3.     const [email, setEmail] = useState&lt;string | null&gt;(null);
  4.     const [password, setPassword] = useState&lt;string | null&gt;(null);
  5.     const [confirmPassword, setConfirmPassword] = useState&lt;string | null&gt;(null);
  7.     const register = useCallback(async () =&gt; {
  8.         try {
  9.             if (password !== confirmPassword) Notifier(&quot;Passwords do not match&quot;, &quot;error&quot;);
  11.             await axios.post(&quot;/api/register&quot;, {
  12.                 email,
  13.                 password,
  14.             });
  15.         } catch (error) {
  16.             console.error(error);
  17.         }
  18.     }, [email, password, confirmPassword]);
  20.     return (
  21. [...]

And my route :

  1. import bcrypt from &quot;bcrypt&quot;;
  2. import { NextApiRequest, NextApiResponse } from &quot;next&quot;;
  3. import prismadb from &quot;@/lib/prismadb&quot;;
  5. export async function POST(req: NextApiRequest, res: NextApiResponse) {
  6.     try {
  7.         if (req.method !== &quot;POST&quot;) return res.status(405).end();
  8.         const { email, password } = req.body;
  10.         const existingUser = await prismadb.user.findUnique({
  11.             where: {
  12.                 email,
  13.             },
  14.         });
  16.         if (existingUser) return res.status(422).json({ error: &quot;E-mail already exists. Login instead.&quot; });
  18.         const hashedPassword = await bcrypt.hash(password, 12);
  20.         const user = await prismadb.user.create({
  21.             data: {
  22.                 email,
  23.                 hashedPassword,
  24.                 image: &quot;&quot;,
  25.                 emailVerified: new Date(),
  26.             },
  27.         });
  29.         return res.status(200).json(user);
  30.     } catch (error) {
  31.         return res.status(400).json({ error: `Something went wrong: ${error}` });
  32.     }
  33. };

The request on POSTMAN returns the same error.

Where is my mistake ? Thank you very much

答案1

得分: 1

在下面的13行代码中，你可以在路由处理程序中使用 NextResponse：

  1. import { NextResponse } from 'next/server'
  2.  
  3. export async function GET(req: NextApiRequest) {
  4.   // 这里是你的逻辑
  5.           const user = await prismadb.user.create({
  6.             data: {
  7.                 email,
  8.                 hashedPassword,
  9.                 image: "",
  10.                 emailVerified: new Date(),
  11.             },
  12.         });
  13.  
  14.   return NextResponse.json({ user }, {status: 200})
  15. }
英文:

In next 13 you can use NextResponse in route handlers:

  1. import { NextResponse } from &#39;next/server&#39;
  2.  
  3. export async function GET(req: NextApiRequest) {
  4.   // Here your logic
  5.           const user = await prismadb.user.create({
  6.             data: {
  7.                 email,
  8.                 hashedPassword,
  9.                 image: &quot;&quot;,
  10.                 emailVerified: new Date(),
  11.             },
  12.         });
  13.  
  14.   return NextResponse.json({ user }, {status: 200})
  15. }

huangapple
  • 本文由 发表于 2023年8月10日 21:40:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/76876288.html
  • next.js
  • reactjs
  • rest
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定