Reference documents: jspang.com/detailed?id…

1: Set up the next development environment

npx create-next-app blog
Copy the code

2: Enter the blog directory

cd blog
Copy the code

3: Use YARN test

yarn dev
Copy the code

If you can enter the following interface, it shows that the first three steps have been successful!

4: Make next support CSS files

yarn add @zeit/next-css
Copy the code

5: Load ANTD on demand

yarn add antd 
yarn add babel-plugin-import
Copy the code

6: Create the _app.js file in the pages directory and write the following contents

import App from 'next/app'

import 'antd/dist/antd.css'

export default App
Copy the code

7: Introduce Button components

import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
const Home = () = > (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>I am a button</Button></div>
 </>
)

export default Home
Copy the code

8: test the implementation effect

If the following effect appears, the foreground environment is successfully built!