How to Integrate TYPO3 with V0

Before you can fetch TYPO3 content from a Next.js frontend, you need to enable TYPO3's headless API capability. The EXT:headless extension transforms TYPO3 from a traditional server-rendered CMS into a headless API provider that outputs structured JSON instead of HTML. Install EXT:headless via TYPO3's Extension Manager or via Composer. In the TYPO3 backend, navigate to Admin Tools → Extension Manager → Get Extensions and search for 'headless'. Click Install. Alternatively, if your TYPO3 is Composer-managed, run `composer require friendsoftypo3/headless` in your TYPO3 root directory. After installation, you need to configure EXT:headless in your TYPO3 TypoScript template. Navigate to Web → Template in the TYPO3 backend, select your root page, and open the TypoScript editor. Add the static include for EXT:headless: go to Edit the whole template record → Includes → Include static (from extensions) and add 'Headless (headless)'. To test that the headless API is working, append `?type=834` to your TYPO3 site URL in the browser. If EXT:headless is correctly configured, you will see a JSON response instead of your normal HTML website. The response structure includes a `meta` object with page metadata, a `content` array with the page's content elements, and a `navigation` array with the site's page tree. This JSON endpoint is what your Next.js API route will consume. Note the base URL of your TYPO3 installation — you will need it in the next step when configuring the Vercel environment variable.

With TYPO3's headless API confirmed working, switch to V0 to generate the React components that will display this content. You are building the visual layer — V0 does not need to know anything about TYPO3 at this stage. Describe the page layout and content structure you want based on the types of content your TYPO3 site manages. In the V0 chat panel, write a prompt describing the content display component. For a content page, you typically need: a page title and metadata area, a body content renderer that handles rich text, optional image sections, and a navigation sidebar or breadcrumb. V0 will generate a React component with appropriate props. After V0 generates the component, review the preview. The key thing to check is whether the component structure maps well to what TYPO3's headless API will return. TYPO3 content elements are structured as objects with `type`, `id`, `content`, and custom field properties. Your React component will need to iterate over the content array and render each element based on its type. If the layout looks good but the data structure does not quite match, you can either refine the V0 prompt to match TYPO3's output format, or plan to add a data transformation step in your API route that reshapes TYPO3's response into the props format your component expects. The latter approach is often cleaner. Once satisfied with the V0 preview, push the project to GitHub using V0's Git panel.

Now create the Next.js API route that acts as a proxy between your React frontend and the TYPO3 headless API. This route fetches content from TYPO3, transforms the response into a clean JSON format your React component can use, and returns it. Running this on the server (in an API route) means your TYPO3 base URL and any authentication headers are never exposed to the browser. Create the file `app/api/typo3/route.ts`. The route accepts a `pageId` query parameter (or a `slug` parameter if your TYPO3 uses slug-based routing), constructs the TYPO3 API URL using the base URL from your environment variable, fetches the content, transforms it, and returns the result. The transformation step is important because TYPO3's EXT:headless response is quite verbose — it includes rendering hints, FlexForm data, and TYPO3-specific metadata that your React component does not need. Stripping this down to only the fields your component uses reduces response size and keeps the component decoupled from TYPO3's internal structure. For content elements, TYPO3 headless returns each content element as an object with a `type` field (like `text`, `textpic`, `image`, `bullets`) and element-specific content fields. Your transformation maps these to the block types your React component understands. This is also where you handle differences between TYPO3 versions — the transformation layer absorbs TYPO3 API changes without breaking your frontend.

1// app/api/typo3/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const TYPO3_API_URL = process.env.TYPO3_API_URL;
5// e.g., "https://your-typo3-site.com"
6
7interface Typo3ContentElement {
8  type: string;
9  id: number;
10  content: {
11    header?: string;
12    bodytext?: string;
13    media?: Array<{ publicUrl: string; properties: { title: string; alternative: string } }>;
14  };
15}
16
17interface Typo3HeadlessResponse {
18  meta: {
19    title: string;
20    subtitle: string;
21    description: string;
22    breadcrumb: Array<{ title: string; link: string }>;
23  };
24  content: {
25    colPos0: Typo3ContentElement[];
26    [key: string]: Typo3ContentElement[];
27  };
28  navigation: Array<{ title: string; link: string; children?: unknown[] }>;
29}
30
31function transformContent(elements: Typo3ContentElement[]) {
32  return elements.map((el) => ({
33    id: el.id,
34    type: el.type,
35    header: el.content?.header ?? '',
36    body: el.content?.bodytext ?? '',
37    images: (el.content?.media ?? []).map((m) => ({
38      url: m.publicUrl,
39      alt: m.properties?.alternative ?? '',
40      caption: m.properties?.title ?? '',
41    })),
42  }));
43}
44
45export async function GET(request: NextRequest) {
46  const { searchParams } = new URL(request.url);
47  const pageId = searchParams.get('pageId') ?? '1';
48
49  if (!TYPO3_API_URL) {
50    return NextResponse.json(
51      { error: 'TYPO3_API_URL environment variable is not set' },
52      { status: 500 }
53    );
54  }
55
56  try {
57    const typo3Url = `${TYPO3_API_URL}/?type=834&id=${pageId}`;
58
59    const response = await fetch(typo3Url, {
60      headers: {
61        Accept: 'application/json',
62        // Add Authorization header if your TYPO3 requires API auth:
63        // Authorization: `Bearer ${process.env.TYPO3_API_TOKEN}`,
64      },
65      // Cache TYPO3 responses for 60 seconds at the Next.js layer
66      next: { revalidate: 60 },
67    });
68
69    if (!response.ok) {
70      throw new Error(`TYPO3 API returned ${response.status}`);
71    }
72
73    const data: Typo3HeadlessResponse = await response.json();
74
75    // Transform TYPO3's response into a clean format
76    const transformed = {
77      meta: {
78        title: data.meta?.title ?? '',
79        subtitle: data.meta?.subtitle ?? '',
80        description: data.meta?.description ?? '',
81        breadcrumb: data.meta?.breadcrumb ?? [],
82      },
83      blocks: transformContent(data.content?.colPos0 ?? []),
84      navigation: data.navigation ?? [],
85    };
86
87    return NextResponse.json(transformed);
88  } catch (error) {
89    console.error('TYPO3 API error:', error);
90    return NextResponse.json(
91      { error: 'Failed to fetch content from TYPO3' },
92      { status: 500 }
93    );
94  }
95}

