How to Integrate Bolt.new with Notion

1// lib/notion.ts
2const NOTION_BASE_URL = 'https://api.notion.com/v1';
3const NOTION_VERSION = '2022-06-28';
4
5function getHeaders() {
6  const token = process.env.NOTION_TOKEN;
7  if (!token) throw new Error('NOTION_TOKEN must be set in .env');
8
9  return {
10    Authorization: `Bearer ${token}`,
11    'Notion-Version': NOTION_VERSION,
12    'Content-Type': 'application/json',
13  };
14}
15
16export async function notionGet<T = unknown>(path: string): Promise<T> {
17  const response = await fetch(`${NOTION_BASE_URL}${path}`, {
18    headers: getHeaders(),
19  });
20  if (!response.ok) {
21    const err = await response.json().catch(() => ({})) as { message?: string };
22    throw new Error(err.message || `Notion API error: ${response.status}`);
23  }
24  return response.json() as Promise<T>;
25}
26
27export async function notionPost<T = unknown>(path: string, body?: unknown): Promise<T> {
28  const response = await fetch(`${NOTION_BASE_URL}${path}`, {
29    method: 'POST',
30    headers: getHeaders(),
31    body: body ? JSON.stringify(body) : undefined,
32  });
33  if (!response.ok) {
34    const err = await response.json().catch(() => ({})) as { message?: string };
35    throw new Error(err.message || `Notion API error: ${response.status}`);
36  }
37  return response.json() as Promise<T>;
38}
39
40export async function notionPatch<T = unknown>(path: string, body: unknown): Promise<T> {
41  const response = await fetch(`${NOTION_BASE_URL}${path}`, {
42    method: 'PATCH',
43    headers: getHeaders(),
44    body: JSON.stringify(body),
45  });
46  if (!response.ok) {
47    const err = await response.json().catch(() => ({})) as { message?: string };
48    throw new Error(err.message || `Notion API error: ${response.status}`);
49  }
50  return response.json() as Promise<T>;
51}

1// app/api/notion/database/route.ts
2import { NextResponse } from 'next/server';
3import { notionPost } from '@/lib/notion';
4
5type NotionPropertyValue =
6  | { type: 'title'; title: Array<{ plain_text: string }> }
7  | { type: 'rich_text'; rich_text: Array<{ plain_text: string }> }
8  | { type: 'select'; select: { name: string; color: string } | null }
9  | { type: 'multi_select'; multi_select: Array<{ name: string }> }
10  | { type: 'date'; date: { start: string; end: string | null } | null }
11  | { type: 'checkbox'; checkbox: boolean }
12  | { type: 'number'; number: number | null }
13  | { type: 'url'; url: string | null }
14  | { type: 'email'; email: string | null };
15
16function extractProperty(value: NotionPropertyValue): string | boolean | number | null {
17  if (!value) return null;
18  switch (value.type) {
19    case 'title': return value.title.map(t => t.plain_text).join('');
20    case 'rich_text': return value.rich_text.map(t => t.plain_text).join('');
21    case 'select': return value.select?.name ?? null;
22    case 'multi_select': return value.multi_select.map(s => s.name).join(', ');
23    case 'date': return value.date?.start ?? null;
24    case 'checkbox': return value.checkbox;
25    case 'number': return value.number;
26    case 'url': return value.url;
27    case 'email': return value.email;
28    default: return null;
29  }
30}
31
32const cache = new Map<string, { data: unknown; expiresAt: number }>();
33
34export async function GET(request: Request) {
35  const { searchParams } = new URL(request.url);
36  const databaseId = searchParams.get('databaseId') || process.env.NOTION_DATABASE_ID;
37  const sortProperty = searchParams.get('sortProperty');
38  const sortDirection = searchParams.get('sortDirection') || 'descending';
39
40  if (!databaseId) {
41    return NextResponse.json({ error: 'databaseId is required' }, { status: 400 });
42  }
43
44  const cacheKey = `${databaseId}-${sortProperty}-${sortDirection}`;
45  const cached = cache.get(cacheKey);
46  if (cached && Date.now() < cached.expiresAt) {
47    return NextResponse.json(cached.data);
48  }
49
50  try {
51    const body: Record<string, unknown> = {};
52    if (sortProperty) {
53      body.sorts = [{ property: sortProperty, direction: sortDirection }];
54    }
55
56    const data = await notionPost<{ results: Array<{ id: string; properties: Record<string, NotionPropertyValue> }>; has_more: boolean }>(
57      `/databases/${databaseId}/query`,
58      body
59    );
60
61    const items = data.results.map((page) => ({
62      id: page.id,
63      ...Object.fromEntries(
64        Object.entries(page.properties).map(([key, val]) => [key, extractProperty(val)])
65      ),
66    }));
67
68    const result = { items, total: items.length };
69    cache.set(cacheKey, { data: result, expiresAt: Date.now() + 60_000 });
70    return NextResponse.json(result);
71  } catch (err) {
72    const message = err instanceof Error ? err.message : 'Failed to query Notion database';
73    return NextResponse.json({ error: message }, { status: 500 });
74  }
75}

