Simple and intuitive configuration of Next.js' api routing.
$ npm install next-api-router
$ npm test
// /pages/api/[...slug].js (or /src/pages/api/[...slug].js)
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()
}
// /pages/api/[...slug].ts (or /src/pages/api/[...slug].ts)
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()
}
NextApiRouter.post()
, NextApiRouter.get()
, NextApiRouter.put()
, NextApiRouter.delete()
import React, { useEffect } from 'react'
const App = () => {
useEffect(() => {
// First request
fetch('/api/apiUrlPath?apple=hello')
// Second request
fetch('/api/apiUrlPath/world')
// Third request
fetch('/api/apiUrlPath', {
method: 'post',
body: JSON.stringify({
banana: 'long'
})
})
}, [])
return (
<div>hello world</div>
)
}
export default App
// /pages/api/[...slug].js (or /src/pages/api/[...slug].js)
import NextApiRouter from 'next-api-router'
export default (req, res) => {
const Router = new NextApiRouter(req, res)
Router
// First response processing
.get('/apiUrlPath', (req, res) => {
const { apple } = req.query
console.log(apple)
// hello
res.status(200).send(true)
})
// Second response processing
.get('/apiUrlPath/:orange', (req, res) => {
const { orange } = req.query
console.log(orange)
// world
res.status(200).send(true)
})
// Third response processing
.post('/apiUrlPath', (req, res) => {
const { banana } = JSON.parse(req.body)
console.log(banana)
// long
res.status(200).send(true)
})
return Router.routes()
}
- The first
/api
path can be omitted
// /pages/api/[...slug].js (or /src/pages/api/[...slug].js)
...
const Router = new NextApiRouter(req, res)
Router.get('/api/apiUrlPath', (req, res) => { ... })
...
// /pages/api/[...slug].js (or /src/pages/api/[...slug].js)
...
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.
// /pages/api/[...slug].js (or /src/pages/api/[...slug].js)
...
const Router = new NextApiRouter(req, res)
Router.get('/api/apiUrlPath/:slug', (req, res) => { ... })
// error
...