尝试使用 axios 路由到 /api/register 但出现 404 错误找不到

Question

我尝试手动将自己路由到 /api/route （通过 localhost:3000），它也给了我 404 错误页面未找到。我确实认为这是路由错误，因为其他一切对我来说看起来都很好，而且我不认为这是我的文件设置错误。

RegisterModal.tsx（相关信息）

const onSubmit = useCallback(async() => {
        try {
            setIsLoading(true);
            await axios.post('/api/register', {
                email, password, username, name
            });

            toast.success('Account created.');

            signIn('credentials', {
                email,
                password
            });

            registerModal.onClose();
        } catch (error) {
            console.log(error);
            toast.error('Something went wrong.');
        } finally {
            setIsLoading(false);
        }
    }, [registerModal, email, password, username, name]);

register.ts（全部）

import {NextApiRequest, NextApiResponse} from "next";
import bcrypt from "bcrypt";
import prisma from "../../../libs/prismadb";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    if (req.method != 'POST') return res.status(405).end();

    try {
        const {email, username, name, password} = req.body;
        const hashedPassword = await bcrypt.hash(password, 12);
        const user = await prisma.user.create({
            data: {
                email,
                username,
                name,
                hashedPassword
            }
        });

        return res.status(200).json(user);
    } catch (error) {
        console.log(error);
        return res.status(400).end();
    }
}
```[enter image description here](https://i.stack.imgur.com/NqSR4.png)

current.ts (all)

从“next”导入{NextApiRequest，NextApiResponse}； 从“../../../libs/serverAuth”导入 serverAuth；

导出默认异步函数处理程序(req: NextApiRequest, res: NextApiResponse) { if (req.method != 'GET') return res.status(405).end();

try {
    const {currentUser} = await serverAuth(req);
    return res.status(200).json(currentUser);
} catch (error) {
    console.log(error);
    return res.status(400).end();
}

}

Not sure why the routing to api/register.ts is not working. Tried changing it to route.ts but that did not fix anything. Here's a look at my directory setup.

```[screenshot of directory layout](https://i.stack.imgur.com/NqSR4.png)

If any of my langauge is unclear I apologize, I am a Computer Science student and I am still learning. This is for my Sophomore Project where I chose to make a clone of a social media site and change it to look uniqe on its own. Having an issue with axios. Thank you for the help!


[photo of error](https://i.stack.imgur.com/x2JFa.png)
[console error](https://i.stack.imgur.com/Pz94E.png)

Tried changing it from register.ts to route.ts, did not work. Unsure of what to do next.

Answer 1

因为您使用的是应用程序目录，所以 API 处理程序与页面路由器略有不同（这就是

register.ts

的格式）。

简而言之，对于每个 HTTP 方法（GET、POST 等），处理程序函数已被多个不同的函数替换。有关更多信息，请查看路由处理程序的Next.JS 文档页面。

类似于下面的功能可能可以解决您遇到的问题。确保将该函数放入以您要使用的路由命名的目录中，因为这也是页面路由器中已更改的内容。查看有关定义路由的Next.JS 文档页面以获取更多信息。

// /api/register/route.ts

export async function POST(req: NextRequest) {
    try {
        const { email, username, name, password } = await req.json();
        const hashedPassword = await bcrypt.hash(password, 12);
        const user = await prisma.user.create({
            data: {
                email,
                username,
                name,
                hashedPassword
            }
        });

        return NextResponse.json(user);
    } catch (error) {
        console.log(error);
        return NextResponse.json({
            error: "There was an error creating the user."
        }, {
            status: 400,
        });
    }
}