四、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 (
    

      {children}
    
  );
}

• 建立alert.module.css

.success {
    color: green;
}
.error {
    color: red;
}

• 使用用例：

          
            
Amazing!!!
          
          
            
Amazing!!!
          
        

• 截图：

  
  
  image.png

结束

• 接下来介绍 next.js 的预渲染和数据获取