Next.js Tutorial - Part 5 - Material-ui Integration + _app and _document 1

https://github.com/mui-org/material-ui/tree/master/examples/nextjs/pages

C:\Users\Administrator\Desktop\nextjs\pages\api\vehicles.ts

import { NextApiRequest, NextApiResponse } from 'next';
import sqlite from 'sqlite';
export default async function getAllVehiclesByPersonId(req: NextApiRequest, res: NextApiResponse) {
  const db = await sqlite.open('./mydb.sqlite');
  const allVehicles = await db.all('select * from vehicle');
  res.json(allVehicles);
} 

C:\Users\Administrator\Desktop\nextjs\pages\vehicles.js

import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import fetch from 'isomorphic-unfetch';

export default function Vehicles({ list }) {
  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Id</TableCell>
            <TableCell align="right">Brand</TableCell>
            <TableCell align="right">Model</TableCell>
            <TableCell align="right">OwnerId</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {list.map(row => (
            <TableRow key={row.id}>
              <TableCell component="th" scope="row">
                {row.id}
              </TableCell>
              <TableCell align="right">{row.brand}</TableCell>
              <TableCell align="right">{row.model}</TableCell>
              <TableCell align="right">{row.ownerId}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Vehicles.getInitialProps = async () => {
  const response = await fetch('http://localhost:5000/api/vehicles');
  const json = await response.json();
  return { list: json };
};