使用 NextJS 和 TailwindCSS 重构我的博客

import React, { ReactElement, useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'

export default function Post(): ReactElement {
  let { slug } = useParams()
  const [post, setPost] = useState({
    title: '',
    content: '',
  })
  useEffect(() => {
    fetch(`/api/post/${slug}`)
      .then((res) => res.json())
      .then((res) => {
        setPost(res)
      })
  }, [])
  return (
    <>
      <h1>{post.title}h1>
      <div
        dangerouslySetInnerHTML={{
          __html: post.content,
        }}
      >div>
    >
  )
}

// pgaes/blog/[slug].tsx
import React, { ReactElement } from 'react'

export default function Post({ post }): ReactElement {
  return (
    <>
      <h1>{post.title}h1>
      <div
        dangerouslySetInnerHTML={{
          __html: post.content,
        }}
      >div>
    >
  )
}

export async function getServerSideProps(context) {
  const { slug } = context.params
  const res = await fetch(`https://.../api/post/${slug}`)
  const post = await res.json()

  return {
    props: {
      post,
    },
  }
}

export async function getStaticProps(context) {
  // fetch data
  return {
    props: {
      //data
    },
  }
}

export async function async getStaticPaths() {
   const slugs= await getAllSlugs()
  return {
    paths: slugs.map(slug=>({
        params:slug
    })),
    fallback: true //or false
  };
}

// pages/posts/[slug].js
import { useRouter } from 'next/router'

function Post({ post }) {
  const router = useRouter()

  // 如果页面还没静态生成，则先显示下面的loading
  // 直到 `getStaticProps()`运行完成
  if (router.isFallback) {
    return <div>Loading...div>
  }

  // Render post...
}

// 在构建时运行，获取全部文章路径
export async function getStaticPaths() {
  return {
    // 在打包时值生成 `/posts/1` 和 `/posts/2` 的静态页面
    paths: [{ params: { id: '1' } }, { params: { id: '2' } }],
    // 开启其他页面的静态生成
    // For example: `/posts/3`
    fallback: true,
  }
}

// 在构建时运行，根据params中的id 获取文章详情
export async function getStaticProps({ params }) {
  // 如果页面的路由是 /posts/1, 这 params.id 的值就是1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // 把数据专递给页面的props
  return {
    props: { post },
    //当请求进入的时候再次生成文章详情页，比如修改文章重新生成
    // 1s 内最多生成1次
    revalidate: 1,
  }
}

export default Post

model User {
  id      Int      @id @default(autoincrement())
  name    String?
  email   String   @unique
  posts   Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  authorId  Int?
  author    User?   @relation(fields: [authorId], references: [id])
}

import { Entity, PrimaryGeneratedColumn, Column, OneToMany, ManyToOne } from 'typeorm'

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number

  @Column({ nullable: true })
  name: string

  @Column({ unique: true })
  email: string

  @OneToMany((type) => Post, (post) => post.author)
  posts: Post[]
}

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number

  @Column()
  title: string

  @Column({ nullable: true })
  content: string

  @Column({ default: false })
  published: boolean

  @ManyToOne((type) => User, (user) => user.posts)
  author: User
}

const posts = await postRepository.find({
  where: {
    title: { contains: 'Hello World' },
  },
})

const posts = await postRepository.find({
  where: {
    title: ILike('%Hello World%'),
  },
})

type Categories = {
  id?: number
  name: string
  createdAt?: Date | null
}[]

type PostBody = Post & {
  categories: Categories
}

const { title, summary, slug, content, published, categories } = req.body as PostBody

const connectOrCreate = categories.map(({ name }) => {
  return {
    create: {
      name,
    },
    where: {
      name,
    },
  }
})
const newPost = await prisma.post.create({
  data: {
    title,
    summary,
    slug,
    content,
    published,
    categories: {
      connectOrCreate,
    },
    user: {
      connect: {
        id: req.user.id,
      },
    },
  },
  include: {
    categories: true,
  },
})

@Entity()
export class Post {
  @PrimaryGeneratedColumn()
  id: number

  @Column()
  @IsNotEmpty()
  title: string

  @Column({
    select: false,
    type: 'text',
  })
  content: string

  @ManyToMany((type) => Category, {
    cascade: true, //级联插入修改  boolean | ("insert" | "update" | "remove" | "soft-remove" | "recover")[]
  })
  @JoinTable()
  categories: Category[]
}

const newPost = postRepository.create({
  ...ctx.request.body,
})