获得徽章 19
- #每天一个知识点# Next.js 在时隔六年发布 App Router 功能后（在 13.4 版本稳定），原始设计原则依然被保留。
1. 零配置。基于文件系统的路由机制
基于文件系统的 Page Router 依旧保留，同时引入了依旧基于文件系统的 App Router。App Router 基于 React Server Components 和 Suspense 特性构建，同时还支持嵌套路由、嵌套布局（Nested Routes & Layouts）。
2. 只有 JavaScript。万物皆函数
App Router/Page Router 一样，每个页面以 ES 模块的形式对外导出一个函数或类（继承自 React.Component）。同时，Next.js也内置了 CSS-in-JS 支持
不过，App Router 表达方式更加简洁。比如，数据请求方法 getInitialProps/getStaticProps/getServerSideProps 都不用了，组件内直接使用 fetch API 请求即可，默认请求都发生在服务端，可以在文件通过 "use client" 指令来声明客户端组件（Client Components）。
3. 默认启用服务端渲染和代码分割
Page Router（pages/ 目录内的页面）默认都使用基于路由的代码分割方式，组件级别的代码分割则利用 next/dynamic。
App Router 浏览器 JavaScript bundle 根本不会包含 Server Components 代码，客户端组件默认情况下则会自动进行代码分割。
4. 数据获取由开发人员负责
现在依旧是。对 Page Router 来说，以前getInitialProps API 已不再推荐使用，而是替换成目的更加明确的 getStaticProps API、getServerSideProps API。
对 App Router 来说，请求就是在 async 函数中使用 await fetch() 这么简单。请求优化都是基于 fetch API 来做的，更加友好。展开评论点赞 - #每天一个知识点# Next.js 发展至今，一直在坚持的 4 个基本原则。
1. 零配置。基于文件系统的路由机制
Next.js 就是在一个 Node.js 项目基础上做的简单拓展。package.json 中添加 next 依赖，在 pages/ 目录下创建页面文件（.js、jsx、.tsx），执行 npx next dev/build/start 就能将项目运行起来
2. 只有 JavaScript。万物皆函数
每个页面以 ES 模块的形式对外导出一个函数或类（继承自 React.Component），Next.js 也内置了 CSS-in-JS 支持
3. 默认启用服务端渲染和代码分割
每个页面默认启用服务端渲染，还有以页面为单位的代码分割
4. 数据获取由开发人员负责。
Next.js 为 React 组件拓展了一个 getInitialProps 函数（当然，Next 13 后，更推荐使用getStaticProps 和 getServerSideProps 来替代），是一个同时会在服务端和客户端运行的函数。getInitialProps必须返回一个Promise，该Promise解析为一个JavaScript对象，然后填充组件的props。展开评论点赞 - #每天一个知识点# Next.js 13 引入了 App Router，是基于 React Server Component 特性带来一种新的代码组织方式，在 13.4 版本中稳定。新项目中都推荐使用 App Router，不过不是必须的。因为 App Router 结构带来了新的特性和约定，学习和迁移成本不低，所以：
- 官方支持渐进式迁移（incrementally migration）——同时支持 Pages Router、App Router 功能
- 同时，一些特性优化也会尽量考虑在两种 Router 中都支持展开评论点赞 - #每天一个知识点# Next.js _app.js、_document.js 的作用及区别
_app.js 文件作用：
- 为页面添加布局组件
- 保留页面之间会共享的状态
- 向页面中注入额外数据
- 添加全局 CSS 样式
_document.js 的作用：
- 修改页面 `<html>` 、`<body>` 标签，或者自定义`<body>` 标签内的内容
另外，_document.js 仅在服务端执行，还只是在页面初始渲染的时候；_app.js 在客户端和服务端环境都会执行。展开评论点赞 - #每天一个知识点# Next.js 中有两个涉及服务端渲染的方法：`getInitialProps` 和 `getServerSideProps`，其区别是：
- 两个方法都是异步函数，`getInitialProps` 不再推荐使用，而是推荐专门用于服务端渲染的 `getServerSideProps` 方法
- `getInitialProps` 方法在客户端和服务端都会执行。页面初始渲染时在服务端调用；前端页面通过 `<Link>` 或 `next/router` 方式切换路由时，在浏览器端调用
- `getServerSideProps` 是 Next.js 9.3 引入的一个用于替代 `getInitialProps` 的方法。与后者不同在于，`getServerSideProps` 只在服务端调用，无论是重载页面还是通过`<Link>` or `next/router` 方式的客户端导航
- 另外，`getServerSideProps` 只能在 Page 中使用，`getInitialProps` 则能在` _document.js` 和 Page 中使用展开赞过
评论1 - #每天一个知识点# Next.js 会为项目种的每个页面默认都启用预渲染（Pre-Rendering），即网页 HTML 会在发送到客户端前在服务端生成。
服务端渲染和静态站点渲染同属于预渲染，不过生成网页 HTML 的时机不同：
- 服务端渲染是在客户端每次请求后端服务时，才生成用于首屏渲染的网页 HTML
- 静态站点渲染则是在项目构建阶段完成，即执行 `next build` 指令的时候
那在 Next.js 中如何启用服务端渲染和静态站点渲染呢？
- 在 Next.js 中，你可以通过在页面中以命名导出`getServerSideProps`函数的方式启用服务器端渲染。Next.js 将会在每次客户端请求时调用`getServerSideProps`函数，并用函数内部返回的数据预渲染页面
- 在 Next.js 中，你可以通过在页面中以命名导 `getStaticProps`函数的方式启用静态站点渲染。Next.js 会在构建阶段（即执行 `next build` 指令时）调用`getStaticProps` 函数，并使用函数内部返回的数据生成静态 HTML展开赞过 评论1 - #吐槽一下# 不得不说一下掘金的“闪念笔记” web 端真是有些难用。
场景是这样的：我在 2 台设备上操作，其中一台设备上的笔记“确定”保存后，不会同步到另一台！导致我有时忘记的情况下，发现之前写的笔记没有了。。。那如果没有同步功能也可以，那至少提供可以查看的历史记录，方便我恢复吧。。。也没有。。。展开评论点赞 - #每天一个知识点# Next.js 项目中支持 3 种渲染方式：服务端渲染（SSR）、静态站点渲染（SSG）和客户端渲染（CSR）。
1. 服务端渲染和静态站点渲染同属于预渲染（Pre-Rendering，即网页 HTML 会在发送到客户端前在服务端生成。
2. 客户端渲染是指浏览器从服务器接收一个“空 HTML 壳子”，配合用于 hydration 的 JavaScript 代码，完成应用的初始渲染。
3. 纯客户端应用在渲染时，会出现短暂白屏；预渲染应用则会立即展示构建好的首屏 HTML，不会出现白屏。展开赞过 评论2 - 发现掘金上传的专栏图片显示时变形了，看了样式是因为限制了宽高：
.column-wrap .column-img[data-v-5682e8e2] { width: 150px; height: 84px; }
这个问题可以通过设置 object-fit 来解决：
.column-wrap .column-img[data-v-5682e8e2] { width: 150px; height: 84px; object-fit: cover; }
看起来会更舒服一些![[灵光一现]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)
展开评论点赞
![[灵光一现]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_25.51e6984.png)
tobiasahlin.com