How to Integrate Notion with V0

Notion uses internal integrations to grant API access to specific databases. You create an integration, get a token, and then explicitly share each database with that integration. Go to https://www.notion.so/my-integrations in your browser (you must be logged into Notion). Click 'New integration'. Give it a name like 'V0 Website' and select the Notion workspace that contains your content database. Choose 'Internal' as the integration type. Under 'Content Capabilities', ensure 'Read content' is checked (you can also add 'Update content' if you want to write back to Notion). Click 'Submit'. After creating the integration, you will see your Integration Token on the integration's page. It starts with 'secret_' followed by a long alphanumeric string. Copy this token — it is displayed once and you will need to regenerate it if you lose it. Now share your database with the integration. Open your Notion database in the browser. Click the '...' (ellipsis) menu in the top-right corner of the database. Scroll down and click 'Add connections'. Search for your integration name (e.g., 'V0 Website') and click to add it. A confirmation dialog will appear — click 'Confirm'. The database is now accessible via the API using your integration token. To find your Database ID, open the database in Notion and look at the URL. For a full-page database, the URL looks like https://www.notion.so/myworkspace/{DATABASE_ID}?v=... The 32-character string before the '?' is your Database ID. For inline databases, navigate to the database's full page view first. You can format the ID with hyphens (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) or without — both formats work with the SDK.

The official @notionhq/client package handles all the authentication, pagination, and API communication details for you. Add it to your project and configure environment variables. In your V0 project, open the code editor and add @notionhq/client to your package.json dependencies. If you are working locally, run npm install @notionhq/client. If you are editing in V0 directly, use the V0 prompt to ask it to add the package. Next, add your Notion credentials to Vercel. Open your Vercel Dashboard, navigate to your project, click 'Settings', and select 'Environment Variables'. Add: NOTION_TOKEN: Your integration token starting with 'secret_'. This is a secret — do not add NEXT_PUBLIC_ prefix. NOTION_DATABASE_ID: Your 32-character Database ID. If you have multiple databases for different content types (blog, FAQ, roadmap), add separate variables like NOTION_BLOG_DATABASE_ID and NOTION_FAQ_DATABASE_ID. Save and redeploy. Add the same variables to .env.local for local development.

1// lib/notion.ts
2import { Client } from '@notionhq/client';
3
4export const notion = new Client({
5  auth: process.env.NOTION_TOKEN,
6});
7
8// Helper to extract plain text from Notion rich text property
9export function getRichText(property: { rich_text: { plain_text: string }[] } | undefined): string {
10  return property?.rich_text?.map((t) => t.plain_text).join('') || '';
11}
12
13// Helper to extract text from Notion title property
14export function getTitle(property: { title: { plain_text: string }[] } | undefined): string {
15  return property?.title?.map((t) => t.plain_text).join('') || '';
16}
17
18// Helper to extract select value
19export function getSelect(property: { select: { name: string } | null } | undefined): string {
20  return property?.select?.name || '';
21}
22
23// Helper to extract date value
24export function getDate(property: { date: { start: string } | null } | undefined): string | null {
25  return property?.date?.start || null;
26}
27
28// Helper to extract files/media URLs
29export function getFileUrl(property: { files: { type: string; file?: { url: string }; external?: { url: string } }[] } | undefined): string | null {
30  const file = property?.files?.[0];
31  if (!file) return null;
32  return file.type === 'external' ? file.external?.url || null : file.file?.url || null;
33}

Create the Next.js API route that queries your Notion database and returns clean, component-ready JSON. The route uses the Notion SDK's databases.query() method which supports filtering, sorting, and pagination. Create app/api/notion/database/route.ts. The SDK's notion.databases.query() method takes a database_id and optional filter and sorts objects. Notion's filter syntax uses property-specific filter conditions nested under the property name and type. For a blog post database, you typically filter for posts where Status (a Select property) equals 'Published'. The filter object looks like: { property: 'Status', select: { equals: 'Published' } }. For date-based sorting, add sorts: [{ property: 'PublishDate', direction: 'descending' }]. The results from databases.query() are Notion Page objects. Each page has a properties object containing all your database columns as typed property objects. Your route should transform these into a flat, clean object using the helper functions from lib/notion.ts. This transformation is the most important part — the components you generate with V0 should not need to understand Notion's verbose property format. Notionhq's API returns a maximum of 100 pages per request. If you need more, use the has_more and next_cursor fields to implement pagination. For most websites, 100 items is sufficient for blog posts, FAQs, or roadmap items.

1import { NextResponse } from 'next/server';
2import { notion, getTitle, getRichText, getSelect, getDate, getFileUrl } from '@/lib/notion';
3import type { PageObjectResponse } from '@notionhq/client/build/src/api-endpoints';
4
5export async function GET() {
6  const databaseId = process.env.NOTION_DATABASE_ID;
7
8  if (!databaseId) {
9    return NextResponse.json(
10      { error: 'Notion database ID not configured' },
11      { status: 500 }
12    );
13  }
14
15  try {
16    const response = await notion.databases.query({
17      database_id: databaseId,
18      filter: {
19        property: 'Status',
20        select: {
21          equals: 'Published',
22        },
23      },
24      sorts: [
25        {
26          property: 'PublishDate',
27          direction: 'descending',
28        },
29      ],
30    });
31
32    const pages = response.results.filter(
33      (page): page is PageObjectResponse => page.object === 'page'
34    );
35
36    const posts = pages.map((page) => {
37      const props = page.properties as Record<string, unknown>;
38
39      return {
40        id: page.id,
41        // eslint-disable-next-line @typescript-eslint/no-explicit-any
42        title: getTitle(props['Title'] as any),
43        // eslint-disable-next-line @typescript-eslint/no-explicit-any
44        slug: getRichText(props['Slug'] as any) || page.id,
45        // eslint-disable-next-line @typescript-eslint/no-explicit-any
46        author: getRichText(props['Author'] as any),
47        // eslint-disable-next-line @typescript-eslint/no-explicit-any
48        publishDate: getDate(props['PublishDate'] as any),
49        // eslint-disable-next-line @typescript-eslint/no-explicit-any
50        category: getSelect(props['Category'] as any),
51        // eslint-disable-next-line @typescript-eslint/no-explicit-any
52        coverImageUrl: getFileUrl(props['CoverImage'] as any),
53        // eslint-disable-next-line @typescript-eslint/no-explicit-any
54        excerpt: getRichText(props['Excerpt'] as any),
55        notionUrl: page.url,
56        lastEdited: page.last_edited_time,
57      };
58    });
59
60    return NextResponse.json(
61      { posts, total: posts.length },
62      {
63        headers: {
64          // Cache for 5 minutes, allow stale while revalidating
65          'Cache-Control': 's-maxage=300, stale-while-revalidate=600',
66        },
67      }
68    );
69  } catch (error) {
70    console.error('Notion API query failed:', error);
71    return NextResponse.json(
72      { error: 'Failed to fetch content from Notion' },
73      { status: 500 }
74    );
75  }
76}

