目錄
11. 自定義Head更加友好的SEO操作
import Head from 'next/head'
export default function Header() {
return (
<div>
<Head>
<title>今天星期四</title>
<meta charSet="utf-8"/>
</Head>
vivi.com
</div>
)
}
12. 在Next.js框架下AntDUI的使用
next.js 不支持 css import 支持style jsx
解決:
1.安裝@zeit/next-css
yarn add @zeit/next-css
2.在根目錄下創建next.config.js
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}
module.exports = withCss({})
3.安裝 antd
yarn add antd
4.安裝（按需加載）babel-plugin-import
yarn add babel-plugin-import
5.在根目錄下創建.babelrc並配置
{
"presets": ["next/babel"],
"plugins": [
[
"import",
{
"libraryName":"antd",
"style":"css"
}
]
]
}
import './vivi.css'
import {Button} from 'antd'
export default function Vivi() {
return (
<div>
<div>vivi.home</div>
<Button>我是按鈕</Button>
</div>
)
}
13. Next.js打包中的那些坑
1.yarn build 打包
2.css會報錯
3.按需引入去除，全局引入
{
"presets": ["next/babel"],
"plugins": [
[
"import",
{
"libraryName":"antd"
}
]
]
}
4.在pages目錄下創建_app.js,引入antd/dist/antd.css
import App from 'next/app'
import 'antd/dist/antd.css'
export default App
5.yarn build
6.yarn start