Next.js Discord

Discord Forum

Next.js, Prisma DB, Axios API 404 Error :(

Answered
Californian posted this in #help-forum
Open in Discord
Avatar
CalifornianOP
Hello,

I am working on an e-commerce project using Next.js and Prisma DB. I have implemented the functionality to create a store. I have successfully connected Prisma DB, and the code seems to be correct. However, when I tried to create a store using the Axios API, it resulted in a 404 Error. Please take a look at the screenshot. I need some assistance with this.

Kind regards,
Answered by idan
maybe remove the '
View full answer

66 Replies

Avatar
CalifornianOP
Image
Avatar
This is because /app/api/stores doesn’t exist
Likely you meant /api/store instead
But you are fetching /app/api/store
Avatar
Southern rough shrimp
Fetch(“/api/stores”)
Avatar
CalifornianOP
i did it
and my file name is was wrong
i changed it store-mdoal.tsx to store-modal.tsx
and new error 🙂
Image
routes.tsx
import { NextResponse } from "next/server";
import { auth } from "@clerk/nextjs";
import prismadb from "@/lib/prismadb";
export async function POST(
    req: Request,
    ) {
        try {
            const { userId } = auth();
            const body = await req.json();

            const { name } = body;


            if (!userId) {
                return new NextResponse("Unauthorized", { status: 401 });
            }

            if (!name) {
                return new NextResponse("Name is required", { status: 400 });
            }

            const store = await prismadb.store.create({
                data: {
                    name,
                    userId
                }
            });

            return NextResponse.json(store);

        }
        catch(error) {
            console.log('[STORES_POST', error);
            return new NextResponse("Internal error", { status: 500 });
        }
    };
store-modal.tsx
const onSubmit = async (values: z.infer<typeof formSchema>) => {
        try {
            setLoading(true);

            const response = await axios.post('/api/stores/', values);
            console.log(values);

            console.log(response.data);
        } catch (error) {
            console.log(error);
        } finally {
            setLoading(false);
        }
    }
Image
Avatar
There, that is your error, now fix it
You didn’t set up the db connection correctly
Avatar
Southern rough shrimp
Answer is inside error
Avatar
CalifornianOP
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  relationMode = "prisma"
}

model Store {
id        String    @id @default(uuid())
name      String
userId    String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
i think my DATABASE_URL is true
Image
Avatar
console.log(process.env.DATABASE_URL) from an api route, what do you get?
Avatar
CalifornianOP
let me try
undefined
Avatar
There, so database url is not set correctly
File name and file location?
Avatar
CalifornianOP
Image
Image
console.log(process.env.DATABASE_URL)
i run this command on app/api/stores/test.ts
Avatar
So this is inside the .env file?
Weird…
Avatar
CalifornianOP
hmm
Avatar
Not sure what’s wrong with it - the issue is as you see, DATABASE_URL is undefined, but I don’t know why
If it’s declared in .env it should work
Sorry can’t help
Avatar
You can simply use the connection string directly in the schema instead of relying on the environment variable. It's not a long-term solution, but it will work for now.
Avatar
And with that, exposing the secret string to anyone having access to the git repository
No I wouldn’t do that
Avatar
CalifornianOP
.env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=x
CLERK_SECRET_KEY=x
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# This was inserted by `prisma init`:
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL='mysql://x:x@aws.connect.psdb.cloud/ecommerce-admin?sslaccept=strict'
Avatar
the other env variables work when you console log them?
Avatar
CalifornianOP
yes working
im using clerk app for auth
and clerk is working
Avatar
is the CLERK_SECRET_KEY works too?
Avatar
CalifornianOP
yes it works
Avatar
very weird
Avatar
maybe remove the '
Answer
Avatar
Try removing the ' in the db url
Yes this
If it doesn’t work I’m out of ideas
Avatar
i think it should work now
Avatar
CalifornianOP
im trying
finally its worked
thanks guys
Avatar
i'm glad
sure
Avatar
CalifornianOP
Image
🙂
Avatar
CalifornianOP
@joulev hi im back
it was worked but
now not working
again error code 500
Image
Image
I didn't make any changes to the code. I just closed the project and reopened the project after eating. It was working before closing the project but now it's getting Error 500
Avatar
CalifornianOP
:all_the_things:
Avatar
Well it cannot reach the database, try a different network
Avatar
CalifornianOP
okay