这篇文章主要使用Next进行前后端同构，解决前后端渲染的问题，主要流程如下图

这个项目主要通过Next.js提供同构渲染，Koa提供数据接口和服务端路由，Redis提供session存储.

项目搭建

通过官方提供的create-next-app快速搭建一个框架，在根目录下创建tsconfig.json,

yarn add --dev typescript @types/react @types/node

把pages，components下的文件后缀名改为tsx，

安装相关的包，运行yarn dev运行项目，会自动生成tsconfig.json内容。

yarn dev运行项目。

支持导入less

Next.js项目默认采用css-in-js的方式，如果要引入css或者less，需要在根目录创建next.config.js文件，

const withLess = require('@zeit/next-less')

const config = withLess(
 {
 lessLoaderOptions: {
 cssModules: true,
 javascriptEnabled: true,
 },
 }
);
module.exports = config;

使用Antd-Design

按照antd文档安装，若要使用按需加载，需要在根目录使用babel，

创建.babelrc文件

{
 "presets": [
 "next/babel"
 ],
 "plugins": [
 [
 "import",
 {
 "libraryName": "antd",
 "libraryDirectory": "lib"
 }
 ]
 ]
}

这里一定记得保留官方的next/babel，否则会有问题

Next.js的根组件是_app.js,现在开启Typescript，

所以是_App.tsx

在pages目录下新建个_app.tsx文件，代码如下

import App from 'next/app';
import 'antd/dist/antd.less'
export default App;

使用Koa+ts

因为官方提供的服务器太过简单无法扩展，所以这里使用Koa作为项目的服务器。

安装Koa2和Koa-router相关包

在根目录创建server.ts文件

import Koa from 'koa'; 

import next from 'next';
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
 const server = new Koa();
 server.use(async (ctx, next) => {
 await handle(ctx.req, ctx.res);
 ctx.respond = false;
 });
 server.listen(3000, () => {
 console.log("listening on 3000");
 })
})

安装运行ts文件的ts-node包

yarn add ts-node -D

由于语法编译问题，这里需要给ts-node指定ts的配置，

创建一个tsconfig2.json给ts-node使用

{
 "compilerOptions": {
 "lib": [
 "dom",
 "dom.iterable",
 "esnext"
 ],
 "sourceMap": true,
 "module": "commonjs",
 "target": "es2017",
 "noLib": false,
 "moduleResolution": "node",
 "skipLibCheck": true,
 "esModuleInterop": true
 },
 "exclude": [
 "node_modules"
 ],
 "include": [
 "next-env.d.ts",
 "**/*.ts",
 "server.ts" 

 ]
}

将package.json的相关"scripts"修改为

 "dev": "ts-node --project ./tsconfig2.json server.ts",

yarn dev 运行项目