React项目基于Next.js项目环境搭建

用create-next-app快速创建项目，create-next-app就是Next.js的脚手架工具，有了它可以直接一句命令就建立好项目目录和基本结构如果你没有使用过create-next-app,可以先进行全局安装，安装命令如下.

npm install -g create-next-app

安装完成后，进入你要建立项目的位置，使用npx来进行安装

npx create-next-app react_demo

输入后按回车，就会自动给我们进行安装项目需要的依赖，Next相关的命令也会添加好。完成后可以测试一下。输入以下：
cd react_demo
yarn dev
在浏览器中输入http://localhost:3000/,看到下面的内容，说明项目创建成功。

image.png

*接下来就是用yarn命令来安装@zeit/next-css包，它的主要功能就是让Next.js可以加载CSS文件，有了这个包才可以进行配置。

yarn add @zeit/next-css

包下载完成后，在项目根目录下，新建一个next.config.js文件。即Next.js的总配置文件。写入下面的代码:

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

if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withCss({})

按需加载第三方库或者ui组件，以Ant Dssign为例,用yarn来安装antd，在命令行里输入：

yarn add antd

然后再安装一下babel-plugin-import，命令如下：

yarn add babel-plugin-import

安装完成后，在项目根目录建立.babelrc文件，然后写入如下配置文件：

{
    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
                "libraryName":"antd"
            }
        ]
    ]
}

在pages目录下，新建一个_app.js文件，然后把CSS进行全局引入.

import App from 'next/app'
import 'antd/dist/antd.css'
export default App

这样Ant Design就可以按需引入了。然后在index.js加入一个按钮，看看是否可以正常使用,代码如下。如果能正常使用，我们的基本环境就已经建立完成了。

import React from 'react'
import Head from 'next/head'
import { Button } from 'antd'
const Home = () => (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>我是按钮</Button></div>
 </>
)
export default Home

整理如上，有需要的小伙伴就可以收藏一下，记录加以实践～～

React项目基于Next.js项目环境搭建

推荐阅读更多精彩内容