Babylon + Next.js Setup Optimized for SEO, Load Speed & Developer Experience

Hi everyone!

According to many questions posted in this forum, people were having problems with getting a working setup of Babylon and Next.js.

So here is the guide on How to Setup Babylon + Next.js Production Build Optimized for SEO & Speed.

It comes with a proven starter template repository on GitHub (tested on MacOS, Linux).

@note: Windows users should install this template using yarn, not npm because it will probably produce errors with npm. If you haven’t installed yarn, do this first:

// it doesnt work if using npm install --global yarn (according to some report)
npm i yarn

Key Features:

  1. SEO Friendly
  2. Load Fast to achieve “A” Grade Page Speed score
  3. Async Load Babylon to improve UX (user experience)
  4. Code Splitting with Tree Shaking to reduce bundle size
  5. An option to write in pure Javascript or Typescript (or mixing both)
  6. Intuitive developer experience with HMR (Hot Module Reload)
  7. Jest Test working setup
  8. Modular Architecture for a flexible, maintainable and scalable app
  9. Production ready with detailed bundle analyzer.

If there is anything you’d like to add, plz let me know.

2 Likes

Thanks for sharing. I was wondering why you export lots of things in ‘client/babylon.js’ instead of just importing what you need in the views.

The philosophy is to make it newbie friendly, and pro happy.

A newbie might go in and try to show the boundingBox, and not know that Babylon requires ‘@babylonjs/core/Rendering/boundingBoxRenderer’ for it to work.

Whereas by the time you get to code pruning optimization for production, chances are you already know what you are doing. You can easily comment out the exports you do not need, like explained in the Doc block inside that file.

For ease if use, I left common exports that are frequently used (at least from my personal experience).

Also in production build, it seems Webpack will strip out all unused exports anyway (though I haven’t tested this completely).

Just realized I might have misunderstood your question. All Babylon imports should come from a single babylon.js for these reasons:

  • Abstract away internal dependencies of Babylon packages
  • Make your project framework agnostic, so that you can easily swap/combine any 3D library in the future (Three.js for example, though I see no reason of doing that :wink:)
  • Easy to maintain (example: if a polyfill is need for WebGPU, do you not have to hunt down all views importing Babylon. Or perhaps you want to replace the default CSG with a cooler one, like you mentioned.)

Here is what I’ve got after yarn and yarn dev

1 Like

That’s because you don’t have localhost:3000/ru page setup yet.

The example next.config.js was mean’t to show you how to configure a multilingual website, but for each language, you need an actual page.

Please check the link about localisation routing inside it.

Strangely, though, it works on mine, even without any page. Did you change anything to the repository? Can you post yarn.lock file?

Actually I don’t need any localization at all.
But when I open localhost:3000 it opens at localhost:3000/ru with errors.
Is there a way to use your template straight out of the box?

I did fork and then yarn and yarn dev. Didn’t touch anything in files.

I see the problem. It’s because your comp has ru set by default. But the default template has no ru page setup, and Next.js being too smart, tried to redirect you to a non-existing page.

I updated git. Please pull and try.

This is what I’ve got after pull, yarn and yarn dev:

What is your yarn, node.js version and OS?

Can you attach yarn.log or any error log?

This was only tested to work in Node.js v12.22.1. as stated, on MacOS. It could be problem with the yarn itself.

Try to remove this file: /babylon-next/repos/web/components/Preload.js - it is not used, only for reference, but that’s the only place the next/router was imported.

You can verify this yourself by searching for next/router in the entire repo, it’s not used anywhere. Perhaps you have stale cache from another next.js setup in your yarn.

Try this then:

yarn reset
  1. Deleted Preload.js - no success
  2. yarn reset - the same

Every time it also opens rimraf/bin.js file and don’t do anything until I close this file.

I think I need to downgrade node.js version to 12.22.1 (currently use the latest), probably it will help…

NVM would be good for this purpose if you are not using it yet. Next.js is quite picky about Node versions, hence I explicitly mentioned the tested Node version that I currently use myself in production.

This is one of the reasons many people struggle with Next.js setup. But the upside is there is much less headache after you get the initial setup working, compared to CRA - easy to start, hard to customize.

That means this package is not compatible with your OS, probably Windows. You can reset yarn cache directly:

yarn cache clean && yarn

OK, seems that this one is not for Windows :slight_smile:
I’ll check further when will be on Mac.

I mean the package used for script yarn reset.

But the boilerplate should work in Windows, because that rimraf package is only used as extra developer tool for ease of use.

If it’s because of rimraf that you are having problems to get it running in Windows, then we can remove it from the template. I do not have Windows, so if you could test that would be great.

Well, with node 12.22.1 I had the same problems.

Please try these manually then:

  • In /package.json, delete lines: 34, 32, 28
  • delete /yarn.lock
  • delete /node_modules
  • delete /repos/web/.next
  • delete /repos/web/node_modules
yarn cache clean
yarn
yarn dev

If still not working, it must be yarn, or maybe Next.js itself does not work in WIndows lol. My yarn version is: 1.22.10

The boilerplate assumed that you have Next.js installed in your machine, but if not, you should try official doc first Getting Started | Next.js

See if you can actually start any Next.js project to begin with.

Should I try to use first

yarn create next-app

before yarn dev (or even before yarn)?

That Getting Started will create an entirely new Next.js project, so I suggest you cd out of babylon project first.

yarn create next-app # this will create new folder in current WORK_DIR/next-app 

This is to test if your machine can successfully install and run Next.js from the official doc. So we can eliminate where your bug is coming from.