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 You check the custom component under /components/Heading/Heading.tsx on

To Reproduce Steps to reproduce the behavior:

  1. Follow the documentation for registering custom component implementation ->
  2. 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:closed
  • Created a year ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

buraksakallicommented, Aug 23, 2022

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

samijabercommented, Aug 23, 2022

yes, if the preview link is a default one like 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
Read more comments on GitHub >

github_iconTop 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....
Read more >
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 ......
Read more >
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 ...
Read more >
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/ ...
Read more >
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 }...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found