koa-nextjs
The main goal of this project is to allow developers to write user interfaces using React and serve them with server-side rendering (SSR) and then re-hydrate it in the browser.
Also enables hot-module replacement (HMR) because it uses Next.js under the scenes. It's possible to have full control over the Next.js settings.
Installation
Install this module and its peer-dependencies with:
yarn add koa-nextjs koa koa-router next react react-dom
Usage
Server-side
// index.js const path = ;const Koa = ;const RenderEngine = ; { const app = ; const engine = await RenderEnginestart // See: https://nextjs.org/docs#custom-server-and-routing options: dev: processenvNODE_ENV !== "production" quiet: true // `pages` directory should be inside /client dir: path conf: distDir: "build" // relative to `options.dir` useFileSystemPublicRoutes: false ; // engine.router is an instance of `koa-router` app; // See: https://github.com/koajs/koa/blob/master/docs/api/index.md#appcontext appcontextrender = engine; app} ;
Client-side
// client/pages/main/Home.js ;; // <-- don't forget this const Home = <div ...props> <h1>Hello</h1> <p> Name: <span>name</span> </p> <p> <a href="/about">Go to about</a> </p> </div>; Home; // <-- don't forget this
Example
See /example
for a complete example with styled-components.
Gotchas
-
Hot reloading will not work for server-side files. Use nodemon and make sure to only watch server files.
-
Do not use
import Link from "next/link"
neither any pre-fetching option. Stick with old-school anchor navigation:<a href="/other-route" />
License
MIT