1// app/api/notion/page/[id]/route.ts
2import { NextResponse } from 'next/server';
3import { notionGet } from '@/lib/notion';
4
5interface RichText {
6  plain_text: string;
7  annotations: { bold: boolean; italic: boolean; code: boolean; strikethrough: boolean };
8  href: string | null;
9}
10
11function richTextToHtml(richText: RichText[]): string {
12  return richText
13    .map((t) => {
14      let text = t.plain_text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
15      if (t.annotations.code) text = `<code>${text}</code>`;
16      if (t.annotations.bold) text = `<strong>${text}</strong>`;
17      if (t.annotations.italic) text = `<em>${text}</em>`;
18      if (t.annotations.strikethrough) text = `<del>${text}</del>`;
19      if (t.href) text = `<a href="${t.href}">${text}</a>`;
20      return text;
21    })
22    .join('');
23}
24
25type Block = {
26  type: string;
27  id: string;
28  has_children: boolean;
29  [key: string]: unknown;
30};
31
32function blockToHtml(block: Block): string {
33  const type = block.type;
34  const data = block[type] as Record<string, unknown>;
35  const rt = (data?.rich_text as RichText[]) || [];
36  const text = richTextToHtml(rt);
37
38  switch (type) {
39    case 'paragraph': return `<p>${text || '&nbsp;'}</p>`;
40    case 'heading_1': return `<h1>${text}</h1>`;
41    case 'heading_2': return `<h2>${text}</h2>`;
42    case 'heading_3': return `<h3>${text}</h3>`;
43    case 'bulleted_list_item': return `<li>${text}</li>`;
44    case 'numbered_list_item': return `<li>${text}</li>`;
45    case 'code': {
46      const lang = (data?.language as string) || 'text';
47      return `<pre><code class="language-${lang}">${(data?.rich_text as RichText[]).map(t => t.plain_text).join('')}</code></pre>`;
48    }
49    case 'image': {
50      const imgData = data as { type: string; file?: { url: string }; external?: { url: string } };
51      const url = imgData.type === 'external' ? imgData.external?.url : imgData.file?.url;
52      return `<img src="${url}" alt="" style="max-width:100%" />`;
53    }
54    case 'callout': return `<div class="callout">${text}</div>`;
55    case 'quote': return `<blockquote>${text}</blockquote>`;
56    case 'divider': return '<hr />';
57    case 'to_do': {
58      const checked = (data?.checked as boolean) ? 'checked' : '';
59      return `<label><input type="checkbox" ${checked} disabled /> ${text}</label>`;
60    }
61    default: return text ? `<p>${text}</p>` : '';
62  }
63}
64
65export async function GET(
66  _request: Request,
67  { params }: { params: { id: string } }
68) {
69  try {
70    const [pageData, blocksData] = await Promise.all([
71      notionGet<{ properties: Record<string, { title?: Array<{ plain_text: string }> }> }>(`/pages/${params.id}`),
72      notionGet<{ results: Block[] }>(`/blocks/${params.id}/children`),
73    ]);
74
75    const titleProp = Object.values(pageData.properties).find(p => p.title);
76    const title = titleProp?.title?.map(t => t.plain_text).join('') || 'Untitled';
77
78    const blocks = blocksData.results;
79    let html = '';
80    let inUl = false;
81    let inOl = false;
82
83    for (const block of blocks) {
84      if (block.type === 'bulleted_list_item') {
85        if (!inUl) { html += '<ul>'; inUl = true; }
86        html += blockToHtml(block);
87      } else {
88        if (inUl) { html += '</ul>'; inUl = false; }
89        if (block.type === 'numbered_list_item') {
90          if (!inOl) { html += '<ol>'; inOl = true; }
91          html += blockToHtml(block);
92        } else {
93          if (inOl) { html += '</ol>'; inOl = false; }
94          html += blockToHtml(block);
95        }
96      }
97    }
98    if (inUl) html += '</ul>';
99    if (inOl) html += '</ol>';
100
101    return NextResponse.json({ title, html });
102  } catch (err) {
103    const message = err instanceof Error ? err.message : 'Failed to fetch page';
104    return NextResponse.json({ error: message }, { status: 500 });
105  }
106}

1// app/api/notion/create/route.ts
2import { NextResponse } from 'next/server';
3import { notionPost } from '@/lib/notion';
4
5interface CreatePageBody {
6  title: string;
7  status?: string;
8  priority?: string;
9  notes?: string;
10  dueDate?: string;
11}
12
13export async function POST(request: Request) {
14  const body = await request.json() as CreatePageBody;
15  const databaseId = process.env.NOTION_DATABASE_ID;
16
17  if (!databaseId) {
18    return NextResponse.json({ error: 'NOTION_DATABASE_ID is not configured' }, { status: 500 });
19  }
20
21  if (!body.title?.trim()) {
22    return NextResponse.json({ error: 'title is required' }, { status: 400 });
23  }
24
25  const properties: Record<string, unknown> = {
26    Name: {
27      title: [{ text: { content: body.title } }],
28    },
29  };
30
31  if (body.status) {
32    properties.Status = { select: { name: body.status } };
33  }
34  if (body.priority) {
35    properties.Priority = { select: { name: body.priority } };
36  }
37  if (body.dueDate) {
38    properties['Due Date'] = { date: { start: body.dueDate } };
39  }
40
41  const pageBody: Record<string, unknown> = {
42    parent: { database_id: databaseId },
43    properties,
44  };
45
46  if (body.notes?.trim()) {
47    pageBody.children = [
48      {
49        object: 'block',
50        type: 'paragraph',
51        paragraph: {
52          rich_text: [{ type: 'text', text: { content: body.notes } }],
53        },
54      },
55    ];
56  }
57
58  try {
59    const page = await notionPost<{ id: string; url: string }>('/pages', pageBody);
60    return NextResponse.json({ success: true, id: page.id, url: page.url });
61  } catch (err) {
62    const message = err instanceof Error ? err.message : 'Failed to create page';
63    return NextResponse.json({ error: message }, { status: 500 });
64  }
65}