手把手带你用next搭建一个react服务端渲染项目

一、项目搭建

1. 安装Next.js

npm install -g next

2. 创建项目

mkdir next-project
cd next-project
next init

3. 安装依赖

npm install --save antd react-redux redux next-redux-wrapper sass

4. 创建项目结构

├── pages
│   ├── index.js
│   ├── about.js
│   ├── contact.js
│   └── 404.js
├── components
│   ├── Header.js
│   ├── Footer.js
│   ├── Layout.js
│   └── Home.js
├── styles
│   ├── main.scss
│   ├── antd.scss
│   ├── variables.scss
│   ├── mixins.scss
│   └── reset.scss
├── store
│   ├── index.js
│   ├── actions.js
│   └── reducers.js
└── package.json

5. 配置Next.js

在next.config.js文件中添加以下配置：

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.alias['@components'] = path.resolve(__dirname, './components')
      config.resolve.alias['@styles'] = path.resolve(__dirname, './styles')
      config.resolve.alias['@store'] = path.resolve(__dirname, './store')
    }

    return config
  }
}

二、集成antd

1. 在package.json文件中添加以下依赖：

"antd": "^4.13.2"

2. 在styles/antd.scss文件中添加以下代码：

@import '~antd/dist/antd.min.css';

3. 在components/Header.js文件中添加以下代码：

import { Layout, Menu } from 'antd';

4. 在components/Layout.js文件中添加以下代码：

import { Header, Footer } from './components'

5. 在pages/index.js文件中添加以下代码：

import Layout from '../components/Layout'

三、集成redux

1. 在store/index.js文件中添加以下代码：

import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import reducer from './reducers'
import thunkMiddleware from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunkMiddleware)))

export default store

2. 在components/Layout.js文件中添加以下代码：

import { Provider } from 'react-redux'
import store from '../store'

3. 在pages/index.js文件中添加以下代码：

import { Provider } from 'react-redux'
import store from '../store'

四、集成样式解决方案

1. 在styles/main.scss文件中添加以下代码：

@import '~antd/dist/antd.min.css';
@import './antd.scss';
@import './variables.scss';
@import './mixins.scss';
@import './reset.scss';

2. 在pages/index.js文件中添加以下代码：

import '../styles/main.scss'

五、运行项目

npm run dev

六、总结

通过本文，我们详细介绍了如何使用Next.js搭建一个完善的React服务端渲染项目，包括集成antd、redux和样式解决方案。同时，还提供了一个完整的项目结构和详细的配置步骤，帮助开发者快速上手Next.js。