Unable to get app host correctly up and running with Next.js App Router

Developer Support
1

Hi there, I’ve been trying to get the app host/code components to work, however, after carefully following all the steps in the docs, it still doesn’t seem to work properly. Steps to reproduce:

  1. Use existing next.js app (App dir)
  2. Create the pages and all that listed in the docs
  3. Create a custom component and register it in the plasmic-init-client file
  4. Run dev server
  5. Add the localhost:3000 url to the project
  6. Doesn’t show the editor anymore, only the actual page :thinking_face:, including the following popup warning/error:

image

I will try add a reproduction repository soon if required!

2

Make sure the URL you added is the path to the host page, like http://localhost:3000/plasmic-host, and not just localhost:3000

3

After correcting the URL, it will load the preview of the site, but will not include any of the editors features (like shown in docs/videos). When configuring the project again, clearing the URL, the editor will show up again and I can edit the page. Code components do not show up anywhere.

4

What do you see / what’s meant by preview of the site? Which page do you see?

Can you verify that you see a page like this when you go directly to that /plasmic-host path? https://code-components.plasmic.site/plasmic-host

Are you able to repro in a new repo?

5

Yes, I can see that “ready to host” on localhost:3000/plasmic-host.
Will get a repro repo up and running today and see if I can reproduce, I’ll also send a link to it here.

6

I was able to get it working properly on the first try in a clean repository and clean project, will continue from here since we’re just getting started with Plasmic. Thanks a lot of the support!

7

Great to hear!