API Routes

Manic isn't just a frontend framework—it's a fullstack powerhouse natively integrated with Hono. This allows you to build lightning-fast, type-safe API endpoints directly within your project.

Creating an Endpoints

Any subdirectory in app/api/ that contains an index.ts file becomes an API endpoint. Manic bundles these endpoints into independent JavaScript chunks during build time, ensuring optimal performance for serverless environments.

// app/api/users/index.ts
import {  } from 'hono';

const  = new ();

.('/', () => {
  return .({ : ['Alice', 'Bob'] });
});

.('/', async () => {
  const  = await ..();
  // ... create user logic
  return .({ : true }, 201);
});

export default ;

Route Parameters

API routes support the same dynamic parameter syntax as page routes.

// app/api/users/[id]/index.ts
import {  } from 'hono';

const  = new ();

.('/', () => {
  const  = ..('id');
  return .({  });
});

export default ;

Request & Response

Hono's context object (c) provides a clean API for handling requests and responses:

import {  } from 'hono';

const  = new ();

.('/user/:id', () => {
  const  = ..('id');
  const  = ..('name');
  
  return .({ ,  }, 200, {
    'X-Custom-Header': 'value'
  });
});

export default ;

Middleware

Apply middleware to API routes using Hono's middleware system:

import {  } from 'hono';

const  = new ();

.('*', async (, ) => {
  .('Request received');
  await ();
});

.('/protected', () => {
  return .({ : 'This is protected' });
});

export default ;

Type-Safe API Clients

Use Hono's client for type-safe API calls from the browser:

// app/api/users/index.ts
import {  } from 'hono';

const  = new ();
.('/', () => .({ : [] }));
export type  = typeof ;

// client.ts
import {  } from 'hono/client';

const  = <>('/api') as any;
const  = await .users.$get();
const  = await .json();

API Routes

API Routes

Creating an Endpoints

Route Parameters

Request & Response

Middleware

Type-Safe API Clients

See Also

On this page