NextJs data fetching tutorial #part2 using getStaticProps and MYSQL



NextJs data fetching tutorial #part2 using getStaticProps and MYSQL

NextJs data fetching tutorial #part2 using  getStaticProps and MYSQL

This is a next.js tutorial on how to fetch data data for a statically generated page using data fetched from a MYSQL data base. The video goes through the steps to setup and fetch data from MYSQL database using queries.

Code on github: https://github.com/ui-code-tv/demo-blog-nextjs-mysql

Prerequisite is that you have a MYSQL database called blog setup already. You can import dummy data using following sql code :

Intro : (00:0:00)
Import dummy data into MYSQL: (00:03:52)
Setup .env.local file for db connection: (00:5:06)
Install serverless-mysql: (00:06:36)
Setup MYSQL helper functions: (00:09:07)
Create end point to fetch data: (00:11:50)
Create a static blog page that fetches data using endpoint: (00:14:24)
How write MYSQL data fecting code directly on the blog page: (00:18:14)

DROP TABLE IF EXISTS `posts`;
CREATE TABLE posts(
title VARCHAR(44) NOT NULL PRIMARY KEY
,content VARCHAR(49) NOT NULL
);
INSERT INTO posts(title,content) VALUES (‘This is all about end points’,’This is all about api end points111′);
INSERT INTO posts(title,content) VALUES (‘How to guide on SSR’,’This is all about server side rendering’);
INSERT INTO posts(title,content) VALUES (‘My first post’,’This is my first post..I have nothing much to say’);
INSERT INTO posts(title,content) VALUES (‘A post’,’Yet another post’);
INSERT INTO posts(title,content) VALUES (‘Last years post’,’This post is from last year’);

Comments are closed.