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!