Next.js Discord

Discord Forum

What is the correct way to use databases for website

Unanswered
Richard Evanson posted this in #help-forum
Open in Discord
Avatar
Richard EvansonOP
I have website that will have to show and edit data from mysql database that will be filled from a game app. What is the proper way to approach it? Right now I have idea to just make different folder and make each command a js file like connect database, edit entry, search and all that. Is this the right approach?

38 Replies

Avatar
Dunker
if you are okay to remote db, use planetscale and integrate it into your app without writing anything redundant and complex
Avatar
Richard EvansonOP
what do you mean remote db
I am using mysql with phpadmin
Avatar
Dunker
so you have backend
Avatar
Richard EvansonOP
I thought next js website would be front end and back end just combined
are you saying I need somekind of another program just to connect database and manage it is date for next js website?
Avatar
Dunker
no as you said i have phpadmin, i thought you have backend
as normal, you can connect your DB in your backend, if you dont have backend next.js 's /api dir handles this backend . if you dont need a backend you can connect a DB to frontend directly via using remote DBs like planetscale
so i am assuming you have PHP backend and for this its better to handle that DB stuff in your backend via PHP functions
Avatar
Richard EvansonOP
but cant I just have everything in one next js app?
if I was gonna use php then I would have used php for backend and front end
I dont see any reason to split anything up
Avatar
Dunker
if you want to use next.js to make fullstack app, yes but your backend will be JS, not PHP
so you ll connect your DB via using JS
Avatar
Richard EvansonOP
yes
but I am confused about actual folder structure
I have seen few videos they have "pages" folder I dont even have that
I have src folder and inside that there is app and component folders
Avatar
Dunker
then you have app dir probably
actually whether you have app dir or pages, your backend will be in /api
Avatar
Richard EvansonOP
but this api folder do I just put it inside root near src folder or inside src folder or inside app folder
Avatar
Dunker
any folder in that dir, will be your route like /api/getThing
its there as default
just find it and put your backend in it
Avatar
Richard EvansonOP
maybe I have deleted it
Avatar
Dunker
then its in src/app/api
Avatar
Richard EvansonOP
what about database folder or that is not even needed
Avatar
Dunker
you dont need it
think your /api folder is a controller
https://nextjs.org/docs/app/building-your-application/routing/route-handlers
app/api/route.ts|js
Avatar
Richard EvansonOP
so I need another api folder inside app? I have one right now in src folder
Avatar
Dunker
no just move it into app/ like app/api
// app/products/api/route.ts
export async function GET(request: Request) {
  const { searchParams } = new URL(request.url)
  const id = searchParams.get('id')
  const res = await fetch(`https://data.mongodb-api.com/product/${id}`, {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
  })
  const product = await res.json()
 
  return Response.json({ product })
}
it requires some app dir specific next knowledge, if you dont know next much, i strongly recommend learning it with app dir first, no pages
if you know pages dir and getting well with it, then look at this docs to learn how
Avatar
Richard EvansonOP
I have already made all pages I want
Avatar
Dunker
then only you need define your routes and write related backend in it