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.

I am having the same issue. Did this ever get resolved? If so, do you mind sharing your solution?

Hi @hlopez if you share your code and a link to your builder content page I can help you look into it. The code above seems valid. I’ve noticed that often times when users don’t see their custom component in the menu and everything else is working fine it is because the preview URL needs to be updated to your local dev server (e.g. localhost:3000) or the domain where your app is deployed. Let me know if that helps!

Thank you so much @ancheetah, that solved the issue.

1 Like