Learn CRUD with React/Next.JS and MySQL (Complete tutorial)

In this video you'll learn how to do all CRUD operations with Next.JS api and MySQL database, or any database you choose to use. We'll create an API in Next.JS and then learn how to read, create, update and delete data through that API. The concept generally works with any database but in this demo you'll use a MySQL database.

CONNECT ON MY DISCORD COMMUNITY:

0:00 intro
1:50 Crud Demo
4:00 Boiler Plate Setup
4:55 MySQL database setup
8:46 MYSQL user setup
11:20 MySQL DB connection
12:00 Create Next.JS API Endpoint
18:00 Default state/input forms from our app
20:53 Read Data API (GET)
25:00 Display data in our app
28:00 Create Data API (POST)
33:00 Post Data from the app
38:00 Change state with created data
40:00 Update Data API (PUT)
44:00 Update data from the app
47:00 Change state with updated data
50:19 Delete Data API (DELETE)
52:43 Delete Data from the app
55:00 Change state with deleted data
56:00 Bonus: delete data with react icons
58:40 Conclusion

SOCIALS:

Repo:

Gist: Create MYSQL user to make database accessible

Gist: Updating objects in React State

[makeinpro]

tutorial with the easiest approach to understand compared to other videos on youtube, keep it up bro, i don't know why others are so complex to explain crud like this, everything is still default in your video, that's cool

[emveeoh]

Such precision and clarity in your presentation. I consider you one of the best teachers on YouTube right now. Thank you for sharing your wisdom with us! 🤓

[goitomabebe]

This is the best video on CRUD operations with Next.js and MySQL. Thanks man, it helped me a lot with my project.

[alikurniawan]

Super Clear, Simple and shoot to the point,
you have made me understand as before I was confused, like is that need more express js in API in next js, and the code would be the same or not and bla bla bla, thanks a lot bro...

[goldenknowledge]

Omar. I really like your style of teaching. keep up the good job. subbed.

[androidbox]

Well-prepared content and video with outstanding teacher 🤓

[arkadiuszmatlak]

I'm stuck at the beginning, because I can't use "await connection.execute". I have a message "Unsolved function or method execute()". What number of library do You use? I've tried the latest 3.4.3, and one before, unfortunately with the same result. Do You have any suggestions?

[thequang]

I suppose we can still connect to MySQL without the need of using DigitalOcean right, by specifying the 'socketPath: path/mysql.lock', as mentioned in your other video

[ARoss]

Really good tutorial, could you make a video showing us how to add authentication to the pages & nextJS endpoints on our site.

[surdmlb]

very nice bro thanks for the content, let me ask what microphone model do you have? your audio is very clear and good

[excalibur]

Another awesome and useful video. Would be nice if you could make a video on how to easily and properly authenticate your users using mysql and nextjs, maybe in form of a login with protected route and using a json web token.

[beticohernandez]

interesante.
Un carrito de compra seria interesante tambien.

[wakka]

i cannot find the js file on app/api/hello, i also dont use resource. also whatever i do its always 404

[ferlynrulete]

Next Js deploy to vercel but how about mysql2, how to deploy?

[dieterascheberg]

Hi, can anybody help me? I get an error by the step to get the first connection to the database, mean the db.js and the api/products.js file are ready, but the browser shows an error "query is not a function". I tried to change the query function in the db.js file to dbquery (and also in the products.js) but it shows the error again.

[ianlot]

you can enable show full URL in safari settings

[maqsoodjatoi]

Love it bro can you please tell how we can upload an image in database and show it.? Not image url but image please

[mr.artist]

This is one of the best tutorial on this topic....Thanks a lot! By the way, can you please suggest me where to deploy this application and how to deploy (along with the database) ?

[mitchy]

@ 15:19 when I refresh, I get a 405 error. I followed this really closely too. Even though my new Next.JS project was a bit different. Anyone know what might be going on? Tested it in PostMan and still the same thing.

[Shuvooa]

Please make a complete project on Nextjs and Sequalizejs.