Next.js Issues

Hi. I’m trying to add some AR Scenes to my already existing next.js project (app router) and I’m having some issues with the installation. Every time I click ‘install’ it errors out. Does anybody have any idea what’s wrong?

Original Post on Discord

by user 426066705643732993

Hi @RedPanda we would need to see which errors you’re getting to help. Can you share them?

You can also use the BugReport api to send you logs as well but some screenshots from the errors or error messages might also help already
image.png

Hi marcel. I’ve been having all sorts of issues. This is the most recent one

by user 426066705643732993

Can you share your tsconfig? Decorators have to be enabled with tsconfig when using ts4 https://www.typescriptlang.org/tsconfig#experimentalDecorators

(They are not experimental anymore in upcoming typescript versions)

I’m getting the same error when disabling that option - I’ll add a note about that to the template readme

That was the fix! Thank you! :slightly_smiling_face:

by user 426066705643732993

Perfect!

I also had one more question if that’s okay?

by user 426066705643732993

Sure

My app is blog style with some AR components. For each article there will be videos, images and sometimes a 3D AR scene to play with. I was wondering, is there a way to do this? I’ve tried reverse engineering the needle website to give me a steer but any advice would be appreciated.

by user 426066705643732993

It’s also perhaps a misunderstanding of the software

by user 426066705643732993

Ok sure. Yep totally possible. You can e.g. have one main scene in Unity that has a scene switcher component and just use it to reference other prefabs or scenes to be exported.

Then in your blog/website you can directly set the src attribute on the Needle Engine web component (or the react needleEngine next component, pass it in as a prop) to load one of the glbs that were exported from Unity.

For Example: in Unity you have it setup to export to your next project and your main scene has a SceneSwitcher with “SceneA” and “SceneB”

Then in your blog depending on the article you add the needleEngine tag with <needleEngine src="./assets/sceneA.glb"> ~ roughly like that. I hope you get the idea?

the needle engine website is just one big page that loads the referenced scenes inside one page on demand. From your description it sounds like each page has its own needle-engine canvas and you want it to display a separate scene depending on the article. correct me if I got that wrong :slightly_smiling_face:

Both is possible. For a similar behaviour as on our website you’d also use the SceneSwitcher and just add some js code to tell it which scene you want to load (e.g. depending on scroll or a button press…)

Yeah that makes sense.

by user 426066705643732993

Would the scene switcher component be programmed in unity c# or with typescript for this to work?

by user 426066705643732993

It’s already there, you only need to add it in your scene and reference what you want to switch between - it’s one of our built-in components

As Felix said: You can just add it to your scene
image.png