Next.js 入门 (3)

目录

11. 自定义Head更加友好的SEO操作

12. 在Next.js框架下AntDUI的使用

13. Next.js打包中的那些坑

---

 

11. 自定义Head更加友好的SEO操作

---

import Head from 'next/head'
export default function Header() {
    return (
        

            
               
                       
            
           vivi.com
        
    )
}

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 (
        

            
vivi.home
            我是按钮
        
    )
}

 

 

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