四、clsx library 库

简介

• 这个库实际上与 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 的预渲染和数据获取