Next.js中使用antd组件

html-css022

Next.js中使用antd组件,第1张

Next.js中不能直接使用css，需要我们自行解决：

（1）需要安装 @zeit/next-css ： npm install --save @zeit/next-css

（2）安装成功，需要在根目录建立 next.config.js

(3)重启项目

（1）先安装Ant Design 库： npm install --save antd

（2）再安装babel-plugin-import： npm install --save babel-plugin-import

目的：只加载项目中用到的模块，这就需要我们用到一个 babel-plugin-import 文件，配置好了 .babelrc 就不会把Ant Design打包到生产环境。

（3）重启项目

（4）在需要的页面引入

Next.js中不能直接使用css，需要自己安装插件。

next.config.js

.babelrc

由于.babelrc文件 引入css语法会报错，所以在pages新建一个_app.js

在 Next.js 中，您可以使用响应式图像技术，即使用不同大小的图像文件适应不同的屏幕分辨率。

有两种常用的做法：

1. srcset 和 sizes 属性：您可以使用 srcset 和 sizes 属性为每种分辨率指定不同的图像文件。

<img

src={smallImage}

srcset={`${smallImage} 300w, ${mediumImage} 600w, ${largeImage} 900w`}

sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 900px"

alt="responsive image"

/>

2. 使用 JavaScript 和 CSS：您可以使用 JavaScript 和 CSS 检测屏幕大小，然后动态地更改图像的 src 属性。

import React, { useState, useEffect } from 'react'

const ResponsiveImage = () =>{

const [windowWidth, setWindowWidth] = useState(0)

const [src, setSrc] = useState(smallImage)

useEffect(() =>{

setWindowWidth(window.innerWidth)

}, [])

useEffect(() =>{

if (windowWidth >= 900) {

setSrc(largeImage)

} else if (windowWidth >= 600) {

setSrc(mediumImage)

} else {

setSrc(smallImage)

}

}, [windowWidth])

return (

<img src={src} alt="responsive image" />

)

}

您可以根据您的需求选择一种方法，或者结合两种方法使用。