Wowza! I should definitely do more. I’ve always used MySQL and can’t stand switching to MongoDB for no good reason at all. MySQL is hands down one of the best databases on the market
Didn't know MySQL DB connections with NextJS was possible, great to know so I can now really finally quit using handwritten PHP/ HTML and css and start fully developing my projects in NextJS with MySQL! Thanks for this clean tutorial man 🙏
Yes man!!! That’s exactly what happened to me. I wanted to transition to react and NextJS but I felt like I had to be stuck with MongoDB or NoSQL and learned it but I hated it. Then wait a second. React can connect to SQL databases too! It just seems most of the ecosystem isn’t talking about it much which was annoying
@@thedigitalceo I will be testing it out in the near future to see and checkout the speed of the MySQL db together with NextJS and typescript, wonder if it will affect the loading speeds much or not
You save me this is the most useful thing that I really want to know. I ask chatGPT. but it cant give the me the right answer. Thank you God bless you brother.
Simply the best everything I've ever seen, and without the complications that everyone seems to want to impose. Question: do you intend to make one for CRUD? For us, who are veterans, coming from coding completely different from the proposal lately, it would help a lot!
You got it! Me and you must be the only people who wanted to use MySql with React and NextJS! Haha. I’ve always loved MySQL since the php Wordpress days and wanted to keep in my workflow.
I have a question regarding the images part. I tried doing that with my own database, but it won't work though it's on my own local system. I have images not appearing. I have the pictures stored on my Desktop as well as the "public" directory on my coding. What do I do?
No HTTP methods exported in 'D:\digitalceo\src\app\api\getdata oute.js'. Export a named export for each HTTP method. i am facing while connecting to mysql database.
This was soo helpful, thank you. But I'm facing a problem. I'm using MariaDB and it seems that only the first row of the table is being fetched, that too without the array format. Any tips to solve this will be highly appreciated. 😭
Based on this tutorial, I was able to use Next.js with MySQL for a redesign of a site. I have a new concern. This site is well data-driven. I'm making a profile page that used at least 50 queries to the database. Cause of this, refreshing the page takes at least 20 seconds to load the data. It does show up correctly. For every query, I put each in a useState array. Will using server-side props be better to lower the time data to reach the page? Also, will Redux help with having so many useState statements? Appreciate the feedback as I have seen nobody show how to get data from MySQL using regular SQL queries. Only GraphQL and I'm not knocking it. I still like plain MySQL.
Yes definitely use getServerSideProps instead of useEffect. I have a tutorial on that on my channel here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-D-U0OkP5kwg.html I showed and do use useEffect but going forward getServerSideProps is the way to go in NextJS. With getServerSideProps you’ll get all the data before the page loads and you don’t need to rely on useEffect or useState with it. As for the time it should really depend on how long it’s taking to get all the data. Are you using the Api/ folder with node to pull the data. If so if you go directly to the Api url and see how long does it take to get all the data there? And compare with the front end page. 20 seconds doesn’t seem right but 50 queries also seems like a ton of requests unless this is a massive app. Also be sure to be combining tables in your SQL where you can to reduce the amount of requests.
@@thedigitalceo I am in the api folder. As far as the queries, this is only one part that deals with a lot of them (over 800 maybe). I wanted to get one part working, then go to town after that. I believe it's a big site. I'm combining tables in my queries as well. It's the exact queries I'm using on my live site now other than changing the names of the queries. From the [id].js page, fetching the data from the api took 23.5 secs. The data shows up and the page is working. However, calling from the api URL (getdata-lib-router) like you suggested, I'm getting an {error: "Bind parameters must not contain undefined. To pass SQL NULL specify JS null"}. Luckily I kept the file (getdata-lib) you did before adding in the router portion of the code, as able to get the one query in 1ms. On the getdata-lib-router api, I took all the other queries except the 1st one, same error. Used the updated api/lib-router code from your repo. Went line by line only changing to my query to still get the bind parameters error. So this binding parameters error could be the issue. Thanks for the suggestions and help.
another thing not mentioned here is- dont close mysql connection after every single query, Id put that anywhere else (even not into useEffect end when dismounting), if your app is using mysql everywhere- just dont disconnect from it
I'm trying to follow this using nextjs13, but stuck at the use router part where I want to show only 1 product on the single product pages with the [] brackets.Are you going to make a version in next 13?
Would this be susceptible to SQL injection attacks? That id variable looks juicy for SQL injection, but I'm not too familiar with this stack, so I wouldn't know. With the LAMP stack we have Prepared Statements, does this work in a similar way?
Got a question, basically I already have a database, where my site is hosted with real entries. Can I use that DataBase on localhost to work with real entries?
@@jonu96 i would make sure that the connection to your remote database actually works first. Try MySQL workbench and make sure you can simply connect to the database with the right credentials/settings. Once that gives you a successful connection use those settings in the project. I’ve had this issue before and realized my credentials and settings were not authenticating on the remote serve.
Ugh. I'm not an engineer or a full stack developer. I'm a 3d artist Three.js jockey with a basic bitch AAS in SE that needs to post interactive content and I cant afford the time to constantly learn new frameworks. I just want to arrange a basic stack to serve a modest scale of payload and clients. I'm trying to build communication toolsets for internal communication, client management and product approval for use by our sales and project managers.
Thanks for the tutorial. Add me to that list. I have been trying forever to covert a PHP/MySQL site using react (in this case NextJS) where I didn’t have to covert to mongo. My question, I followed this tutorial and the changes you made in your repo. It displays the data correctly from the DB to the browser. However, when running the server in the terminal, I received this as a message: API resolved without sending a response for /api/getdata-lib-router, this may result in stalled requests. Is that an error or shouldn’t be concerned about it? If so, how should I fix that? What I did differently from your tutorial is I’m connecting to a remote database online, not local. Also, I’m not using bluebird. Any help would be appreciated.
I've seen this. I updated the repo as well. 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; I noticed this error only happens with the router. Hope that helps! I'll also leave some notes in the description.
@@thedigitalceo That did it. I remember seeing that line before in some other videos but couldn't remember when to use it. That being said, YOU DON'T UNDERSTAND HOW MANY YEARS I HAVE BEEN WAITING FOR A SOLUTION LIKE THIS. I've trying to move a site from PHP to one on these Jamstack. I have a database with over 15 years of info. When I don't get all of it, I understood most of what you were saying to get the info to get a little data showing. Now, I spend on doing some of the more complex SQL queries I have. Another question for you. What are your recommendations for any books, videos, or resources about better learning React and Next.js? This is the Jamstack & front-end framework I want to get better at. Again, I can't express how happy your tutorial made me. You have a new subscriber.
I'm glad it helped. I also come from the history of Wordpress, PHP, jQuery, and I feel your sentiments. React and the jamstack can really be a whole new way to engineer sites and most RU-vid tutorials are people who came right into the jamstack as their first mode of study and don't connect the dots for people who were building with the older frameworks. Ironically, with new frameworks like NextJS the jamstack is making a full circle and we're going back to server side rendering like PHP again using Node js! Which is what got me excited to really get into React. I hope in the future, if I have the time, I can teach a course myself on React and NextJs and teach it more for people coming from the vanilla side of building websites. Thank you for taking the time to drop a comment. It's appreciated.
@@thedigitalceo Not connecting the dots has been what bothering the most with most of the videos that I have seen. Never saw it that way with the rendering. Keep up the good work.
I’m honestly more of a vanilla NextJS guy. I make my own Api using the Api routes and connect right to MySQL database. I hardly find any reason to complicate it further. ☺️
Loved the video, but you should really consider not trying so hard to emphasize the "this is not hard even though people think it is", i couldn't even count the times I heard that phrase, it was getting annoying
This is a great tutorial, I am fairly new to NextJS and really learned a lot. However I got one error after following your instructions almost to the point (I used an existing database with members instead of products): When rendering my page I get the error "TypeError: Cannot read properties of undefined (reading 'map')" and in my console I noticed "API resolved without sending a response for /api/getdata-lib, this may result in stalled requests." I found out that it has something to do with the code in getdata-lib.js running twice and the first time there is no "id" parameter passed to the function. I can add a null check for "id" but I would like to understand why this happens. Any idea what could be the issue here?
Yes I've seen this. 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; I noticed this error only happens with the router. Hope that helps! I left the notes in the description. It’s because the fetch is happening before the route id has started so you have to add a condition to make sure the fetch starts only after the router id is returned
Can you please create tutorial of how to clone and deploy Token Airdrop dApp , this is the project GitHub link: github.com/SniperProject/Token-Airdrop-dApp Thanks for your effort
