https://github.com/xinpianchang/next-koa
A koa middleware for next.js with some common tools
https://github.com/xinpianchang/next-koa
koa koa2 middleware next-koa nextjs
Last synced: about 1 month ago
JSON representation
A koa middleware for next.js with some common tools
- Host: GitHub
- URL: https://github.com/xinpianchang/next-koa
- Owner: xinpianchang
- License: mit
- Created: 2019-09-18T10:01:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-25T09:59:12.000Z (over 1 year ago)
- Last Synced: 2025-04-16T22:08:46.176Z (about 1 month ago)
- Topics: koa, koa2, middleware, next-koa, nextjs
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 13
- Watchers: 4
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Koa2 & Next.js hydration packages
[![NPM Version][npm-image]][npm-url]
# Usage
* Firstly setup a koa server entry
``` javascript
// server/index.js
const NextKoa = require('next-koa')
const Koa = require('koa')
const Router = require('koa2-router')
const path = require('path')
const app = new Koa()
const router = new Router()
const nextApp = NextKoa({
dev: process.env.NODE_ENV !== 'production',
dir: path.resolve(__dirname, '..')
})
// console nextConfig
console.log(nextApp.nextConfig)
app.use(nextApp.middleware)
app.use((ctx, next) => {
ctx.state.homepage = '/'
return next()
})
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 object
router.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 routes
app.listen(3000)
```
* Then write your own next.js pages
```jsx
// pages/about.tsx
import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import getInitialState from 'next-koa/getstate'
export default class AboutPage extends React.Component {
static async getInitialProps(ctx) {
// getInitalState fetches data both on client/server
const state = await getInitialState(ctx)
// { title: 'about us', homepage: '/' }
return state
}
render() {
return <>
{this.props.title}
Homepage
>
}
}
```
* If you want next.js layout feature, just like this
```jsx
// pages/_app.tsx
import App from 'next-koa/app'
export default class CustomApp extends App {
}
```
* in order to make `next-koa/app` being packed by webpack,\
we should use this plugin to include this module
```js
// next.config.js
const withNextKoaPlugin = require('next-koa/plugin')
module.exports = withNextKoaPlugin({
// ...config
})
```
* Now we can export a Layout
```tsx
// layout/index.tsx
import React from 'react'
import { withLayout } from 'next-koa/layout'
export default withLayout(({ children }: { children: React.ReactNode }) => {
return
{...}
{children}
})
```
* then we can use the layout above to decorate any pages
```tsx
// pages/index.tsx
import React from 'react'
import withCustomLayout from '../layout'
const IndexPage: React.FC = //...
export default withCustomLayout(IndexPage)
```
[npm-image]: https://img.shields.io/npm/v/next-koa.svg?style=flat-square
[npm-url]: https://npmjs.org/package/next-koa