Templates & Snippets

// app/<section>/page.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Page Title",
  description: "A short description of this page.",
};

export default function PageName() {
  return (
    <main className="mx-auto max-w-4xl px-4 py-12">
      <h1 className="text-3xl font-bold tracking-tight">Page Title</h1>
      <p className="mt-4 text-muted-foreground">Page content goes here.</p>
    </main>
  );
}

// app/api/<endpoint>/route.ts
import { NextRequest, NextResponse } from "next/server";

export async function GET(request: NextRequest) {
  // Fetch or compute data
  return NextResponse.json({ message: "ok" });
}

export async function POST(request: NextRequest) {
  const body = await request.json();
  // Process the request body
  return NextResponse.json({ received: body }, { status: 201 });
}

// components/<ComponentName>.tsx
interface ComponentNameProps {
  title: string;
  children: React.ReactNode;
}

export function ComponentName({ title, children }: ComponentNameProps) {
  return (
    <section className="rounded-lg border p-6">
      <h2 className="text-xl font-semibold">{title}</h2>
      <div className="mt-3 text-muted-foreground">{children}</div>
    </section>
  );
}

// convex/<resource>.ts
import { query } from "./_generated/server";
import { v } from "convex/values";

export const list = query({
  args: {},
  handler: async (ctx) => {
    return await ctx.db.query("tableName").order("desc").take(50);
  },
});

import { mutation } from "./_generated/server";
import { v } from "convex/values";

export const create = mutation({
  args: { name: v.string() },
  handler: async (ctx, args) => {
    return await ctx.db.insert("tableName", { name: args.name });
  },
});