Next.js 实战项目 | 青训营笔记

这是我参与「 第五届青训营 」伴学笔记创作活动的第 16 天。

前言

今天是 2023 年 1 月 30 日星期一，癸卯年正月初九。

依然祝大家兔年快乐🐰

今天课程的学习内容是 Next.js 实战项目，也是这届青训营的第一次直播课程与第一次实践课程，意义非凡。Next.js 是一个轻量级的 React 服务端渲染应用框架，Next.js 的主页中可以找到相关资料文档。

课程概述

今天的课程主要内容有这些：

1. CSR, SSR, SSG 等基本概念
2. 什么是 Next.js
3. Next.js 客户端开发
4. Next.js 服务端开发
5. 项目核心功能讲解

选择 Next.js 的优缺点

创建新的React项目时，有两个明确的选择：Next.js 或 Create-React-App。由于大规模构建缓慢，Next.js 成为了更好的静态站点生成器。

快速

由于服务器端渲染和静态站点生成，NextJS 应用程序飞速发展。为我们的应用进行许多性能优化，将性能作为默认设置。

它易于部署。

Vercel (NextJS 的母公司) 使部署全栈 React 应用程序变得容易。只需点击几下，就可以建立一个专业的部署管道。这包括预览部署和生产部署。

它为我们提供了API路由。

NextJS 为我们提供了一种在应用程序中构建 API 的快速简便的方法。如果应用程序使用第三方 API，我们通常需要自己的 API 来代理请求并对令牌保密，NextJS 的 API 路由非常适合此用例。

易于定制。

NextJS 允许我们自定义 babel 或 webpack 配置，添加 webpack 加载器或 babel 插件很容易。

缺点则是 Next.js 很“固执”

NextJS 中只有一种处理路由的方法，无法自定义它。NextJS 仅限于其基于文件的路由器，并且动态路由仅在与 NodeJS 服务器一起使用时才可能。

课后问题

今天的课程课后留下了一些发人深省的问题，供大家共同讨论思考。

1. 什么是 CSR, SSR 和 SSG？常规的 SSR 与 同构 SSR 之间有什么不同？
2. 一个 SSR 框架的实现要有哪些必须的元素？
3. 为什么我们需要使用 nextjs，它能帮我们解决什么问题？
4. getInitialProps、getServerSideProps、getStaticProps 三者有什么异同？
5. 对于多个主题的效果，我们可以通过什么渠道实现？
6. Strapi 怎么配置发布一个接口？有哪些步骤？
7. Nextjs 的路由机制是怎样的？
8. CMS 是什么？在实际的业务项目中，我们为什么需要它？

参考

SSR 实现