CREATETABLEBooks(titleVARCHAR(100)primarykey,authorVARCHAR(20),publisherVARCHAR(20),finished__atDATEDEFAULTCURDATE())

INSERTINTOBooksVALUES('Python Django超入門','掌田津耶乃','秀和システム','2019/08/31'),('React.js&Next.js超入門','掌田津耶乃','秀和システム',NULL),('PostgreSQL徹底入門 第４版','近藤雄太 他','翔泳社',NULL),('PHPフレームワークLaravel入門 第２版','掌田津耶乃','秀和システム','2019/10/31'),('PostgreSQLから始めるデータベース生活','まぐろ','まぐろのみぞおち','2019/11/03')

importReactfrom'react';import{Container,Row,Col,Table}from'react-bootstrap';exportdefaultclassSearchResultextendsReact.Component{render(){return(<Container><Row><Tablestripedborderedsize="sm"><thead><tr><th>タイトル</th><th>著者名</th><th>出版社</th><th>読了日</th></tr></thead><tbody>{/* 削除
              <tr>
                <td>Python Django超入門</td>
                <td>掌田津耶乃</td>
                <td>秀和システム</td>
                <td>2019/08/31</td>
              </tr>
             ...
              <tr>
                <td>PostgreSQLから始めるデータベース生活</td>
                <td>まぐろ</td>
                <td>まぐろのみぞおち</td>
                <td>2019/11/03</td>
              </tr>
*/}</tbody></Table></Row></Container>);}}

npm install express

constexpress=require('express')constnext=require('next')constdev=process.env.NODE_ENV!=='production'constapp=next({dev})consthandle=app.getRequestHandler()app.prepare().then(()=>{constserver=express();server.get('*',(req,res)=>{returnhandle(req,res);})server.listen(3000,(err)=>{if(err){throwerr}console.log('> Ready on http://localhost:3000')})}).catch((ex)=>{console.error(ex.stack)process.exit(1)})

"scripts":{"dev":"node server.js","build":"next build","start":"NODE_ENV=production node server.js"}

// (略)app.prepare().then(()=>{constserver=express();// 追記ここからserver.get('/bookmanager',(req,res)=>{returnapp.render(req,res,'/bookmanager',req.query);});// 追記ここまでserver.get('*',(req,res)=>{returnhandle(req,res);})server.listen(3000,(err)=>{if(err){throwerr}console.log('> Ready on http://localhost:3000')})}).catch((ex)=>{console.error(ex.stack)process.exit(1)})

npm install mariadb

constmariadb=require('mariadb/callback');constdbConfig={host:'192.168.xxx.xxx',user:'username',password:'yourpassword',database:'database-name'};constconnection=mariadb.createConnection(dbConfig);module.exports=connection;

// (略)app.prepare().then(()=>{constserver=express();// 変更ここからconstconnection=require('./mariadbConnection');server.get('/bookmanager',(req,res)=>{letquery="SELECT title, author, publisher, DATE_FORMAT(finished_at, '%Y/%m/%d') AS finished_at FROM Books ORDER BY title";connection.query(query,(err,rows)=>{if(err)throwerr;console.log(rows);});returnapp.render(req,res,'/bookmanager',req.query);});// 変更ここまでserver.get('*',(req,res)=>{returnhandle(req,res);})server.listen(3000,(err)=>{if(err){throwerr}console.log('> Ready on http://localhost:3000')})}).catch((ex)=>{console.error(ex.stack)process.exit(1)})

importLayoutfrom'../../components/layout';importReactfrom'react';import{Container,Row,Col,Table,Form}from'react-bootstrap';exportdefaultclassIndexextendsReact.Component{// 追記ここからstaticasyncgetInitialProps(){constres=awaitfetch('http://192.168.130.69:3000/bookmanager/get');constallBooks=awaitres.json();return{allBooks};}// 追記ここまでrender(){{/* 略 */}}

app.prepare().then(()=>{constconnection=require('./mariadbConnection');// データベース呼び出し処理は削除してください。server.get('/bookmanager',(req,res)=>{/*
    let query = "SELECT title, author, publisher, DATE_FORMAT(finished_at, '%Y/%m/%d') AS finished_at FROM Books ORDER BY title";
    connection.query(query, (err, rows) => {
      if(err) throw err;
      console.log(rows);
    });
    */returnapp.render(req,res,'/bookmanager',req.query);});// 追記ここからserver.get('/bookmanager/get',async(req,res)=>{letquery="SELECT title, author, publisher, DATE_FORMAT(finished_at, '%Y/%m/%d') AS finished_at FROM Books ORDER BY title";connection.query(query,(err,rows)=>{if(err)throwerr;res.json(rows);// レスポンスに取得データを持たせる});});// 追記ここまでserver.get('*',(req,res)=>{returnhandle(req,res);});server.listen(3000,(err)=>{if(err){throwerr;}console.log('> Ready on http://localhost:3000');});}).catch((ex)=>{console.error(ex.stack);process.exit(1);});