next-coke-api
v1.0.21
Published
Typed communication between NextJS server/client.
Downloads
9
Maintainers
Readme
Demo
Description
- This package provides simple methods to develop client/server communication using NextJS.
- Next has a huge potential, but the communication can be tricky for starters, that's why we exist.
- Coke works by creating a proxy from the server routes and abstracting its methods with "client-ready" functionality.
- It does not use a custom server, we use the default 'pages' file system, allowing next to preserve optimizations.
Features
- 🛰️ Dynamic communication with the server made easy.
- 🚯 No duplicated typings between server and client.
- ✍️ Scalable for any type of authentication method.
- 🚀 Extremely lightweight and ultra-flexible API.
- ✅ REST methods are also supported.
Examples
- coke-minimal
- coke-chakra-ui
- coke-firebase-auth - add config to
.env.local
Installation
npm i next-coke-api
You need to structure your api
folder to use the [...route].ts
slug
📂 pages
├─📂 api
│ └─📄 [...route].ts
├─📄 _app.tsx
├─📄 _document.tsx
├─📄 index.tsx
If you need to change this structure, make sure you specify a
customUrl
in the client options.
Usage
Server
// define API methods
const routes = {
getName: async (body) => {
return "your name is " + body.name
}
}
// export types to the client
export type AppRoutes = typeof routes
// export nextCokeHandler
export default function handler(req, res) {
return nextCokeHandler(req, res, routes)
}
Client
// define coke client
const { coke } = nextCokeClient<AppRoutes>()
// call API methods
coke.getName({ name: "John" }).then((res) => {
console.log(res)
})
Using REST
Server
// define REST methods
const routes = {
users: {
POST: async (req, res) => {
return "You created a user. Congratulations " + req.body.name
}
}
}
// export types to the client
export type AppRoutes = typeof routes
// export nextCokeHandler with last arg as TRUE
export default function handler(req, res) {
return nextCokeHandler(req, res, routes, true)
}
Client
// define coke client with isREST = true
const { coke } = nextCokeClient<AppRoutes>({ isREST: true })
// call REST methods
coke.users.POST({ name: "John" }).then((res) => {
console.log(res)
})
Using Authorization Tokens
You can check out a complete example using Firebase Authentication in the examples folder of this repository.
Firebase example requires your project config in the
.env.local
file.
Server
// define API methods
const routes = {
getName: async (body) => {
return "your name is " + body.name
}
}
// export types to the client
export type AppRoutes = typeof routes
export default function handler(req, res) {
// check firebase authentication
// this is only an example, please validate the user token with your authentication provider methods)
if (!req.headers.authorization) {
return res.status(500).send({ message: 'NO-AUTHENTICATION' })
}
// return coke handler
return nextCokeHandler(req, res, routes)
}
Client
// define coke client
// here we export useCoke instead of coke, because it allows an authorization token to be used
const { useCoke } = nextCokeClient<AppRoutes>()
const coke = useCoke("YOUR-AUTHORIZATION-TOKEN-HERE")
// call API methods
coke.getName({ name: "John" }).then((res) => {
console.log(res)
})
TODO
- Support full headers instead of authorization only.
- Create more examples.