Part 8 - Static Site Generation (SSG) - getStaticProps and getStaticPaths Tool sqlite table 1

https://www.sqlitetutorial.net/tryit/query/sqlite-create-table/#1

https://www.youtube.com/watch?v=dKutGKkIp5o

CREATE TABLE microphone ( id integer PRIMARY KEY, brand text NOT NULL, model text NOT NULL, price integer NOT NULL, imageUrl text NOT NULL );

INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 1','Model 1',100,'1.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 2','Model 2',100,'2.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 3','Model 3',100,'3.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 4','Model 4',100,'4.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 5','Model 5',100,'5.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 6','Model 6',100,'6.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 7','Model 7',100,'7.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 8','Model 8',100,'8.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 9','Model 9',100,'9.png');
INSERT INTO microphone(brand,model,price,imageUrl) VALUES( 'Bran 10','Model 10',100,'10.png');

Chú ý dùng dấu kép " không insert được :(

Hoặc có thể downlaod tool tại đây.

6MB

sqlite.zip

archive

8KB

microphones.sqlite

1. Sử dụng getStaticProps hiển thị mảng danh sách ra trang chủ

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

import {GetStaticProps} from "next";
import {Microphone} from '../model/Microphone';
import openDB from '../openDB';
export interface IndexProps {
	microphones: Microphone[]
}
export default function Index({microphones}: IndexProps) {
	return (
		<pre>{JSON.stringify(microphones, null,2)}</pre>
	)
}
export const getStaticProps: GetStaticProps = async ctx => {
	const db = await openDB();
	const microphones = await db.all('select * from microphone');
	return {props: {microphones}}
}

Viết lại chút

pages\getstaticprops.tsx

import {GetStaticProps} from "next";
import {Microphone} from './model/Microphone';
import openDB from '../pages/openDB';
export interface IndexProps {
	microphones: Microphone[]
}
export default function Index({microphones}: IndexProps) {
	return (
		<pre>{JSON.stringify(microphones, null,2)}</pre>
	)
}
export const getStaticProps: GetStaticProps = async ctx => {
	const db = await openDB();
	const microphones = await db.all('select * from microphone');
	return {props: {microphones}}
}

C:\Users\Administrator\Desktop\abc\model\Microphone.ts

export interface Microphone {
  id: number;
  brand: string;
  model: string;
  price: number;
  imageUrl: string;
}

C:\Users\Administrator\Desktop\abc\openDB.ts

import { open } from 'sqlite'
import sqlite3 from 'sqlite3'
// you would have to import / invoke this in another file
export default async function openDB () {
  return open({
    filename: './microphones.sqlite',
    driver: sqlite3.Database
  })
}

pages\openDB.ts

import { open } from 'sqlite'
import sqlite3 from 'sqlite3'
// you would have to import / invoke this in another file
export default async function openDB () {
  return open({
    filename: './pages/data/microphones.sqlite',
    driver: sqlite3.Database
  })
}

2. Sử dụng GetStaticPaths hiển thị chi tiết từng sản phẩm

C:\Users\Administrator\Desktop\abc\pages\microphone[id].tsx

import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router';
import { Microphone } from '../../../model/Microphone';
import  openDB  from '../../openDB';
export type MicrophoneDetailProps = Microphone;
export default function MicrophoneDetail({id, brand, model, price, imageUrl}: MicrophoneDetailProps) {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading......I'm sorry for the wait!!</div>;
  }
  return (
    <div>
      <div>{id}</div>
      <div>{brand}</div>
      <div>{model}</div>
      <div>{price}</div>
      <div>{imageUrl}</div>
    </div>
  );
}
export const getStaticProps: GetStaticProps<MicrophoneDetailProps> = async ( ctx ) => {
  const id = ctx.params.id as string;
  const db = await openDB();
  const microphone = await db.get('select * from microphone where id = ?', + id);
  return { props: microphone };
};
export const getStaticPaths: GetStaticPaths<{ id: string }> = async () => {
  const db = await openDB();
  const microphones = await db.all('select * from microphone');
  const paths = microphones.map((a) => {
    return { params: { id: a.id.toString() } };
  });
  return {
    fallback: false,
    paths,
  };
};

Viết lại

pages\microphone\[id].tsx

import { GetStaticPaths, GetStaticProps } from 'next';
import { useRouter } from 'next/router';
import { Microphone } from '../model/Microphone';
import openDB from '../../pages/openDB';
export type MicrophoneDetailProps = Microphone;
export default function MicrophoneDetail({id, brand, model, price, imageUrl}: MicrophoneDetailProps) {
  const router = useRouter();
  if (router.isFallback) {
    return <div>Loading......I'm sorry for the wait!!</div>;
  }
  return (
    <div className="p-3 w-screen">
      <div className='text-blue-600/100'>{id}</div>
      <div className='text-blue-600/75'>{brand}</div>
      <div className='text-blue-600/50'>{model}</div>
      <div className='text-blue-600/25'>{price}</div>
      <div>{imageUrl}</div>
    </div>
  );
}
export const getStaticProps: GetStaticProps<MicrophoneDetailProps> = async ( ctx:any ) => {
  const id = ctx.params.id as string;
  const db = await openDB();
  const microphone = await db.get('select * from microphone where id = ?', + id);
  return { props: microphone };
};
export const getStaticPaths: GetStaticPaths<{ id: string }> = async () => {
  const db = await openDB();
  const microphones = await db.all('select * from microphone');
  const paths = microphones.map((a) => {
    return { params: { id: a.id.toString() } };
  });
  return {
    fallback: false,
    paths,
  };
};