thanks for sharing - did not know and just digging through the source now. really cool how they did that open source and clean code - the Unity bits at least I can follow easy as c# is my best language 
gonna msg you
I see many replies here focus on ease of use to get started, but from my observation of questions people post on this forum, they mostly want a production ready Next.js setup for these reasons:
- SEO
- Automatic code splitting (CRA if I remember, doesn’t give that out of the box, nor does a simple webpack server)
- Async loading Babylon scripts with tree shaking to achieve high page speed score.
Another bonus is that with next.js setup you can write in either native Js, Typescript, or mix them.
1 Like
nextjs doesnt give you access to index.html
What do you mean by this? Create pages/index.js and in it put whatever HTML you want.
thats not so accurate. _document.js is the global html and scripts, _app.js is he per page html and scripts, while index.js is the root component that gets injected into next script component, which gets composed into the index.html. in order to get access to index.html, you can only really do so by using the head component and then referencing files in the public dir, its not very intuitive. nextjs also has breaking changes, cra not so much. cra does codesplitting btw. seo isnt as good, you can fix that with post-bundle scripts like react-snap though. both are fine, I just think cra has more out of the box for noobs
Man, it’s the same with CRA, you do not have direct access to index.html, it gets parsed and compiled (unless you manually mess with the compiled index.html, which is bad practice anyway). In the same way you can also mess with next.js’ compiled index.js.
The _document.js and _app.js global header files is more intuitive than writing those include files yourself in CRA (IMHO of having build over 30 sites, and dozens of apps to date).
but, you are not a noob and you understand what is happening
more importantly, with cra, you dont have to use react. you do have to use react with nextjs
am i missing something - you can edit the CRA ./public/index.html. only the bundles are added and some template stuff replaced like %PUBLIC_URL%.
Why is this a problem? Among top choices (React/Angular/Vue/etc.) React is the winner in many ways (though I do not want to engage in lib/framework debate, there is plenty of data online to support that statement now; not like 2015, when I had to explain to people in job interviews…)
I did not say you cannot edit index.html, my point was Next.js provides similar access (relatively speaking) to index.html just like CRA, it’s just named index.js with jsx/tsx syntax, to Jeremy’s statement:
because I do not want newbies reading this forum and making conclusions based on statements that are not factual. I have not seen anything you can do in CRA to index.html file that cannot be done with next.js, and I use both on my daily job.
Been a newbie myself trying to figure things out from forum posts (I’m still a newbie in the CG space) and I know how statements like that can lead a person in a wrong direction.
1 Like
What i said is factual. Since you use both daily, can you please describe the steps to use bootstrap and jquery through a cdn script with each?
I never tried using jquery with CRA and Next.js, because it defeats the purpose of using CRA/Next in the first place.
But I implemented similar script loading to jquery in CRA and Next.js pages (as I understood, you wanted an example of loading self executing script).
In CRA, just place the script in public/index.html.
In Next.js, like this in the actual component requiring the script:
// Example loading cdn script
<Head children={<script src="https://code.jquery.com/pep/0.4.3/pep.min.js"/>}/>
// Example using npm package:
if (typeof window !== 'undefined') {
if (!window.earcut) window.earcut = require('earcut')
}
Like you see, Next.js’ way of loading the cdn script is efficient out of the box, only load it on pages that need it.
Bonus: Next.js automatically removes duplicated scripts, I have that pep.min.js in the Scene component being mounted several times to different canvases on the same page, but the script only appears once in the header.