With clean data coming from the Notion API route, prompt V0 to generate the content listing and detail pages. The key is giving V0 the exact data shape returned by your API route so it generates components that handle your specific fields correctly. For a blog listing, describe the card layout, typography, and interactive elements. Tell V0 what to do with optional fields — for example, show a gradient placeholder if coverImageUrl is null, or hide the category badge if category is empty. For individual post pages, you will need a separate API route that fetches the page content (blocks) in addition to metadata. The Notion SDK's blocks.children.list() method retrieves the page body as an array of block objects (paragraphs, headings, images, etc.). Rendering Notion blocks as HTML requires handling each block type — use the notion-to-md or react-notion-x package to simplify this, or ask V0 to generate a block renderer for common types (paragraph, heading_1/2/3, bulleted_list_item, numbered_list_item, image). For simpler content like FAQs or feature lists where the content fits in database properties (not page body), you do not need block rendering — all the content comes from properties. Ask V0 to implement Next.js Static Site Generation (SSG) with revalidation for blog pages using async generateStaticParams() and route segment config export const revalidate = 300. This builds static pages at deploy time and regenerates them in the background every 5 minutes, giving you fast page loads with fresh content.

To display the full content of a Notion page (not just its database properties), create a route that fetches the page's block children. Notion stores page body content as a tree of block objects. Create app/api/notion/page/[id]/route.ts. Use notion.blocks.children.list({ block_id: id }) to retrieve all block objects for a page. Each block has a type and a corresponding property object containing the content. Common block types you will need to handle: paragraph, heading_1, heading_2, heading_3, bulleted_list_item, numbered_list_item, toggle, quote, code, image, divider, and callout. Each has a rich_text array for text content and type-specific properties (e.g., image blocks have a url). For a simpler approach, install the notion-to-md package (npm install notion-to-md) which converts Notion blocks to Markdown, which you can then render with a Markdown renderer like react-markdown. For teams using Notion as a CMS for high-traffic websites with many content editors, RapidDev can help set up a more robust architecture with proper caching, incremental static regeneration, and webhook-triggered rebuilds when Notion content changes.

1import { NextRequest, NextResponse } from 'next/server';
2import { notion } from '@/lib/notion';
3import type { BlockObjectResponse } from '@notionhq/client/build/src/api-endpoints';
4
5function blockToMarkdown(block: BlockObjectResponse): string {
6  const richText = (arr: { plain_text: string }[]) =>
7    arr.map((t) => t.plain_text).join('');
8
9  switch (block.type) {
10    case 'paragraph':
11      return richText(block.paragraph.rich_text) + '\n\n';
12    case 'heading_1':
13      return '# ' + richText(block.heading_1.rich_text) + '\n\n';
14    case 'heading_2':
15      return '## ' + richText(block.heading_2.rich_text) + '\n\n';
16    case 'heading_3':
17      return '### ' + richText(block.heading_3.rich_text) + '\n\n';
18    case 'bulleted_list_item':
19      return '- ' + richText(block.bulleted_list_item.rich_text) + '\n';
20    case 'numbered_list_item':
21      return '1. ' + richText(block.numbered_list_item.rich_text) + '\n';
22    case 'quote':
23      return '> ' + richText(block.quote.rich_text) + '\n\n';
24    case 'code':
25      return '```' + block.code.language + '\n' +
26        richText(block.code.rich_text) + '\n```\n\n';
27    case 'image': {
28      const url = block.image.type === 'external'
29        ? block.image.external.url
30        : block.image.file.url;
31      const caption = richText(block.image.caption);
32      return `![${caption}](${url})\n\n`;
33    }
34    case 'divider':
35      return '---\n\n';
36    default:
37      return '';
38  }
39}
40
41export async function GET(
42  _request: NextRequest,
43  { params }: { params: { id: string } }
44) {
45  const { id } = params;
46
47  if (!id) {
48    return NextResponse.json({ error: 'Page ID required' }, { status: 400 });
49  }
50
51  try {
52    const blocksResponse = await notion.blocks.children.list({
53      block_id: id,
54      page_size: 100,
55    });
56
57    const markdown = (blocksResponse.results as BlockObjectResponse[])
58      .map(blockToMarkdown)
59      .join('');
60
61    return NextResponse.json({ markdown, blockCount: blocksResponse.results.length });
62  } catch (error) {
63    console.error('Notion page fetch failed:', error);
64    return NextResponse.json(
65      { error: 'Failed to fetch page content' },
66      { status: 500 }
67    );
68  }
69}