Next.js Discord

Discord Forum

form example

Unanswered
American Chinchilla posted this in #help-forum
Open in Discord
American ChinchillaOP
does anyone have an example of a form that stores data in a database so i can see how i am supposed to retrieve data from database in client component since forms have to be client side cause they interact with user

9 Replies

@American Chinchilla does anyone have an example of a form that stores data in a database so i can see how i am supposed to retrieve data from database in client component since forms have to be client side cause they interact with user
Northeast Congo Lion
1) use react-hook-forms on frontend

2) create api route to handle form submission and data entry

3) create api route to handle reading from database and serve as JSON

4) call api route from client side for data fetch
@Northeast Congo Lion 1) use react-hook-forms on frontend 2) create api route to handle form submission and data entry 3) create api route to handle reading from database and serve as JSON 4) call api route from client side for data fetch
American ChinchillaOP
is there a way to limit routes to only be called by my application? cause if the route is adding to database i doubt i want someone to spam my api route to add random shit to db
Northeast Congo Lion
Maybe use middleware with CORS for api routes
American ChinchillaOP
how would i go about doing that
import { NextResponse, type NextRequest } from "next/server"
import prisma from "@/lib/db"

export async function GET(
  request: NextRequest,
  { params }: { params: { guildId: string } }
) {
  const guild =
    (await prisma.guild.findUnique({
      where: { id: params.guildId },
    })) ||
    (await prisma.guild.create({
      data: {
        id: params.guildId,
      },
    }))
  return NextResponse.json(guild)
}
currently have this
at app/api/forms/welcome/[guildId]/route.ts
@American Chinchilla how would i go about doing that
American ChinchillaOP
@Northeast Congo Lion ?