NextJS
-
渲染方式 1.1 静态渲染(SSG)
getStaticProps
export const getStaticProps = async() =>{
const res = await fetch(uri)
const posts = await res.json()
return {
props:{
posts
}
}
}
export default function Posts(){
// Render data
}1.2 动态路径
export const getStaticPaths = async () => {
const posts = await fetch('https://jsonplaceholder.typicode.com/posts', {
headers: { 'Content-Type': 'application/json' },
})
const res = await posts.json()
const paths = res.map((item: IPosts) => {
return {
params: { 'id': item.id.toString() },
}
},
)
return {
paths,
fallback: false,
}
}1.3 服务端渲染(SSR)
interface IProps {
id: string
userID: string
title: string
body: string
}
export const getServerSideProps = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const posts = await res.json()
return {
props: {
posts,
},
}
}
const Page = (props: { posts: Array<IProps> }) => {
const { posts } = props
return <>
{
posts.map((post: IProps) => {
return <article key = { post.id } >
<p>{ post.title } < /p>
< figure >
<figcaption>
<p>{ post.userID } < /p>
< p > { post.title } < /p>
< /figcaption>
< /figure>
< /article>
})
}
< />
}
MarkDown解析库
-
安装
pnpm i gray-matter
-
准备md文件,在头部设置
--- key: value ---
-
读取md数据
- 获取需要读取的md文件的父目录
- 读取并给md文件设置编码格式,默认为
utf-8
- 使用
matter
截取在md文件的元数据--- key: value ---
的内容
MarkDown渲染库
-
安装
pnpm i remark remark-html
-
准备md文件
-
导入
import html from 'remark-html'
import { remark } from 'remark' -
使用
- 搭配
matter
库解析md文件 - 使用
remark-html
将md文件转成HTML格式 - 将HTML数据转成字符串
- 页面渲染HTML字符串
const mdToHTML = async () =>{
const filePath = resolve(__dirname,'mdFile.md')
const mdFile = fs.readFileSync(filePath,'utf-8')
const mdFileResult = matter(mdFile)
const content = await remark()
.use(html)
.process(mdFileResult.content)
const htmlString = content.toString()
return {
htmlString
}
}App(props){
const {htmlString} = props
return <div dangerouslySetInnerHTML={{__html: htmlString.content}}></div>
} - 搭配