Build a full backend with Next.js and Neon

import { bigint, boolean, pgTable, text, timestamp } from 'drizzle-orm/pg-core';

export const posts = pgTable('posts', {
  id: bigint('id', { mode: 'number' })
    .primaryKey()
    .generatedByDefaultAsIdentity(),
  author: text('author').notNull().default('anonymous'),
  content: text('content').notNull(),
  isPublished: boolean('is_published').notNull().default(false),
  createdAt: timestamp('created_at', { withTimezone: true })
    .notNull()
    .defaultNow(),
});

import { loadEnvConfig } from '@next/env';
import { defineConfig } from 'drizzle-kit';

loadEnvConfig(process.cwd());

export default defineConfig({
  schema: './lib/db/schema.ts',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
});

import { drizzle } from 'drizzle-orm/neon-http';
import { neon } from '@neondatabase/serverless';
import * as schema from './schema';

const sql = neon(process.env.DATABASE_URL!);
export const db = drizzle(sql, { schema });

import { db } from '@/lib/db/client';
import { posts } from '@/lib/db/schema';
import { desc, eq } from 'drizzle-orm';

export const dynamic = 'force-dynamic';

export default async function PostsPage() {
  const allPosts = await db
    .select()
    .from(posts)
    .where(eq(posts.isPublished, true))
    .orderBy(desc(posts.createdAt))
    .limit(10);

  return (
    <main className="p-8">
      <h1 className="mb-4 text-2xl font-bold">Published posts</h1>
      <ul className="space-y-2">
        {allPosts.map((post) => (
          <li key={post.id} className="rounded border p-3">
            <p>{post.content}</p>
            <p className="mt-1 text-xs text-gray-500">by {post.author}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

import { defineConfig } from '@neon/config/v1';

export default defineConfig({
  // branch policy omitted for brevity; keep the one from `neon config init`
  buckets: {
    images: { access: 'public_read' },
  },
});

'use server';

import { Files } from 'files-sdk';
import { neon } from 'files-sdk/neon';

const files = new Files({ adapter: neon({ bucket: 'images' }) });

export async function uploadImage(
  _prev: { error?: string; publicUrl?: string } | null,
  formData: FormData,
) {
  const file = formData.get('file') as File | null;
  if (!file) return { error: 'No file selected' };

  const bytes = new Uint8Array(await file.arrayBuffer());
  const key = `${Date.now()}-${file.name}`;

  await files.upload(key, bytes, { contentType: file.type });

  // The images bucket is public_read, so the object is served directly.
  const publicUrl = `${process.env.AWS_ENDPOINT_URL_S3}/images/${key}`;
  return { publicUrl };
}

'use client';

import { useActionState } from 'react';
import { uploadImage } from './actions';

export default function UploadPage() {
  const [state, formAction, isPending] = useActionState(uploadImage, null);

  return (
    <main className="p-8">
      <h1 className="mb-4 text-2xl font-bold">Upload an image</h1>
      <form action={formAction} className="mb-4">
        <input name="file" type="file" accept="image/*" required />
        <button
          type="submit"
          disabled={isPending}
          className="mt-3 rounded-md bg-indigo-500 px-3 py-1.5 text-sm font-semibold text-white disabled:opacity-50"
        >
          {isPending ? 'Uploading...' : 'Upload'}
        </button>
      </form>
      {state?.error && <p className="text-sm text-red-500">{state.error}</p>}
      {state?.publicUrl && (
        <p className="text-sm text-gray-500 break-all">Uploaded: {state.publicUrl}</p>
      )}
    </main>
  );
}

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { attachDatabasePool } from '@neon/functions';
import { Pool } from 'pg';
import { neon } from '@neon/ai-sdk-provider';
import { streamText, generateText, convertToModelMessages, tool, stepCountIs } from 'ai';
import { z } from 'zod';

// Reused across requests. Use a pooled pg client, not the serverless driver.
const pool = new Pool({ connectionString: process.env.DATABASE_URL, max: 5 });
// Keep an idle disconnect from crashing the isolate.
attachDatabasePool(pool);

const app = new Hono();

// The assistant is called from the browser, so allow cross-origin requests.
app.use('/*', cors());

// One-shot generation: create a post from a topic and save it.
app.post('/generate', async (c) => {
  const { topic, author = 'anonymous' } = await c.req.json();

  const { text } = await generateText({
    // Open-weight models are enabled by default. Frontier models (for example OpenAI GPT) need access requested in the Console first.
    model: neon('gpt-oss-20b'),
    prompt: `Write a 2 sentence post about the following topic. Just send the post content without any additional text: ${topic}`,
  });

  const { rows } = await pool.query(
    'insert into posts (author, content, is_published) values ($1, $2, true) returning *',
    [author, text],
  );

  return c.json(rows[0]);
});

// Streaming assistant: answers questions about the posts, using a tool that
// queries Postgres. The tool loop runs in-process on Neon compute.
app.post('/assistant', async (c) => {
  const { messages } = await c.req.json();

  const result = streamText({
    model: neon('meta-llama-3-3-70b-instruct'),
    system:
      "You are a helpful assistant that answers questions about the user's blog posts. Use the queryPosts tool to look them up.",
    messages: await convertToModelMessages(messages),
    tools: {
      queryPosts: tool({
        description: 'Fetch the most recent published posts from the database.',
        inputSchema: z.object({
          limit: z.number().default(10).describe('How many posts to fetch.'),
        }),
        execute: async ({ limit }) => {
          // Cast created_at to text: a raw Date in the tool result fails the AI SDK
          // message schema when the result is fed back to the model on the next step.
          const { rows } = await pool.query(
            'select author, content, created_at::text from posts where is_published = true order by created_at desc limit $1',
            [limit],
          );
          return rows;
        },
      }),
    },
    stopWhen: stepCountIs(5),
    // Disable telemetry: the function runtime's tracing conflicts with the
    // AI SDK's streaming spans.
    experimental_telemetry: { isEnabled: false },
  });

  return result.toUIMessageStreamResponse();
});

export default app;

import { defineConfig } from '@neon/config/v1';

export default defineConfig({
  // branch policy omitted for brevity; keep the one from `neon config init`
  aiGateway: true,
  buckets: {
    images: { access: 'public_read' },
  },
  functions: {
    posts: { name: 'posts assistant', source: './functions/posts.ts' },
  },
});

NEXT_PUBLIC_POSTS_FN_URL=https://<branch_id>-posts.compute.<cell>.us-east-2.aws.neon.tech/

'use server';

export async function generatePost(
  _prev: { error?: string; content?: string } | null,
  formData: FormData,
) {
  const topic = formData.get('topic') as string;

  const res = await fetch(`${process.env.NEXT_PUBLIC_POSTS_FN_URL}generate`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ topic, author: 'anonymous' }),
  });

  if (!res.ok) return { error: 'Generation failed' };
  const post = await res.json();
  return { content: post.content as string };
}

'use client';

import { useActionState } from 'react';
import { generatePost } from './actions';

export default function GeneratePage() {
  const [state, formAction, isPending] = useActionState(generatePost, null);

  return (
    <main className="p-8">
      <h1 className="mb-4 text-2xl font-bold">Generate a post</h1>
      <form action={formAction} className="mb-4 flex gap-2">
        <input name="topic" placeholder="Topic" required className="rounded border px-2 py-1" />
        <button
          type="submit"
          disabled={isPending}
          className="rounded-md bg-indigo-500 px-3 py-1.5 text-sm font-semibold text-white"
        >
          {isPending ? 'Generating...' : 'Generate'}
        </button>
      </form>
      {state?.error && <p className="text-sm text-red-500">{state.error}</p>}
      {state?.content && <p className="rounded border p-3">{state.content}</p>}
    </main>
  );
}

'use client';

import { useChat } from '@ai-sdk/react';
import { DefaultChatTransport } from 'ai';
import { useState } from 'react';

export default function AssistantPage() {
  const [input, setInput] = useState('');
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: `${process.env.NEXT_PUBLIC_POSTS_FN_URL}assistant`,
    }),
  });

  return (
    <main className="p-8">
      <h1 className="mb-4 text-2xl font-bold">Ask about your posts</h1>
      <div className="mb-4 space-y-2">
        {messages.map((m) => (
          <div key={m.id} className="rounded border p-3">
            <span className="font-medium">{m.role}: </span>
            {m.parts.map((p, i) => (p.type === 'text' ? <span key={i}>{p.text}</span> : null))}
          </div>
        ))}
      </div>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (input.trim()) {
            sendMessage({ text: input });
            setInput('');
          }
        }}
        className="flex gap-2"
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask about your posts"
          className="flex-1 rounded border px-2 py-1"
        />
        <button
          type="submit"
          disabled={status !== 'ready'}
          className="rounded-md bg-indigo-500 px-3 py-1.5 text-sm font-semibold text-white"
        >
          Send
        </button>
      </form>
    </main>
  );
}

// Schedule trigger: generate and publish a post. Reuses the pool and model above.
app.post('/daily', async (c) => {
  if (!c.req.header('x-neon-trigger-invocation-id')) return c.json({ error: 'not a trigger call' }, 403);

  const { text } = await generateText({
    model: neon('kimi-k3'),
    prompt: 'Write a 2 sentence post sharing a Postgres tip. Send only the post content.',
  });
  await pool.query(
    'insert into posts (author, content, is_published) values ($1, $2, true)',
    ['scheduler', text],
  );
  return c.json({ ok: true });
});

// Object-storage trigger: runs when an image is uploaded.
app.post('/on-upload', async (c) => {
  if (!c.req.header('x-neon-trigger-invocation-id')) return c.json({ error: 'not a trigger call' }, 403);

  const { data } = await c.req.json();
  console.log(`image uploaded: ${data.bucket_name}/${data.object_key}`);
  return c.json({ ok: true });
});

// add to your existing defineConfig({ ... })
triggers: {
  'daily-post': { type: 'schedule', function: 'posts', cron: '0 9 * * *', functionPath: '/daily' },
  'on-upload': { type: 'storage_object_created', function: 'posts', bucket: 'images', functionPath: '/on-upload' },
},