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

Xây dựng giao diện detail Car :))

http://localhost:3000/car/Honda/Civic/21localhost

http://localhost:3000/photos/cars/volkswagen-tiguan-2007-14299.jpg

C:\Users\Administrator\Desktop\nextjs\interface\Car.tsx

export interface CarModel {
  id: number;
  make: string;
  model: string;
  year: number;
  fuelType: string;
  kilometers: number;
  details: string;
  price: number;
  photoUrl: string;
}

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 React from 'react';
import CarModel from '../../../../interface/Car';
const useStyles = makeStyles((theme) => createStyles({
  paper: {
    padding: theme.spacing(2),
    margin: 'auto',
  },
  img: {
    width: '100%',
  },
}));
export default function CarDetails() {
  const classes = useStyles();
  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'
  }
  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>
  )
}