10、Next.js 开发全解析：样式、组件与渲染策略

Next.js 开发全解析：样式、组件与渲染策略

1. 样式管理

1.1 全局样式

全局样式会影响应用的所有页面。在渲染 hello.tsx 文件时可以发现，即使没有添加任何样式信息，页面也会使用 CSS。实际上，全局样式就是普通的 CSS 文件，在构建过程中不会被修改，类名也保证不变，因此可以在整个应用中作为普通的 CSS 类使用。

要使用全局样式，需要在应用的入口文件 pages/_app.tsx 中导入 CSS 文件，示例代码如下：

import "@/styles/globals.css";

你可以调整导入样式的文件名和位置，也可以导入多个文件。可以通过在 global.css 文件中添加一些样式，并在 hello.tsx 文件的 HTML 元素中添加一些普通的 CSS 类来进行尝试，然后访问 http://localhost:3000/hello 页面查看变化。

1.2 组件样式

对于独立的可复用组件，全局样式不是最佳选择，因为需要跟踪在各个组件中已经使用的名称，而且导入之前项目的组件时，可能会出现 CSS 类名冲突的问题。为了高效地处理模块化组件，需要将 CSS 类作用域限定到各个模块。

Next.js 允许使用在构建过程中进行作用域限定的 CSS 模块，这些模块遵循 <component>.modul