【React】【Next.js】动态路由 + 静态生成HTML = 博客详情极速跳转

SroUngE

已于 2022-05-01 21:15:08 修改

阅读量3.1k

点赞数

分类专栏：前端文章标签： javascript react.js html nextjs

于 2022-05-01 17:34:44 首次发布

本文链接：https://blog.csdn.net/qq_39093164/article/details/124528903

版权

本文介绍了如何使用Next.js实现博客的动态路由和静态HTML生成，以提高博客详情页面的加载速度。通过getStaticProps和getStaticPaths方法在构建时生成静态页面，减少了API调用和数据库交互。在部署时，通过添加export指令、运行build和检查结果，最终实现了快速的博客页面跳转。

摘要由CSDN通过智能技术生成

引言

博客的文章内容通常是不变的，因此为了加快文章的加载速度，减少call api，连数据库的消耗，可以在build时期就把博客详情页转为静态的HTML，next.js提供了简单易用的实现方案。

效果

在这里插入图片描述

博客URL 动态路由
打开博客详情页面超级快！！！

博客列表页面

// pages/blogs/index.js
const Blogs = ({
    posts}) => {
   
    return (
        <>
           <div className="row-container">
           //遍历展示博客列表
				{
   posts.map(post => (
					<Link href={
   `/blogs/${
     post.index}`}>
                		<a className="middle-card">
                    		// 省略细节
                		</a>
            		<