@mikata/kit

Kit is the meta-framework layer: file-based routing, loaders for server-side data fetching, SSR, SSG, and adapters for Node and edge runtimes. One Vite plugin wires it all together.

File-based routing

Any .tsx/.jsx/.mdx file under src/routes/ becomes a route. Dynamic segments are written as [id].tsx; catch-alls as [...rest].tsx; nested _layout.tsx files wrap their subtree.

src/routes/
  index.tsx            → /
  about.tsx            → /about
  users/
    _layout.tsx        → layout wrapping /users/*
    index.tsx          → /users
    [id].tsx           → /users/:id
  api/
    ping.ts            → /api/ping (API route)
  404.tsx              → not-found fallback

Loaders

A route can export a load() function that runs on the server for the initial request and on the client for subsequent navigations. Its return value is made available via useLoaderData().

// src/routes/users/[id].tsx
import { useLoaderData, type LoadContext } from '@mikata/kit/loader';

export async function load({ params }: LoadContext) {
  const user = await db.users.find(params.id);
  return { user };
}

export default function UserPage() {
  const data = useLoaderData<typeof load>();
  return <h1>{data().user.name}</h1>;
}

SSR and SSG

Server-render in dev and production with no extra setup - kit's Vite plugin installs the SSR middleware. Set prerender: true to emit static HTML at build time for every discoverable route; the output in dist/static/ is ready for GitHub Pages, Netlify, Cloudflare Pages, or any static host.

import { defineConfig } from 'vite';
import mikata from '@mikata/compiler';
import { mikataKit } from '@mikata/kit';

export default defineConfig({
  plugins: [
    mikata(),
    // Set prerender: true to emit static HTML during build.
    mikataKit({ prerender: true }),
  ],
});

For parametric routes, export getStaticPaths() so the prerenderer knows which concrete URLs to render.

// src/routes/posts/[slug].tsx
export async function getStaticPaths() {
  const posts = await fs.readdir('content/posts');
  return posts.map((file) => ({
    params: { slug: file.replace(/\.md$/, '') },
  }));
}

export async function load({ params }: LoadContext) {
  return { post: await fs.readFile(`content/posts/${params.slug}.md`, 'utf8') };
}

export default function Post() { /* ... */ }

This site

This documentation site is a Mikata app. It's prerendered to static HTML, deployed to GitHub Pages, and hydrates to a live app on the client. The playground widgets on the @mikata/ui pages are interactive islands that wake up on load.