2.2 Next.js Building a Car Trader App #2: Car Details Page using getServerSideProps

Xây dựng GetServerSideProps cho car :)))

Xây dựng

C:\Users\Administrator\Desktop\pro\pages\car\[make]\[brand]\[id].tsx

import { Paper, Grid, Typography } from '@material-ui/core';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import { GetServerSideProps } from 'next';
import React from 'react';
import {CarModel} from '../../../../interface/Car';
const useStyles = makeStyles((theme) => createStyles({
  paper: {
    padding: theme.spacing(2),
    margin: 'auto',
    maxWidth: 888,
  },
  img: {
    width: '100%',
  },
}));
interface CarDetailsProps {
  car: CarModel | null | undefined;
}
export default function CarDetails({ car }: CarDetailsProps) {
  const classes = useStyles();
  if (!car) {
    return <h1>Sorry, car not found!</h1>;
  }
  return (
    <div>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6} md={5}>
            <img className={classes.img}  src={car.photoUrl} />
          </Grid>
          <Grid item xs={12} sm={6} md={7} container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
                <Typography variant="h5">
                  {car.make + ' ' + car.model}
                </Typography>
                <Typography gutterBottom variant="h4">
                  £{car.price}
                </Typography>
                <Typography gutterBottom variant="body2" color="textSecondary">
                  Year: {car.year}
                </Typography>
                <Typography gutterBottom variant="body2" color="textSecondary">
                  KMs: {car.kilometers}
                </Typography>
                <Typography gutterBottom variant="body2" color="textSecondary">
                  Fuel Type: {car.fuelType}
                </Typography>
                <Typography gutterBottom variant="body1" color="textSecondary">
                  Details: {car.details}
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  )
}
export const getServerSideProps: GetServerSideProps < CarDetailsProps > = async () => {
  const car = {
    id: 21,
    make: 'Volkswagen',
    model: 'Tiguan',
    year: 2007,
    fuelType: 'Petrol',
    kilometers: 1231234,
    details: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    price: 14299,
    photoUrl: '/photos/cars/volkswagen-tiguan-2007-14299.jpg'
  };
  return {
    props: { car }
  }
}

Kết nối cơ sở dữ liệu

C:\Users\Administrator\Desktop\pro\pages\car[make][brand][id].tsx

import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import React from 'react';
import CarModel from '../../../../interface/Car';
import  openDB  from '../../../../openDB';
const useStyles = makeStyles((theme) => ({
  paper: {
    padding: theme.spacing(2),
    margin: 'auto',
  },
  img: {
    width: '100%',
  },
}));
interface CarDetailsProps {
  car: CarModel | null | undefined;
}
export default function CarDetails({ car }: CarDetailsProps) {
  const classes = useStyles();
  if (!car) {
    return <h1>Sorry, car not found!</h1>;
  }
  return (
    <div>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6} md={5}>
            <img className={classes.img} alt="complex" src={car.photoUrl} />
          </Grid>
          <Grid item xs={12} sm={6} md={7} container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
                <Typography variant="h5">
                  {car.make + ' ' + car.model}
                </Typography>
                <Typography gutterBottom variant="h4">
                  £{car.price}
                </Typography>
                <Typography gutterBottom variant="body2" color="textSecondary">
                  Year: {car.year}
                </Typography>
                <Typography gutterBottom variant="body2" color="textSecondary">
                  KMs: {car.kilometers}
                </Typography>
                <Typography gutterBottom variant="body2" color="textSecondary">
                  Fuel Type: {car.fuelType}
                </Typography>
                <Typography gutterBottom variant="body1" color="textSecondary">
                  Details: {car.details}
                </Typography>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}
export const getServerSideProps: GetServerSideProps<CarDetailsProps> = async (ctx) => {
  const id = ctx.params.id;
  const db = await openDB();
  const car = await db.get<CarModel | undefined>('SELECT * FROM Car where id = ?',id);
  return {
    props: {car}
  }
}