The purpose of this article is to record the steps to quickly build a basic Next. Js development environment, no technical content, beginners to Next.

Install create-next-app and create the project

Install the create – next – app

npm install -g npx
npm install -g create-next-app
Copy the code

Create a project

npx create-next-app next-demo
Copy the code

Support CSS files

Next. Js does not support CSS external files by default, this can be done by installing the @zeit/ Next-CSS package

npm install --save @zeit/next-css
Copy the code

Create a new next-config.js file in the project root directory and add the following configuration

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
  },
})
Copy the code

Use the Ant Design UI

Install the Ant Design UI component

npm install --save antd
Copy the code

To reduce packaging volume, the best way is to load components on demand, for which you need to install babel-plugin-import

npm install --save babel-plugin-import
Copy the code

Create a new. Babelrc file in the project root directory and add the following configuration

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

At this point, the basic setup of the Next. Js development environment is complete, and start developing!

Reference article: with-ant-Design