github地址：github完整代码
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 (
test
)
}
上述这些准备工作做好了，最最难的复杂的一点来了，我们如何来用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