Eggjs配合Nextjs使用-优快云博客

本文链接：https://blog.youkuaiyun.com/ZQD666/article/details/102934687

本文介绍了如何将Eggjs与Nextjs结合使用，详细步骤包括：使用Nextjs搭建项目结构，安装并启动Eggjs服务，配置路由，连接并操作MySQL数据库，创建API接口，解决跨域问题。通过示例展示了从数据库获取数据，接口返回值，前端页面请求数据并展示的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- Eggjs-Nextjs

Eggjs-Nextjs

先使用Nextjs的脚手架搭建整体架构

这里使用
```
npx create-next-app my-next-app
```

安装egg.js

我们先进入到项目的根文件夹中(与创建的package.json同级)，然后在根文件夹下，建立一个service的文件夹，这就是中台的文件夹了。
推荐直接使用脚手架，只需几条简单指令，即可快速生成项目（npm >=6.1.0）
cd到根目录下的service目录，在下面输入命令
```
npm init egg --type=simple
```
初始化后需要安装包
```
npm install
```
安装后即可启动服务，注意是在service目录下
```
npm run dev
```

路由配置

与koa的路由配置基本相同

让egg为前端提供Api接口，实现中台主要的功能；这里使用restful-api接口设计

在controller控制器中，eggjs默认给我们一个示例home.js

创建eggjs的项目之后都会有home.js
在controller中写我们逻辑代码可以写service

'use strict';

const Controller = require('egg').Controller;

class HomeController extends Controller {
     
  async index() {
     
    const {
      ctx } = this;
    ctx.body = 'hi, egg';
  }
}
module.exports = HomeController;

在router.js中配置路由

也是框架提供给我们的

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
     
  const {
      router, controller } = app;
  router.get('/', controller.home.index);
};

可以看出：框架在加载router.js中路由，会去找controller下对应的找对应的文件夹/文件，找问价中对应的方法；当然配置路由时需要指定每个路由对应的方法
可以启动egg服务后通过修改ctx.body的值可以看到不同的返回值，那个即是我们在访问接口的时候的返回值

为了让router.js只是为了暴露配置，在app文件夹下面创建router文件夹

├─controller
│  ├─client
│  └─server
├─public
└─router
│  ├─client.js
│  └─server.js
 ─router.js

可在router/client.js中配置访问的路由

'use strict';
/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
       
  const {
        router, controller } = app;
  router.get('/client/getList', controller