// server/index.jsconstNextKoa=require('next-koa')constKoa=require('koa')constRouter=require('koa2-router')constpath=require('path')constapp=newKoa()constrouter=newRouter()constnextApp=NextKoa({dev: process.env.NODE_ENV!=='production',dir: path.resolve(__dirname,'..')})// console nextConfigconsole.log(nextApp.nextConfig)app.use(nextApp.middleware)app.use((ctx,next)=>{ctx.state.homepage='/'returnnext()})app.use(router)// using renderer of next.js to emit pages/about.tsx// the state can be captured by next-koa/getstate package// and is rendered as ctx.state merged by this data// here data usually is a plain objectrouter.get('/about',ctx=>ctx.render('about',{title: 'about us'}))// if nextConfig.useFileSystemPublicRoutes is missing or true// then you can get any page under `pages` by directly fetching// the pathname without defining the koa routesapp.listen(3000)
Then write your own next.js pages
// pages/about.tsximportReactfrom'react'importHeadfrom'next/head'importLinkfrom'next/link'importgetInitialStatefrom'next-koa/getstate'exportdefaultclassAboutPageextendsReact.Component{staticasyncgetInitialProps(ctx){// getInitalState fetches data both on client/serverconststate=awaitgetInitialState(ctx)// { title: 'about us', homepage: '/' }returnstate}render(){return<><Head><title>{this.props.title}</title></Head><Linkhref={this.props.homepage}><a>Homepage</a></Link></>}}
If you want next.js layout feature, just like this