Next.Js Support

[splinetool]

Next.Js Support

[SilasNiewierra]

@ivanburlakov
Finally I was able to fix it.
The problem was.... my node version was v12 🙈
I changed it to v17 and everything runs smooth like butter.

I figured it out, because I used your repo and tried yarn as well, but I got the exact same error. So I knew it had to be on my system 😄

Thank you so much for your help 🙌

[ivanburlakov]

Hello! Spline works in my Next.js app. Do not replace the whole index.js file. Insert the import line and add <Spline> tag to tone of your page files or in _app.js file.

[SilasNiewierra]

Did you set it up with the most recent next.js setup?
I think it has to do something with the dependencies of react 16 and 17, but Next.js is on react 18.
I actually didn't replace the whole index.js file. That was just to demonstrate the problem 😄
I doesn't work either way, however: When I start my app with spline commented out and then after the app is running, comment it back in, it does work. But as soon as I make a page reload the error is back.

[ivanburlakov]

@SilasNiewierra yes, I am using it in newly created create-next-app with React version 18.1.0. Strange error however.. Maybe try it on absolutely new empty app? It needs to be said, that this module is quite raw currently and I ran in some bugs too. Hopefully it will continue to develop 😊

[SilasNiewierra]

Hi @ivanburlakov.
I just created a completely new next app with npx create-next-app.
Afterwards I installed spline npm install @splinetool/react-spline @splinetool/runtime and created a new component Spline.jsx with the default code:

import Spline from '@splinetool/react-spline';

export default function App() {
  return (
    <div>
      <Spline scene="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode" />
    </div>
  );
}

Then I used my Spline component in the default index.js.
Still, the same exact error occurs.

With this warning coming right before the error:

Warning: data for page "/_error" is 430 kB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data

You said it worked on your end. Could you tell me what you did and maybe provide a little repo or describe your process?

[ivanburlakov]

@SilasNiewierra I created a working blank project and uploaded it to this repo - https://github.com/ivanburlakov/spline-nextjs-example . Next.js App code structure is a bit different from React.