Home App Docs Blog Github

Custom component not showing up

I have implemented Builder in my nextJs codebase and now I am trying to add custom components to it. Unfortunately I am not able to register my components to get uploaded to the builder editor.

import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next';
import { useRouter } from 'next/router';
import { BuilderComponent, Builder, builder } from '@builder.io/react';
import DefaultErrorPage from 'next/error';
import Head from 'next/head';

const BUILDER_API_KEY = 'my_key';
builder.init(BUILDER_API_KEY);

import 'components/shared/NavBar';

// tells you what paths are being built
export async function getStaticProps({ params }: GetStaticPropsContext<{ page: string[] }>) {
	const page =
		(await builder
			.get('page', {
				userAttributes: {
					urlPath: '/' + (params?.page?.join('/') || ''),
				},
			})
			.toPromise()) || null;

	return {
		props: {
			page,
		},
		// Next.js will attempt to re-generate the page:
		// - When a request comes in
		// - At most once every 5 seconds
		revalidate: true,
	};
}

// returns a list
export async function getStaticPaths() {
	const pages = await builder.getAll('page', {
		options: { noTargeting: true },
		omit: 'data.blocks',
	});

	return {
		paths: pages.map((page) => `${page.data?.url}`),
		fallback: true,
	};
}

// React Component
export default function Page({ page }: InferGetStaticPropsType<typeof getStaticProps>) {
	const router = useRouter();
	if (router.isFallback) {
		return <h1>Loading...</h1>;
	}
	const isLive = !Builder.isEditing && !Builder.isPreviewing;
	if (!page && isLive) {
		return (
			<>
				<Head>
					<meta name="robots" content="noindex" />
					<meta name="title"></meta>
				</Head>
				<DefaultErrorPage statusCode={404} />
			</>
		);
	}

	return (
		<>
			<Head>
				<meta name="viewport" content="width=device-width, initial-scale=1" />
			</Head>

			<BuilderComponent model="page" content={page} />
		</>
	);
}

import { Builder } from '@builder.io/react';
import React from 'react';
import { NavBarLink, NavBarLinkProps } from './NavBarLink';

interface NavBarProps {
	links: NavBarLinkProps[];
}

export const NavBar: React.FunctionComponent<NavBarProps> = (props) => {
	const { links } = props;
	return (
		<nav className="w-full bg-black">
			{links.map((x) => (
				<NavBarLink key={x.link} text={x.text} link={x.link} />
			))}
		</nav>
	);
};

Builder.registerComponent(NavBar, {
	name: 'NavBar Coded',
	inputs: [
		{
			name: 'links',
			type: 'list',
			subFields: [
				{ name: 'text', type: 'string' },
				{ name: 'link', type: 'string' },
			],
		},
	],
});

Does anybody may have a suggestion how to tackle this problem?

Hello Niko, thank you for your patience. Did you replace the API key with your own? If so and you’re still having trouble are there any console errors or additional details you could share? I can also help you look into this further if you share a code sandbox and a link to your builder content page.