React 服务端渲染（Next.js）

项目前端基础开发环境搭建

使用create-next-app 快速创建项目

create-next-app 就是 Next.js 的脚手架工具 ，使用它就可以创建出一系列基本结构

1. 全局安装

npm install  -g create-next-app

2. 使用npx来创建项目的位置

npx create-next-app xxx

3. 使用 yarn dev 运行测试一下

相关配置

• 让 Next 支持 CSS 文件
  使用 yarn 安装 @zeit/next-css 包，让 Next 可以加载 CSS 文件，

yarn add @zeit/next-css

在项目目录下 ，新建一个 next.config.js 文件。

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

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

module.exports = withCss({})

• 按需加载 Ant Design
  使用 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 = () => (
  <>
    
      
    
    
我是按钮
 
)

export default Home

接下来就可以写相关业务代码了，这里使用 a 标签进行跳转，这里要跟之前SPA单页面进行区分开来。