tbg-ecomm-nextjs/pages/sales/sales_detail.js

import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";

import HeaderMercy from "components/Header/HeaderMercy.js";
import Header from "components/Header/Header.js";
import Footer from "components/Footer/FooterSosmed.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";

import GetSales from "api/sales/sales-mercy.js";
import DataSnackbarContent from "pages-sections/yamaha/snackbar.js";
import DataSales from "pages-sections/sales/sales_detail.js";
import Cookies from "cookies";
import stylecss from "pages/home.css";

const dashboardRoutes = [];
const useStyles = makeStyles(styles);

const detailSales = function ({ backend, sales, ...props }) {
    const classes = useStyles();
    const { ...rest } = props;
    <DataSales sales={props.sales} />
    return (
        <div>
            <DataSales sales={sales} backend={backend} />
            <Footer style={{position: 'absolute', left: 0, right: 0, bottom: 0}}/>
        </div>
    );
}

export default detailSales;

export async function getServerSideProps(context) {
    var { query } = context;
    var sales = [];
    const backend = process.env.BACKEND_SERVER_URI;

    var res = await GetSales.GetDetailSalesMerci(query.s || 0);
    if (res["STATUS"] === 1) {
        sales = res["DATA"]["salesMercies"];
    }

    console.log("detail :", sales);

    return {
        props: { sales, backend }, // will be passed to the page component as props
    };
}