Next.js学习笔记1

1、创建第一个应用

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
cd nextjs-blog
npm run dev

# 创建nextjs项目
# 文档：https://nextjs.org/docs/pages/api-reference/create-next-app
pnpm create next-app

2、在页面之间导航

1、页面基于文件名与路由关联。

2、next.js中创建不同页面的方法：在page目录下创建一个js文件，文件的路径就变成了URL路径。

3、next.js中link组件的使用

import Link from 'next/link'

<Link href=""></Link>

注：在next.js 12.2以前，Link组件需要包装标签，但是在12.2及以上版本中不需要这样做。

4、<Link>组件的优势

当使用Next.js的<Link>组件时，浏览器不会加载整个页面，而是进行客户端导航。这说明<Link>子组件的一个主要优势是支持部分刷新（Partial Refresh）。

在传统的网页导航中，当用户点击一个链接时，浏览器会请求并加载整个新页面。这种方式可能会导致页面加载速度变慢，影响用户体验。而Next.js的<Link>组件通过实现客户端导航，避免了这种情况。客户端导航意味着只有当前页面发生变化的部分会被更新，而不是整个页面。这样可以提高页面加载速度，提升用户体验。

5、代码分割和预加载

Next.js的两个主要优点：代码分割（Code Splitting）和预加载（Prefetching）。这些优点有助于提高网站的性能和用户体验。

  1. 代码分割（Code Splitting）：Next.js会自动对代码进行分割，这样每个页面只加载所需的代码。这意味着在渲染主页时，其他页面的代码不会被加载。即使网站拥有数百个页面，主页的加载速度也能得到保证。此外，代码分割还使页面之间相互隔离，如果某个页面出现错误，其他页面仍能正常工作。
  2. 预加载（Prefetching）：在Next.js的生产环境中，当<Link>组件出现在浏览器视口中时，Next.js会自动在后台预加载链接页面的代码。这样当用户点击链接时，目标页面的代码已经在后台加载完成，页面切换将非常迅速。

注：如果要链接一个next.js应用程序之外的一个外部页面，使用<a>标签，而不是<Link>组件。

6、总结

Next.js通过代码分割（Code Splitting）、客户端导航（Client-side Navigation）和预加载（Prefetching，在生产环境中）来实现最佳性能。

在Next.js中，你可以通过在pages目录下创建文件来设置路由，同时使用内置的Link组件进行导航，无需额外的路由库。

3、静态资源、元数据以及CSS

1、Image组件

  1. next/image是HTML <img>元素的扩展，为现代Web环境而设计。它提供了更多特性和优化，使得图像处理在Next.js项目中更加高效和便捷。
  2. Next.js默认支持图像优化。这包括调整图像尺寸、优化图像质量以及在浏览器支持的情况下，使用现代格式（如WebP）呈现图像。这样可以避免向小视口设备发送过大的图像，提高加载速度。此外，Next.js还能自动适应未来的图像格式，并为支持这些格式的浏览器提供服务。
  3. 自动图像优化功能支持任何图像源。即使图像托管在外部数据源（如CMS）上，Next.js仍然可以对其进行优化。

2、Image组件的优势

  1. 按需优化：Next.js在用户请求图像时进行优化，而不是在构建时。这与静态站点生成器和静态解决方案不同，Next.js不会因为处理大量图像而增加构建时间，无论是10张图像还是1000万张图像。
  2. 默认懒加载：Next.js默认对图像进行懒加载。这意味着页面速度不会因为视口之外的图像而受到影响。当用户滚动到图像所在位置时，图像才会加载。
  3. 避免累积布局偏移（Cumulative Layout Shift）：Next.js渲染图像的方式能有效避免累积布局偏移，这是一个关键的网络性能指标（Core Web Vital），Google将在搜索排名中使用这一指标。通过避免累积布局偏移，Next.js能够提供更好的页面稳定性和用户体验。

综上，这段话强调了Next.js中Image组件的灵活性和优势，如按需优化、懒加载和避免累积布局偏移，这些特性有助于提高网站性能和用户体验。

3、<Head>是一个构建在next.js中的react组件，它允许你修改页面的<head>。

4、Script组件会在获取和加载外部脚本的时候，对其进行优化。

import Script from 'next/script'

<Script src="" strategy="" onload={} />

优势：

<Script>组件的优势

5、<Layout>组件

注：要使用css模块，css文件名必须以.module.css结尾。

css模块会自动生成唯一的类型，只要使用css模块，就不必担心类型冲突。此外，Next.js 的代码分割特性也适用于 CSS 模块。它确保为每个页面加载最少量的 CSS。这将导致更小的捆绑包大小。

6、全局css文件在pages/_app.js中导入。

7、添加tailwind css。via

npm install -D tailwindcss autoprefixer postcss

8、postcss和tailwind css之间的关系

postcss和tailwind css之间的关系

4、预渲染和数据获取

1、预渲染

默认情况下，Next.js会为每个页面进行预渲染。这意味着Next.js会提前为每个页面生成HTML，而不是将所有工作都交给客户端JavaScript来完成。预渲染可以带来更好的性能和SEO优化。

