简介
- 这个库实际上与 Next.js 无关，这里整合记录
类库安装
- yarn add clsx
用法
- 举例来说创建一个 Alter 组件，这个组件接收一个传入变量，来改变提示信息的颜色，如果是 success 显示为绿色，error 为红色。
- 建立
components/alert.js
import styles from './alert.module.css';
import { clsx } from 'clsx';
export default function Alert({ children, type }) {
return (
<div
className={clsx({
[styles.success]: type === 'success',
[styles.error]: type === 'error',
})}
>
{children}
</div>
);
}
- 建立
alert.module.css
.success {
color: green;
}
.error {
color: red;
}
- 使用用例：
<div>
<Alert type='success'>
<p>Amazing!!!</p>
</Alert>
<Alert type='error'>
<p>Amazing!!!</p>
</Alert>
</div>
-
截图：
image.png
结束
- 接下来介绍 next.js 的预渲染和数据获取