Your TYPO3 installation's base URL must be stored as a server-only environment variable in Vercel Dashboard. This prevents the TYPO3 URL from being exposed in the browser's network requests, which is especially important if your TYPO3 is on a private network or has authentication requirements. Go to your Vercel Dashboard at vercel.com. Select your project and navigate to Settings → Environment Variables. Click Add New. Add **TYPO3_API_URL** with the value being the base URL of your TYPO3 installation, without a trailing slash. For example: `https://cms.yourcompany.com`. Make sure this is the publicly accessible URL that your Vercel serverless functions can reach over the internet. If your TYPO3 is on a private corporate network, you will need to either expose it via a secure tunnel or use Vercel's edge network features to route traffic. If your TYPO3 requires API token authentication (for private content), also add **TYPO3_API_TOKEN** with the bearer token value. In your API route, uncomment the Authorization header line in the fetch options. Set the environment scope for both variables to at least 'Production'. For staging/development, you can point to a TYPO3 staging instance by adding a separate value for the 'Preview' environment scope. For local development, create a `.env.local` file in the project root with `TYPO3_API_URL=https://your-typo3-staging.com`. Make sure `.env.local` is in your `.gitignore` file — your Next.js project from V0 should already have this configured correctly.

1# .env.local (never commit to git)
2TYPO3_API_URL=https://your-typo3-site.com
3# Optional: only if your TYPO3 requires API authentication
4TYPO3_API_TOKEN=your_api_bearer_token_here

The final step is connecting your V0-generated React component to the TYPO3 API route. Clone your GitHub repository locally (or use V0's Dev Mode), and update the content page component to fetch from `/api/typo3?pageId=1` and pass the response data as props to your content renderer. For a page-based site, you will typically create a dynamic Next.js page at `app/[slug]/page.tsx` that extracts the slug from the URL, maps it to a TYPO3 page ID (either from a hardcoded map or by fetching TYPO3's navigation tree), and fetches the content. For a simpler setup, start with a static page ID to verify the connection works before adding dynamic routing. Update the component to use React's `fetch` in a Server Component (or `useEffect` in a Client Component) to call your API route. Map the `blocks` array from the API response to the block renderer in your component. Test locally by running `npm run dev` — visiting `localhost:3000` should show your TYPO3 content rendered through the React component. Once you have confirmed the local integration works correctly, commit and push to GitHub. Vercel will deploy automatically. Check the Vercel deployment logs for any errors — common issues at this stage are network connectivity to TYPO3 (check if your TYPO3 server allows connections from Vercel's IP ranges) and JSON parsing errors if TYPO3's API response format differs from what your transformation expects. For complex TYPO3 setups with custom content elements or the EXT:news extension, RapidDev's team can help map TYPO3's content element structure to React component props for a complete headless implementation.

1// app/page.tsx (simplified Server Component example)
2import { ContentPage } from './components/content-page';
3
4async function getTypo3Content(pageId: string) {
5  // In production, use your full Vercel URL
6  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL ?? 'http://localhost:3000';
7  const res = await fetch(`${baseUrl}/api/typo3?pageId=${pageId}`, {
8    next: { revalidate: 60 },
9  });
10  if (!res.ok) throw new Error('Failed to fetch TYPO3 content');
11  return res.json();
12}
13
14export default async function Home() {
15  const content = await getTypo3Content('1');
16
17  return (
18    <ContentPage
19      title={content.meta.title}
20      subtitle={content.meta.subtitle}
21      breadcrumb={content.meta.breadcrumb}
22      blocks={content.blocks}
23      navigation={content.navigation}
24    />
25  );
26}