Next.js Tutorial - Part 8 - Static Site Generation (SSG) - getStaticProps and getStaticPaths 2

1. Material-UI AppBar API

C:\Users\Administrator\Desktop\abc\pages\_app.js

import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import App from 'next/app';
import Head from 'next/head';
import React from 'react';
import theme from './../theme';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';
import IconButton from '@material-ui/core/IconButton';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import MenuIcon from '@material-ui/icons/Menu';
export default class MyApp extends App {
  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }
  render() {
    const { Component, pageProps } = this.props;
    return (
      <React.Fragment>
        <Head>
          <title>My page of Lionel</title>
          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        </Head>
        <AppBar position="static">
          <Toolbar variant="dense">
            <IconButton edge="start" color="inherit" aria-label="menu">
              <MenuIcon />
            </IconButton>
            <Typography variant="h6">Microphone Shop</Typography>
          </Toolbar>
        </AppBar>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </React.Fragment>
    );
  }
}

2. Material-UI Card Home Page

C:\Users\Administrator\Desktop\abc\pages\index.tsx

import {GetStaticProps} from "next";
import Link from 'next/link';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import {Microphone} from '../model/Microphone';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import openDB from '../openDB';
export interface IndexProps {
	microphones: Microphone[]
}
export default function Index({microphones}: IndexProps) {
	return (
		<Grid container spacing={3}>
			{
				microphones?.map((microphone) => {
					return (
						<Grid item xs={3}>
							<Link href="/microphone/[id]" as={`/microphone/${microphone.id}`} key={microphone.id}>
								<a>
									<Card>
							      <CardActionArea>
							        <CardMedia
							          component="img"
							          alt={microphone.model + " " + microphone.brand}
							          height="200"
							          image={microphone.imageUrl}
							          title={microphone.model + " " + microphone.brand}
							        />
							        <CardContent>
							          <Typography gutterBottom variant="h5" component="h2">
							            {microphone.brand + " " + microphone.model}
							          </Typography>
							          <Typography variant="body2" color="textSecondary" component="p">
							            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
							            across all continents except Antarctica
							          </Typography>
							        </CardContent>
							      </CardActionArea>
							    </Card>
								</a>
							</Link>
						</Grid>
					)
				})
			}
		</Grid>
	)
}
export const getStaticProps: GetStaticProps = async ctx => {
	const db = await openDB();
	const microphones = await db.all('select * from microphone');
	return {props: {microphones}}
}

Cập nhật

pages\index.tsx

import type { GetStaticProps, NextPage } from 'next';
import openDB from '../pages/openDB';
import {Microphone} from './model/Microphone';
export interface IndexProps {
	microphones: Microphone[]
}
import styles from '../styles/Home.module.css'
import Link from 'next/link';
const Home: any = ({microphones}: IndexProps) => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        {
          microphones?.map((microphone) => {
            return (
              <Link className='block' href="/microphone/[id]" as={`/microphone/${microphone.id}`} key={microphone.id}>
                {microphone.brand + " " + microphone.model + " " + microphone.price}
              </Link>
            )
          })
        }
      </main>
    </div>
  )
}
export default Home
export const getStaticProps: GetStaticProps = async (ctx) => {
	const db = await openDB();
	const microphones = await db.all('select * from microphone');
	return {props: {microphones}}
}
PreviousPart 8 - Static Site Generation (SSG) - getStaticProps and getStaticPaths Tool sqlite table 1NextCách phân trang khá độc lạ xem bài Part 8 bên dưới 👇

Last updated

Was this helpful?