Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Registering Custom Components on Next.js

See original GitHub issue

Describe the bug I followed the documentation for registering custom components on Next.js. I applied all requirements but can’t see the component under the Custom Components section in the editor.

I created a new project with create-next-app, but the issue still exists.

I initialized an example next.js project with Builder.io. You check the custom component under /components/Heading/Heading.tsx on https://github.com/buraksakalli/builderio-registering-component.

To Reproduce Steps to reproduce the behavior:

Follow the documentation for registering custom component implementation -> https://www.builder.io/c/docs/custom-components-setup
When you apply all the requirements in the document, you should see the component in the editor, but you won’t.

Expected behavior Components should be listed in the editor.

Screenshots Screen Shot 2022-08-23 at 9 50 24 PM

Issue Analytics

State:
Created a year ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

buraksakallicommented, Aug 23, 2022

It’s clear. Thanks for helping, @samijaber.

1reaction

samijabercommented, Aug 23, 2022

yes, if the preview link is a default one like https://preview.builder.codes?model=page&previewing=true then it will not point to your codebase/site. Therefore it has no idea what custom components you have.

You either have to:

deploy your app to a real server/website, and point to that
point to your localhost

Top Results From Across the Web

Create Custom Components in Storyblok and Next.js

In this short tutorial, we will see how to start making our own components and extend the existing ones with Next.js and Storyblok....

Next.js 11 - User Registration and Login Tutorial with Example ...

In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) application with ......

Authoring Custom Elements in a Next.js App - Fatih Kalifa

Authoring Custom Elements in a Next.js App ... Loader component is responsible for registering custom elements, as well as loading the code ...

Create a new component in a JSS Next.js app using the code ...

Open a new terminal tab/window. · In the application's root directory, in the file sitecore/definitions/components/MyComponent. · In the file src/ ...

How to register components in Aframe using Nextjs?

import type { NextPage } from 'next'; import React, { useEffect, useState } from 'react'; import { Scene, Box, Sky, Entity, Assets }...