這篇文章主要使用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 執行專案