Next Coke API 👑

Typed communication between NextJS server/client.
Only 2kb to see magic happening.

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.