Next.js Target

Compile KERN to Next.js App Router components — async server components, the metadata API, server-side data fetching, and file-based routing conventions.

What it generates

KERN input:

page name=Users route=/users
  metadata title="Users" description="User directory"
  fetch url=/api/users as=users

  col {gap:24,p:40}
    text value="Users" tag=h1 {fs:32,fw:800}
    each item=users as=user
      text value=user.name tag=p

Compiled output:

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Users',
  description: 'User directory',
};

export default async function UsersPage() {
  const users = await fetch('/api/users')
    .then((r) => r.json());

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: 40 }}>
      <h1 style={{ fontSize: 32, fontWeight: 800 }}>Users</h1>
      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

Target-specific nodes

These nodes are specific to the Next.js target and map directly to App Router conventions:

  • page — Root page node, emits a default-exported async server component
  • layout — Shared layout wrapper, emits layout.tsx
  • loading — Loading state placeholder, emits loading.tsx
  • error — Error boundary, emits error.tsx with use client
  • metadata — Static metadata export (title, description, openGraph)
  • generateMetadata — Dynamic metadata function from route params
  • fetch — Server-side data fetching with async/await
  • notFound — Triggers the Next.js notFound() helper
  • redirect — Server-side redirect via redirect()

Configuration

Next.js-specific options in kern.config.ts:

  • frameworkVersions.nextjs — Target Next.js version: 13, 14, or 15 (default: 15)
  • structure — Project structure convention: flat, bulletproof, atomic, or kern
import { defineConfig } from '@kernlang/cli';

export default defineConfig({
  target: 'nextjs',
  outdir: 'app/',
  frameworkVersions: { nextjs: '15' },
  structure: 'kern',
});

Quick start

kern dev app.kern --target=nextjs --outdir=app/