一个可配置化的 Next.js 企业级 Web 端架构-JavaScript中文网-JavaScript教程资源分享门户

前言

随着互联网时代的加速发展，Web 端开发已经成为企业发展不可或缺的一部分。同时，随着项目规模和日益复杂的业务需求，传统的前端开发架构已经不能满足需求。

Next.js 作为一种 React 服务端渲染框架，极大地提高了 Web 应用渲染性能，并且带来了更好的开发体验。但是在实际开发中，我们还需要一个可配置化的企业级 Web 端架构来满足日益复杂的业务需求。

本文将介绍一个可配置化的 Next.js 企业级 Web 端架构，将会涉及到该框架的概述、架构原理、实现细节、以及如何在项目中使用该框架。本文的内容详细且有深度和学习以及指导意义，希望读者们能从中获益。

概述

该框架基于 Next.js 架构，结合业界最佳实践，提供了可配置化的开发体验，旨在帮助企业快速搭建 Web 项目框架并支持业务快速迭代。

该框架具有以下特点：

可配置化：可以通过配置文件轻松配置项目，包括路由、页面、Redux 状态管理、CSS 预处理、打包配置、服务器配置等。
组件化：采用组件化设计思想，可以让开发者根据业务需求定制组件，以及对已有组件进行优化。
扩展性：框架封装了许多丰富的插件，包括 Redux、Axios、Antd 等，可以轻松插件。
易于维护：使用最前沿的技术栈，包括 React、Next.js、ES6，代码规范化，易于维护。

架构原理

目录结构

一个 Next.js 项目大体上可以分为三个部分：pages、public、和 src。

// javascriptcn.com 代码示例
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package.json
├── pages
├── public
│   ├── favicon.ico
│   ├── images
│   ├── robots.txt
│   └── manifest.json
├── README.md
├── server
└── src
    ├── api
    ├── components
    ├── layouts
    ├── pages
    │   ├── dashboard
    │   └── login
    ├── store
    ├── styles
    ├── utils
    ├── App.js
    └── index.js

其中，pages 文件夹是 Next.js 的一部分，用于渲染页面，public 文件夹用于存储静态文件，src 文件夹则包含了整个项目的源代码。

api：API 相关代码
components：组件相关代码
layouts：布局相关代码
pages：页面相关代码
store：状态管理相关代码
styles：样式相关代码
utils：工具函数相关代码
App.js：入口组件
index.js：入口文件

技术栈

Next.js：React 服务端渲染框架，提供了简单的路由设置、代码拆分、预渲染等特性，使得应用更具有可扩展性。
React：是 Facebook 推出的 UI 库，用于构建用户界面。
Antd：是一个基于 React 构建的 UI 系统。
Redux：JavaScript 状态容器，提供可预测化的状态管理。

实现细节

路由配置

该框架使用了 Next.js 自带的路由配置功能。在 pages 文件夹下新建一个文件夹，文件夹名称即为路由名称。

例如，我们要添加一个新的路由 /about，则可以在 pages 文件夹下创建一个名为 about 的文件夹，在该文件夹下创建一个名为 index.js 的文件，即可完成路由配置。

pages/
  about/
    index.js

页面配置

该框架使用了 Antd 来提供丰富的 UI 组件，并且对 Antd 进行了配置化封装。

例如，在 src/pages/dashboard 文件夹下，需要创建一个名为 index.js 的文件，此时可以在 index.js 中使用 Antd 的组件。

// javascriptcn.com 代码示例
// 引入 Antd 组件
import { Button } from "antd";

// Dashboard 页面
const Dashboard = () => {
  return <Button type="primary" icon={<SearchOutlined />}>按钮</Button>;
};

export default Dashboard;

Redux 配置

该框架中的状态管理使用了 Redux。在 src/store 下，可以配置 Redux，并且将控制状态的代码和数据流引入到组件中。

例如，可以在 src/store 文件夹下的 index.js 文件中进行配置。

// javascriptcn.com 代码示例
import { createStore } from "redux";

// 初始 state 值
const defaultState = {
  count: 0,
};

// action 类型
const ADD = "ADD";

// reducer
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case ADD:
      return {
        ...state,
        count: state.count + action.payload,
      };
    default:
      return state;
  }
};

// 创建 store
const store = createStore(reducer);

export default store;

现在，在组件中使用此 store ，需要在组件中使用 useSelector 和 useDispatch 钩子。

// javascriptcn.com 代码示例
import { useSelector, useDispatch } from "react-redux";
import { Button } from "antd";

// Dashboard 页面
const Dashboard = () => {
  // 从 store 中获取 count 值
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  // 点击 +1 按钮时，修改 count 值
  const handleAddClick = () => {
    dispatch({
      type: "ADD",
      payload: 1,
    });
  };

  return (
    <>
      <div>{count}</div>
      <Button onClick={handleAddClick}>+1</Button>
    </>
  );
};

export default Dashboard;

使用

克隆项目到本地

可以通过 Git 在本地克隆此项目。

$ git clone https://github.com/example/example.git

安装依赖

在项目根目录下运行以下命令，安装项目所需的全部依赖：

$ npm install

开发环境

在项目根目录下运行以下命令，启动项目的开发模式：

$ npm run dev

然后，可以打开浏览器，访问 http://localhost:3000。

生产环境

在项目根目录下运行以下命令，构建生产的 Web 项目：

$ npm run build

部署

在构建生产应用后，可以在 Next.js 中运行以下命令来启动服务。

$ npm run start

您可以使用 now、Vercel 等工具将应用部署到服务器上。

总结

通过使用该框架，可以快速地搭建企业级 Web 端项目，并且方便地进行业务迭代。本文从概述、架构原理、实现细节、以及如何使用四个方面介绍了该框架，有深度和学习以及指导意义。虽然该框架只是一个开发者的思考和实践成果，但是它所提供的一些想法和实现细节可以启发我们思考如何构建更好的 Web 前端企业级框架。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654b32ec7d4982a6eb52112b