How to start a react/next.js app from the browser?

JavaScript
1

Hi there,

I just made some three js scenes which I would like to show as my startpage when I open the browser (without starting the dev server manually).

Now I ask myself how to automatically start a next js project in the browser? Is this actually possible or do I need to host the project in order to open it automatically in the browser?

Thanks for help!!

2

NextJS isn’t really meant for pure static builds, but it can by using the next export command.

You can point the start page and new tab settings to a local HTML file. In Chrome settings just search for “start” and “new tab”. In Firefox it is under “New Windows and Tabs”.

3

@lasjorg Thanks for your answer!

I added next export to the “build” command and run npm run build. Then Next.js created an “out” folder with the index.html file.

However when I open this index.html file with the browser I just get an empty page, nothing happens here, just a blank white page. Do I need to add anything else?

The app shows a three js scene, so I guess it is not possible to show a three js scene with just a index.html file or does the JS file gets compiled in the background?

4

I’m guessing it uses module scripts, in which case it can’t be run over the file protocol. You could host your statically built site on a free service like GitHub pages for example.

5

I actually don’t understand why you need nextjs to run the threejs code?

The simplest solution is to add threejs in the head of index.html via a cdn and put your threejs code in a script tag.

6

It is because I am useing this scene in Nextjs projects

This sounds like an option! I just uploaded a repository to Github, but what to do next?

7

I just tried two hours to upload the nextjs app to github pages, but it did not work…

There must be a index.html file in the repository in order to host this app on github, so I run the build command including next export (which generates an index.html file inside a new folder with the name “out”).

However this is not working, probably because the index.html file is inside the OUT folder and not in the main folder. Another reason could be that Github pages can not render out Nextjs applications. The last reason why it is not working could be because I did not upload the node_modules folder.

Does anyone know what went wrong here?

Is it actually possible to host Nextjs apps on Github pages?

Thanks for help!!

8

First off I’m sure you’ll find some articles to walk you through it if you search “next deploy github pages”. It’s not as simple as uploading your source code to GitHub and clicking a button, unfortunately.

Edit: The following is not a Next.js application, but the concept is the same!

You could set it up so that you push your out directory to the gh-pages branch, and tell GitHub Pages to look at the gh-pages branch. Here’s the setup on one of my repos.

1 Like
9

@colinthornton Thanks for your help!

I dont really understand what you mean by that, because I am new to Github and not that familiar with it at the moment. However I found another easy work around. We can make a repository on Github and then deploy it on Vercel. I think this is even the better option because Vercel have a easy way to deploy Nextjs applications from Github.

This is the final result: https://git-planetjsx-0-0-1.vercel.app/

Save it as your start page if you like :slight_smile:

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.