Catch the highlights of GraphQLConf 2023! Click for recordings. Or check out our recap blog post.
Integration & Deployment

Integration with Next.js

Next.js is a web framework that allows you to build websites very quickly and feTS can be integrated with Next.js easily as an API middleware.

You can also consume the router in type-safe way by inferring router types from the server side.


npm i fets


We recommend to use feTS as a main middleware for your API routes. In this case, you should create a [...slug].ts file under pages/api directory. Since your base route is /api, you should also configure swaggerUiEndpoint and oasEndpoint options as well.

import { createRouter, Response } from 'fets'
export default createRouter({
  swaggerUI: {
    endpoint: '/api/docs'
  openAPI: {
    endpoint: '/api/openapi.json'
  method: 'GET',
  path: '/api/greetings',
  schemas: {
    responses: {
      200: {
        type: 'object',
        properties: {
          message: {
            type: 'string'
        required: ['message'],
        additionalProperties: false
  handler: () => Response.json({ message: 'Hello World!' })

Type-safe client usage

Then on the client side, you can use the type-safe client.

import { createClient } from 'fets'
import type router from './api/[...slug]'
const client = createClient<typeof router>({})
export default function Home({ greetingsResponse }: Props) {
  const [message, setMessage] = useState('')
  useEffect(() => {
      .then(res => res.json())
      .then(res => setMessage(res.message))
      .catch(err => setMessage(`Error: ${err.message}`))
  }, [])
  return (
      <h1>Greetings Message from API: {greetingsResponse.message}</h1>

You can see the full example here.