📝 Table of Contents

• ❓ About
• ⬇️ Getting Started
  • Installing
• ✨ Usage
• 🔥 With Next.js
• ✅ Advantages
  • Want to help make this library even better?

❓ About

Next Axios makes it easy to create typesafe fullstack applications
 

⬇️ Getting Started

Installing

npm i axios axios-extended

or

yarn add axios axios-extended

✨ Usage

Add notes about how to use the system.

import AxiosExtended from 'axios-extended'

export type FeedAPI = {
    URL: "/api/feed"
    POST: {
        body: {
            limit:number
        }
        response: {
            message: string
        }
    }
    GET: {
        params: {
            limit: number
        },
        response: {
            message: string
        }
    }
}

export const APIClient = AxiosExtended<[FeedAPI]>()


// APIClient.post() // start typing and see the magic happen
// APIClient.get() // start typing and see the magic happen

🔥 With Next.js

// somefile.ts
export const API = createAPI<NextApiRequest,NextApiResponse>() 

// pages/api/feed
import {API} from '<route-to-somefile>'

export type FeedAPI = {
    URL: "/api/feed"
    POST: {
        body: {
            feedType:string,
            page:number
            subject:string
        }
        response: {
            message: string
        }
    }
    GET: {
        params: {
            limit: number
        },
        response: {
            message: string
        }
    }
}

export default API<FeedAPI>(async (req, res) => {
    try {
        if (req.method === "POST") {
            // body is fully typed!
            const { feedType, page, subject } = req.body
            res.status(200).json({message: feedType})
        }
    } catch (e) {
        console.error(e)
        res.status(500).json({ message: "Server Error" })
    }
})

// some-other-file.ts

//import *type* is very important!
import type {FeedAPI} from '<route-to-api/feed>'

// now use APIClient anywhere, if you need to add more endpoints just add them to the array!
export const APIClient = NextAxios<[
    FeedAPI,
    //... add more!
]>()

✅ Advantages

NextAxios makes it easier to maintain fullstack applications, specifically tailored for usage with Next.js but is cross platform.

• No more import types everywhere we fetch
• One source of truth
• Faster maintenance

Want to help make this library even better?

Join the conversation on Github!