创建一个egg.js + next.js的应用

egg 初始化

首先全局安装egg-init命令，在本地新建文件夹，进入文件夹执行初始化命令。

npm install egg-init -g
mkdir eggNext && cd eggNext
egg-init --type=simple
npm install
npm run dev

初始化目录关键结构如下所示

+ app
   + controller
      |- home.js
    router.js
+ config
    |-config.default.js
    |-plugin.js

app目录就是egg服务的项目项目，其中router文件用以指定path对应的处理函数，controller中就是path相关的处理函数。
可以看到在router中把/路径指向了controller中home文件来进行处理。
后续启动next项目时，就需要在这里增加路径

module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};

config用以存放相关的配置文件, 完整配置应该是有如下环境的区分的，默认生成的项目目录里只有config.default.js。后续我们也会增加配置配置文件来对next进行一些配置。

+ config
|- config.default.js
|- config.prod.js
`- config.local.js

next 初始化

全局安装next react react-dom

npm install next react react-dom --save

egg + next

我们不采用next自带的启动方式，而是采用egg.js启动next的方式。
参考next文档中自定义服务器中的demo，

// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
 createServer((req, res) => {
   // Be sure to pass `true` as the second argument to `url.parse`.
   // This tells it to parse the query portion of the URL.
   const parsedUrl = parse(req.url, true)
   const { pathname, query } = parsedUrl

   if (pathname === '/a') {
     app.render(req, res, '/b', query)
   } else if (pathname === '/b') {
     app.render(req, res, '/a', query)
   } else {
     handle(req, res, parsedUrl)
   }
 }).listen(3000, err => {
   if (err) throw err
   console.log('> Ready on http://localhost:3000')
 })
})

虽然服务端不是采用的egg.js的方式，但是我们可以提取出自定义服务器启动next最关键的部分。

const next = require('next');
app = next(config);
app.render(req, res, '/path', query);

传入config参数对next进行配置，可配置参数如下，

config参数.png
使用render函数来渲染对应的页面。/path对应1中dir next项目下的pages里的路径。

根据以上分析，我们进行如下操作

我们在 app的config下，创建config.local.js，config.beta.js， config.prod.js，增加如下配置，后续用来配置next参数。

module.exports = appInfo => {
  const config = {};
  config.next = {
    dev: true,    // config.prod.js中设置为false
    dir: './ssr',
  };
  return {
    ...config,
  };
};

创建srr/pages/index.js，这就是我们的next的页面啦

// ssr/pages/index.js
export default function Home() {
    return (
      <div>
        test
      </div>
    )
  }

上述这些准备工作做好了，最最难的复杂的一点来了，我们如何来用egg启动next项目呢。

首先我们通过extend/application.js将next扩展到app上，在app目录下新建extend/application.js 【 egg.js extend参考文档】，之后你在app目录下通过app.next就可以访问到我们配置好的next了～

'use strict';
const Next = require('next');
const NEXT = Symbol('Application#next');
module.exports = {
  get next() {
    if (!this[NEXT]) {
      this[NEXT] = Next(this.config.next);
    }
    return this[NEXT];
  },
};

在router、controller里建立路径的的处理函数，使用app.next.render来渲染next的页面

// router.js
router.get('/ssr/*', controller.ssr.index);
// controller/ssr.js
const Controller = require('egg').Controller;

class SSRController extends Controller {
  async index() {
    const { ctx, app } = this;
    // ctx.body = 'hi, egg';
    const { req, res } = ctx;
    ctx.body = await app.next.render(req, res, '/');
  }
}
module.exports = SSRController;

满心欢喜启动....结果报了如下错误。😢

error.png

我们重新回到next的自定义服务器启动的demo。可以看出，启动服务器是在next准备好了之后，才会启动服务，而我们项目里是没有等到next加载好服务就已经启动，导致资源加载可能存在问题。

// demo
app.prepare().then(() => {
  createServer(() => {})
})

大刀阔斧进行再来改进！egg虽然帮我们把启动都封装好了，但是我们也可以进行自定义启动，我们在项目目录下建立app.js，写入以下代码，保证next prepare成功后再启动服务【egg自启动】

// app.js
'use strict';
module.exports = app => {
  // NOTE: 这里一定要等next prepare好再启动服务
  app.next.prepare().then(() => {
    app.beforeStart(() => {
      process.on('unhandledRejection', (reason, p) => {
      });
      process.on('uncaughtException', reason => {
      });
    });
  });
};

很好，我们再启动一次！这次页面没有报错，只是空白，打开控制台，发现请求了很多js资源，都没有找到。

error2.png

可以看到这些js资源全部都是_next目录下的，而我们的项目里没有处理_next路径。

error3.png

其实是next在启动的时候会在ssr项目目录下生成.next目录，回到demo，next里其实是handle这些_next请求的方法的，当请求路径不满足其他指定路径时，会把路径交给handle来处理。

const handle = app.getRequestHandler()
else {
  handle(req, res, parsedUrl)
}

根据这个，我们增加一个中间件，让路由先通过handle函数处理一下。
1 在app目录下增加middleware文件夹，新建ssr.js

'use strict';
const { parse } = require('url');
module.exports = (options, app) => async (ctx, next) => {
 const { path, req, res } = ctx;
 if (/\/_next\//.test(path)) {
   const parsedUrl = parse(req.url, true);
   ctx.status = 200;
   if (/\.js$/.test(path)) {
     ctx.set('Content-Type', 'application/javascript');
   }
   if (/\.css$/.test(path)) {
     ctx.set('Content-Type', 'text/css');
   }
   const handle = app.next.getRequestHandler();
   await handle(req, res, parsedUrl);
 }
 await next();
}

在config.default.js里增加中间件配置

  config.middleware = ['ssr'];

再次启动项目~ 成功啦～～

image.png