next.js搭建博客系统-09-ssr渲染文章详情页携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」

import { useState } from 'react';
import Link from 'next/link';
import { Avatar, Input, Button, message, Divider } from 'antd';
import { observer } from 'mobx-react-lite';
import { useStore } from 'store/index';
import MarkDown from 'markdown-to-jsx';
import { format } from 'date-fns';
import { prepareConnection } from 'db/index';
import { Article } from 'db/entity';
import { IArticle } from 'pages/api';
import styles from './index.module.scss';
import request from 'service/fetch';

1.这里使用 mobx-react-lite 第三方库中的observer 来响应 2.使用 markdown-to-jsx 第三方库的包来渲染 markdown格式的jsx代码

接下来开始编写

首先通过 url 获取文章的 id字段

然后根据通过ssr获取文章详情数据

根据id 去数据表中查询当前文章的详情

这里增加一个功能，就是浏览次数，当前查询的时候，浏览次数增加 1 次

export async function getServerSideProps({ params }: any) {
  const articleId = params?.id;
  const db = await prepareConnection();
  const articleRepo = db.getRepository(Article);
  const article = await articleRepo.findOne({
    where: {
      id: articleId,
    },
    relations: ['user', 'comments', 'comments.user'],
  });

  if (article) {
    // 阅读次数 +1
    article.views = article?.views + 1;
    await articleRepo.save(article);
  }

  return {
    props: {
      article: JSON.parse(JSON.stringify(article)),
    },
  };
}

通过以上 ssr 代码就拿到了当前文章的数据

然后渲染这些基本信息

这里 markdown的内容使用 markdown-to-jsx 第三方库来加载

<div className="content-layout">
        <h2 className={styles.title}>{article?.title}</h2>
        <div className={styles.user}>
          <Avatar src={avatar} size={50} />
          <div className={styles.info}>
            <div className={styles.name}>{nickname}</div>
            <div className={styles.date}>
              <div>
                {format(new Date(article?.update_time), 'yyyy-MM-dd hh:mm:ss')}
              </div>
              <div>阅读 {article?.views}</div>
            </div>
          </div>
        </div>
        <MarkDown className={styles.markdown}>{article?.content}</MarkDown>
      </div>

接着增加是否显示编辑的逻辑

通过store拿到当前登录的用户信息

const store = useStore();
  const loginUserInfo = store?.user?.userInfo;

当用户登录的时候，显示编辑按钮

并且点击编辑按钮跳转到文章编辑页面

{Number(loginUserInfo?.userId) === Number(id) && (
                <Link href={`/editor/${article?.id}`}>编辑</Link>
              )}