Next.js框架入门笔记

news2025/1/11 2:47:11

内置组件

‘pages/_document.js’ 文件，自定义document
DOC： https://www.nextjs.cn/docs/advanced-features/custom-document

<Head>组件

<Head>是一个内置在 Next.js 中的 React 组件。它允许您修改页面的<head>。
Docs: https://www.nextjs.cn/docs/api-reference/next/head

<Link>组件

import Link from '/next/link'

<Link>组件切换路由，不会刷新浏览器。
而<a>标签切换链接时浏览器会进行完全刷新。

Next.js 会自动进行代码拆分，因此每个页面只加载该页面所需的内容。这意味着在呈现主页时，最初不会提供其他页面的代码。
即使您添加数百个页面，这也可以确保主页快速加载。
仅加载您请求的页面的代码也意味着页面变得孤立。如果某个页面抛出错误，应用程序的其余部分仍然可以工作。
此外，在 Next.js 的生产版本中，每当Link组件出现在浏览器的视口中时，Next.js 都会自动在后台预取链接页面的代码。当您单击链接时，目标页面的代码已经在后台加载，页面转换几乎是即时的！
Next.js 通过代码拆分、客户端导航和预取（在生产中）自动优化您的应用程序以获得最佳性能。

链接到站点外的页面，请使用标签。
给链接添加样式，添加属性时，‘className’ 是添加在标签上的。

2. 资源、元数据和css

2.1 样式

Next.js 内置了对 CSS 和 Sass 的支持。支持导入：导入.css和.scss文件。

内联写法：

<style jsx>{`
  …
`}</style>

上面代码使用一个名为 styled-jsx 的库。意思是“css-in-js” 库 —— 允许你在 React 组件中编写 CSS。这时 CSS 样式被限制只在当前组件有效。Next.js 内置对 styled-jsx 的支持，但也可以使用其他流行的 CSS-In-JS库，如：styled-components或Emotion。

独立样式文件

📢：1. 使用Css Modules, 文件名必须以 .module.css
2. Css Module会自动生成唯一类型，不用担心 className 冲突。
3. Next.js代码拆分也对 Css Module 适用，为每个页面加载最少的Css。这导致更小的包。

全局样式
在 pages 文件下创建一个 _app.js 文件。这个 APP 组件是通用顶级组件，对所有页面通用。可以用这个组件在页面之间导航时保存状态。

📢：添加 pages/_app.js 后需要重启开发服务。
创建顶级目录 styles，里面创建一个 global.css 文件。

使用 classnames 库切换样式

// 安装
npm install classnames  
// or
yarn add classnames

Docs: https://github.com/JedWatson/classnames

自定义 PostCSS 配置
Next.js使用 PostCSS 编译CSS。可以通过自定义postcss.config.js去配置。
使用Sass
在您可以使用 Next.js 的内置 Sass 支持之前，请务必安装sass：

npm install sass

2.2 静态资源

静态资源放置在 Next.js 项目根目录下的 public 文件夹下。
Docs: 静态文件服务

2.3 元数据

通过内置组件修改。

2.4 布局组件

根目录下新建 components 文件夹。在里面，新建一个名为 layout.js 文件。

3. 预渲染和数据获取

3.1 预渲染

默认情况下，Next.js 预渲染每个页面。这意味着 Next.js会提前为每个页面生成 HTML，而不是全部由客户端 JavaScript 完成。预渲染可以带来更好的性能和SEO。
“预渲染”与“无预渲染”：
在这里插入图片描述

3.2 两种形式预渲染：静态生成和服务端渲染

两种预渲染形式的区别：何时为页面生成HTML。

`	静态生成	服务端渲染
何时生成Html	构建时	请求时
适用场景	内容固定，不会频繁更新的页面	页面会显示频繁更新的数据时，或页面内容会随每个请求而改变时。
速度	更快（构建一次并存储在CDN服务上，比每次请求时生成 Html 要更快）	更慢（但预渲染的页面将始终是最新的）

在这里插入图片描述

注意：开发模式下，每个页面都是在请求时进行预渲染。即使使用静态生成也是如此！

3.3 “混合”Next.js应用程序

即 Next.js 允许在一个应用中，不同页面同时使用两种预渲染方式，如下图所示：
在这里插入图片描述

我们可以为大多数页面使用静态生成，部分其他页面使用服务端渲染。

3.4 静态生成

静态生成可以在有数据和没有数据的情况下完成。

静态生成——不带数据
当页面中不需要获取外部数据时，在生产构建时，会被自动静态生成。
带数据的静态生成
针对的场景：呈现HTML之前需要先获取数据。如，构建时访问文件系统、获取外部API、查询数据库。
Next.js 开箱即用的支持这种情况 —— 即带数据的静态生成。

3.5 getStaticProps 函数

在 Next.js 组件中，加上名为 getStaticProps 的 async 函数。

getStaticProps 会在生产构建时被执行。
在该函数里，可以获取外部数据，并将数据作为 props 发送给页面。

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

注意：

开发模式下， getStaticProps会自动改为在页面请求时运行。
getStaticProps 仅在服务端运行。它永远不会在客户端运行。甚至不会包含在浏览器的 JS 包中。
getStaticProps 只能从页面导出。不能从非页面文件中导出。

3.6 在请求时获取数据 —— 服务端渲染

getServerSizeProps
如你所见，getServerSideProps 类似于 getStaticProps，但两者的区别在于 getServerSideProps 在每次页面请求时都会运行，而在构建时不运行。
客户端渲染
可以选择，同一个页面中不需要获取外部数据的部分在构建时直接 “静态生成”。其他部分在浏览器加载时 JS 请求获取后渲染。
SWR
swr是一个 React 数据获取 hook。

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetch)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}