Skip to Content
Next-TS-API 1.0 is released 🎉
DocsGetting Started

Getting Started

This guide will help you set up Next-TS-API in your Next.js project.

Installation

Install Next-TS-API using your preferred package manager:

npm install next-ts-api

Setup

  1. Add the plugin to your next.config.js:
const { nextTsApi } = require('next-ts-api/config');
const withNextTsApi = nextTsApi();
 
const nextConfig = {
  // ... your other config
};
 
export default withNextTsApi(nextConfig);
  1. The plugin will automatically generate types for your API routes in a types/next-ts-api.ts file.

Basic Usage

1. Create an API Route

Create a new API route in your Next.js app:

// app/api/hello/route.ts
import { NextApiRequest } from 'next-ts-api';
 
export async function GET() {
  return Response.json({ message: 'Hello World!' });
}
 
export async function POST(request: NextApiRequest<{ name: string }>) {
  const body = await request.json();
  return Response.json({ message: `Hello ${body.name}!` });
}

2. Initialize the API Client

Create an API client instance:

// lib/api.ts
import { createNextFetchApi } from "next-ts-api";
import { type ApiRoutes } from "../types/next-ts-api";
 
export const api = createNextFetchApi<ApiRoutes>();

3. Make API Calls

Use the typed API client in your components:

// app/page.tsx
import { api } from '../lib/api';
 
export default async function Page() {
  // GET request
  const { message } = await api('hello', { method: 'GET' });
  
  // POST request with typed body
  const response = await api('hello', {
    method: 'POST',
    body: { name: 'John' }
  });
 
  const data = await response.json();
  
  return <div>{data.message}</div>;
}

Next Steps

Last updated on
IntroductionCore Concepts