每个生成的HTML都与该页面所需的最小JavaScript代码相关联。当浏览器加载页面时，它的JavaScript代码会运行，使页面完全互动。这个过程被称为“hydration”。

总结一下，Next.js中的预渲染是指在服务器端提前生成页面的HTML，而不是依赖客户端JavaScript来生成。预渲染有助于提高性能和SEO。生成的HTML和最小化的JavaScript代码一起工作，使页面在浏览器中加载并变得完全互动。这个过程被称为hydration。

2、和没有预渲染功能的react app比较

和没有预渲染功能的react app比较

3、预渲染的好处

  • 改善SEO
  • 允许你的应用可以在没有js的情况下工作

解释说明：

预渲染好处的解释

4、为什么浏览器中禁用js，next.js应用的css不会加载，此时js会加载吗？

为什么浏览器中禁用js，next.js应用的css不会加载，此时js会加载吗？

5、预渲染的两种形式

  • 静态生成
  • 服务器端渲染

预渲染的两种形式

注：

在开发模式下(当您运行 npm run dev 或纱线 dev 时) ，每个请求都会预先呈现页面。这也适用于静态生成，以使其更容易开发。进入生产环境时，静态生成只会在构建时发生一次，而不是在每个请求上发生。

6、什么时候使用静态生成？什么时候采用服务器端渲染？via

image-20230318163928211

7、有数据和无数据的静态生成

Static Generation without Data

Static Generation with Data

8、使用getStaticProps异步函数来进行有数据的静态生成。

9、解析md文件中front matter所用到的库gray-matter安装

npm install gray-matter

10、开发环境和生产环境中的getStaticProps

  • 在开发环境中，getStaticProps在每个请求上运行
  • 在生产环境中，getStaticProps在构建时运行

11、在Next.js应用程序中，你不需要单独导入 fetch() 函数，因为Next.js已经在客户端和服务器端为你提供了这个函数的实现（polyfill）。换句话说，你可以直接使用 fetch() 函数进行HTTP请求，而无需担心兼容性问题。

12、getStaticProps只能从一个页面导出，不能从非页面文件导出，这样限制的原因之一是，React需要在呈现页面之前拥有所有必需的数据。

13、需要在请求时获取数据，需要使用服务器端渲染。静态生成在构建时发生一次，所以它不适合更新频繁的数据或在每个用户请求上进行更改的数据。

14、服务器端渲染

服务器端渲染

15、静态生成+客户端渲染

静态生成+客户端渲染

5、动态路由

1、页面路径取决于外部数据

页面路径取决于外部数据

2、静态生成含有动态路径的页面

静态生成含有动态路径的页面

3、渲染markdown，使用remark库。

npm install remark remark-html

4、格式化日期，使用date-fns库或者使用dayjs库。

npm install date-fns
或者
npm install dayjs

5、getStaticPaths函数

在Next.js中，getStaticPaths函数用于预渲染静态页面。这意味着在构建时生成HTML文件，以便在运行时直接发送给用户。在Next.js中，开发环境和生产环境的行为略有不同。下面是关于两者差异的解释。

  • 开发环境

当您使用npm run dev或yarn dev命令在开发模式下运行应用程序时，getStaticPaths将在每次请求时运行。这意味着，当您访问一个静态生成的页面时，getStaticPaths会重新生成可用路径，以便您在开发过程中查看最新的更改。这在开发过程中非常有用，因为您可以立即看到对静态页面的任何更改，而无需重新构建整个应用程序。

  • 生产环境

在生产环境中，getStaticPaths在构建时运行。这意味着，当您使用npm run build或yarn build命令构建应用程序时，getStaticPaths会生成静态页面的所有可用路径。在生产环境中，预渲染的静态页面会被缓存，以便在运行时快速发送给用户，从而提高性能。

这种差异的主要原因是，在开发过程中，我们希望实时查看更改，而在生产环境中，我们希望尽可能快地向用户提供内容。通过在开发环境中实时生成路径并在生产环境中缓存预渲染的页面，Next.js为开发人员提供了更好的开发体验，同时在生产环境中为用户提供了更快的性能。

6、getStaticPaths函数的fallback属性

getStaticPaths函数的fallback属性

6、API路由

不应该在getStaticProps或getStaticPaths中调用API路由。相反，你应该直接在getStaticProps或getStaticPaths中编写服务器端代码（或调用辅助函数）。

原因如下：

  1. getStaticProps和getStaticPaths仅在服务器端运行，永远不会在客户端运行。这意味着你可以在这些函数中编写仅在服务器上执行的代码。
  2. 由于这些函数不会包含在浏览器的JS包中，因此你可以编写诸如直接数据库查询的代码，而无需将它们发送到浏览器。这有助于保护敏感信息和减小浏览器中加载的代码量。

因此，在编写Next.js应用程序时，确保在getStaticProps或getStaticPaths中直接编写服务器端代码，而不是调用API路由。这样，你可以充分利用服务器端渲染的优势，同时保持代码更简洁、更安全。

7、部署应用

1、DPS web开发流程

DPS web开发流程