Next API Router
Simple and intuitive configuration of Next.js' api routing.
Installation
$ npm install next-api-router
Running tests
$ npm test
Quick start
JavaScript
import NextApiRouter from 'next-api-router'
export default (req, res) => {
const Router = new NextApiRouter(req, res)
Router.get('/test', (req, res) => {
res.status(200).send(true)
})
return Router.routes()
}
TypeScript
import { NextApiRequest, NextApiResponse } from 'next'
import NextApiRouter from 'next-api-router'
export default (req: NextApiRequest, res: NextApiResponse) => {
const Router = new NextApiRouter(req, res)
Router.get('/test', (req, res) => {
res.status(200).send(true)
})
return Router.routes()
}
Possible HTTP methods
NextApiRouter.post(), NextApiRouter.get(), NextApiRouter.put(), NextApiRouter.delete()
Example
Client
import React, { useEffect } from 'react'
const App = () => {
useEffect(() => {
fetch('/api/apiUrlPath?apple=hello')
fetch('/api/apiUrlPath/world')
fetch('/api/apiUrlPath', {
method: 'post',
body: JSON.stringify({
banana: 'long'
})
})
}, [])
return (
<div>hello world</div>
)
}
export default App
Server
import NextApiRouter from 'next-api-router'
export default (req, res) => {
const Router = new NextApiRouter(req, res)
Router
.get('/apiUrlPath', (req, res) => {
const { apple } = req.query
console.log(apple)
res.status(200).send(true)
})
.get('/apiUrlPath/:orange', (req, res) => {
const { orange } = req.query
console.log(orange)
res.status(200).send(true)
})
.post('/apiUrlPath', (req, res) => {
const { banana } = JSON.parse(req.body)
console.log(banana)
res.status(200).send(true)
})
return Router.routes()
}
Other
- The first
/api path can be omitted
...
const Router = new NextApiRouter(req, res)
Router.get('/api/apiUrlPath', (req, res) => { ... })
...
...
const Router = new NextApiRouter(req, res)
Router.get('/apiUrlPath', (req, res) => { ... })
...
These two are the same
'slug' cannot be used as a key for query string.
...
const Router = new NextApiRouter(req, res)
Router.get('/api/apiUrlPath/:slug', (req, res) => { ... })
...
