Trying to route to /api/register using axios but getting 404 error cannot find

Question

I have tried manually routing myself to /api/route (through localhost:3000) and it also gives me the 404 error page not found. I do think this is an error with routing as everything else looks good to me, and I do not think it is an error with my file setup.

RegisterModal.tsx (relevant info)

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 (all)

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

current.ts (all)

import {NextApiRequest, NextApiResponse} from "next";
import serverAuth from "../../../libs/serverAuth";

export default async function handler(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

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 console error

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

file organization

Answer 1

I fixed it! The change is VERY subtle, but in await axios.post('/api/register/route/', ..., get rid of "route" because the next routing only points to the name of the DIRECTORY and not the filename. In my case, the filename is route and the directory name is register, so point to REGISTER for this to work:

const onSubmit = useCallback(async() => {
    try {
        setIsLoading(true);
        // await axios.post('/api/register/route', { // <-- WRONG
        await axios.post('/api/register/', { // <-- FIXED
            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]);