Next.js开发环境快速搭建

本文的目的是为了记录快速搭建基础Next.js开发环境的步骤，没啥技术含量，初学Next.js的小伙伴拿走不谢。

安装create-next-app并创建项目

安装create-next-app

npm install -g npx
npm install -g create-next-app

创建项目

npx create-next-app next-demo

支持CSS文件

Next.js默认是不支持CSS外部文件的，可以通过安装@zeit/next-css包来支持

npm install --save @zeit/next-css

在项目根目录新建next.config.js文件，并添加以下配置

const withCss = require('@zeit/next-css')

module.exports = withCss({
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style\/css.*?/
      const origExternals = [...config.externals]
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback()
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback)
          } else {
            callback()
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ]

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      })
    }
    return config
  },
})

使用Ant Design UI

安装Ant Design UI组件

npm install --save antd

为了减少打包体积，最佳的方式是按需加载组件，为此需要安装babel-plugin-import

npm install --save babel-plugin-import

在项目根目录新建.babelrc文件，并添加以下配置

{
    "presets":["next/babel"], 
    "plugins":[ 
        [
            "import",
            {
                "libraryName":"antd",
                "style":"css"
            }
        ]
    ]
}

到此，基本的Next.js开发环境搭建完成，开始开发吧！

参考文章： with-ant-design