Next.js + TypeScript + Ant Design + Redux + Storybook：企业级项目脚手架搭建指南

2024-01-08 07:56:12

引言

在软件开发过程中，为了提高开发效率和代码质量，我们经常会使用脚手架来快速搭建项目。Next.js、TypeScript、Ant Design、Redux和Storybook都是非常流行的开源框架和工具，它们可以帮助我们构建健壮且可扩展的应用程序。本文将向您展示如何使用这些技术来构建一个企业级的脚手架，以便快速启动您的项目。

前提条件

在开始之前，您需要确保已经安装了以下软件：

Node.js 12或更高版本
npm或yarn包管理器
Next.js CLI
TypeScript
Ant Design
Redux
Storybook

项目初始化

首先，我们需要创建一个新的Next.js项目：

npx create-next-app my-app --typescript

接下来，我们需要安装必要的依赖项：

cd my-app
npm install --save antd redux react-redux storybook

配置项目

接下来，我们需要配置项目。首先，我们需要在项目根目录下创建一个.env.local文件，并添加以下内容：

NEXT_PUBLIC_API_URL=http://localhost:3000

接下来，我们需要在package.json文件中添加以下脚本：

{
  "scripts": {
    "storybook": "start-storybook -p 9001",
    "build-storybook": "build-storybook"
  }
}

添加Ant Design

接下来，我们需要添加Ant Design。首先，我们需要在package.json文件中添加以下依赖项：

{
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "antd": "^4.19.2"
  }
}

接下来，我们需要在src/styles/globals.css文件中添加以下内容：

@import "~antd/dist/antd.css";

添加Redux

接下来，我们需要添加Redux。首先，我们需要在package.json文件中添加以下依赖项：

{
  "dependencies": {
    "redux": "^4.1.2",
    "react-redux": "^8.0.2"
  }
}

接下来，我们需要在src/store/index.ts文件中创建Redux store：

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const composeEnhancers =
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunk))
);

export default store;

添加Storybook

接下来，我们需要添加Storybook。首先，我们需要在package.json文件中添加以下依赖项：

{
  "devDependencies": {
    "@storybook/addon-actions": "^6.5.6",
    "@storybook/addon-essentials": "^6.5.6",
    "@storybook/addon-links": "^6.5.6",
    "@storybook/react": "^6.5.6",
    "@storybook/testing-library": "^0.0.15"
  }
}

接下来，我们需要在.storybook/main.js文件中添加以下内容：

module.exports = {
  stories: ["../src/**/*.stories.tsx"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-actions"
  ],
  typescript: {
    check: true
  }
};