Shoelace: [Docs] NextJS Support

[crutchcorn]

Recently, while helping a friend with their project that utilizes Shoelace, we realized that it was fairly difficult to get NextJS up-and-running self-hosted without CDN usage.

However, we managed to figure out and get things running fairly quickly after some initial hiccups!

I am going to be writing a guide outlining how to set this up for others to utilize, but before I do I wanted to check with the project itself and see if this would be a good contribution to upstream docs themselves.

If not (and I understand if that's the case, it's a fairly niche use-case that's a somewhat in-depth guide to setup - which differs a lot from the current "usage" guides), I'd also be happy to host the content on my blog

Thanks a million for this great project!

[claviska]

I’d say go for it. I personally won’t be able to maintain it so that will fall on the community, but it seems like it’d be pretty valuable since next.js is so popular.

There’s also a Rails document if you need some inspiration: https://shoelace.style/tutorials/integrating-with-rails

[crutchcorn]

Oh! You know, I completely missed the tutorial section. I have a good idea of how to structure this content, so I'll get started within the next week or two.

Thanks for the guidance!

[claviska]

Awesome, looking forward to it. Feel free to submit a PR when you're ready!

[claviska]

@crutchcorn Hi, I'm hearing reports that this may not apply to more recent Shoelace releases. There were some under the hood changes with the move from Stencil to LitElement. I was hoping you'd be able to review it with the latest release. 🙏

https://shoelace.style/tutorials/integrating-with-nextjs

Thanks!

[aoloo]

@crutchcorn I followed the direction you added in the documentation, but next js seems to have issues running the app. The main error I am seeing is this Error [ERR_REQUIRE_ESM]: Must use import to load ES Module. The example repo you linked is setup differently from the documentation. Would it be possible to update the documentation?

[crutchcorn]

Seems like there were some major changes in the last few beta releases. Taking a look, it seems like:

• defineCustomElements was removed entirely. Is there an easy way to register all of the new web components without importing them individually (for use in the tutorial's start)
• setAssetPath was replaced with setBasePath

After changing the proper imports and such, I'm still hitting the issue:

unable to locate '/Users/crutchcorn/git/Etc/nextjs-shoelace-example/node_modules/@shoelace-style/shoelace/dist/shoelace/icons' glob

Let me see if I can't just figure out a way to disable this error

EDIT: I missed something obvious 🤦 I figured out what's wrong with that error. Trying to fix the demo now

[crutchcorn]

I'm actually glad I started this document in the old version of the library. The new version is more complex but I've gotten it working. I'm pushing the required changes to the example repo right now and will update the document via PR