NextJS MySQL example. Get MySQL data into a react app using Node JS

Even with new and exciting front end technologies like react/nextjs you can definitely use SQL databases like MySQL even though some developers assume that react uses no-SQL databases. You can use databases like MySQL to bring in data into your react applications. In this tutorial you will learn how to connect to a MySQL database in react /NextJS and display the data on a react page. You will connect to a MySQL database, write a few lines of SQL and convert the data to JSON to display on your page. You’ll also learn how to filter the SQL results based on a dynamic URL route. MySQL databases are free and open source. You can also easily and affordably deploy a MySql database in production using services like Digital Ocean with ease. You do not need to rely only on MongoDB as a database for your react/nextjs applications. Enjoy! Drop a comment.

CONNECT ON MY DISCORD:
https://discord.gg/5zsdrxH8m8

Twitter:https://twitter.com/omarel
GitHub: https://github.com/oelbaga

0:00 Intro
1:45 MySql Database
2:00 npm MySql2 Package
3:30 Database Connection (Nodejs)
5:20 Query the Database (Nodejs)
8:00 Convert Query to JSON
9:40 Display MySql data on react page
15:30 Create MySql Database Wrapper for re-using
21:00 Querying database from a dynamic URL route

#mysql #react #nextjs #nodejs

Get early access to my project/
A library of pre-built user interface layouts and components you can place on any react site: https://uiworkspace.com

Git Repo: https://github.com/oelbaga/nextjs-mysql-tutorial

Notes: Some have reported an error in the console logging: “API Request stalled … ” even though everything is successful on the product page. I noticed this log only happens with the router. Assuming everything else is ok that error may come from a stalled connection back to the API prior to the router. If you add this as the first line in the useEffect for the product/[id] page it should stop the stalled request: if (!router.isReady) return; https://github.com/oelbaga/nextjs-mysql-tutorial/blob/04b6faf5e370bbedf051783f7feedc5b5b0a1339/pages/products/%5Bid%5D.js#L11