这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天，今天学习的是Next.js实战项目，将学习到的内容记录下来，以便时时巩固加强记忆。

主要学习内容

• CSR、SSR、SSG
• 什么是Next.js
• Next.js客户端开发
• Next.js服务端开发
• 核心功能讲解

CSR、SSR、SSG

1. CSR: 客户端渲染，常见B端WEB应用开发模式，前后端分离，服务器压力相对更轻，渲染工作在客户端进行，服务器直接返回不加工的HTML用户在后续访问操作。
2. SSR： SSR是Server Side Render简称；页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的html就可以了。
3. SSG： 静态站点生成，在构建的时候直接把结果页面输出HTML到磁盘，每次访问直接把HTML返回给客户端，相当于一个静态资源。相比于SSR，因为不需要每次请求都由服务器端处理，所以可以大幅减轻服务器端的压力。但只能用于偏静态的页面。

什么是Next.js

Next.js是一个构建于Node.js之上的开源Web开发框架，支持React的Web应用程序功能，上手快，能力集全，覆盖了足够多的性能优化和生态。

Next.js客户端开发

初始化：

npx create-next-app@latest --typescript

配置：

// next.config.js
const path = require("path");
module.exports = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname),
    };
    return config;
  },
};

Next.js服务端开发

BBF层开发：

import type {NextApiRequest,NextApiResponse} from "next";
import axios from "axios";
import {CMSDOMAIN} from "@/utils";
import {IArticleProps} from "../article/[articleId]"


const getArticleInfoData = (req: NextApiRequest, res: NextApiResponse<IArticleProps>): void => {
  const { articleId } = req.query;
  axios.get(`${CMSDOMAIN}/api/article-infos/${articleId}`).then(result => {
    const data = result.data || {};
    res.status(200).json(data);
  });
};

export default getArticleInfoData;

核心功能实现

Strapi分页：(/api/articles?pagination[page]=1&pagination[pageSize]=10) //按10个页分页
markdown 转 html:npm install showdown--save
html 转 dom:dangerouslySetInnerHTML