Next.js w/ Custom Express Server example for IBM Cloud

A version of Next's example/custom-server-express revised to deploy to IBM Cloud.

Why use Next.js React Framework

Always is my advice to go to the people and look at the docs where the developers state the reasons they made it. Then look to read opinions, gossip magazines or additional articles outside of the developers. That is just my structure and person though.

The example app isn't anything special here. Shows routing. It will get you up and going on IBM Cloud in a few minutes using Next.

Why I did this

I was freaking out. I tend to use new stuff more than hang on anything I have used time and time again. My deployment failed a few times on IBM Cloud given the Zeit custom-server-using-express main example.

Mars and his Heroku implementation saved me thirty minutes at the very least of trying to get it deployed. So I decided to share this riffing for IBM Cloud platform to save other people some time too possibly.

How to set it up

• First you need an account on IBM Cloud

• Install IBM Cloud CLI and restart terminal, type ibmcloud to check

• To minimize number of specifications per deploy to IBM Cloud you can use an application manifest like this one manifest.yml

Change the name and host to what you want them to be.

Go into root directory, make sure you have permissions for everything.
Now this next image - these are my actions I did for pushing up this application.

npm i --save
ibmcloud login --sso
ibmcloud target --cf 
ibmcloud app push

Watch deployment logs.

You should see ...

And that is it. You have Next.js example app on IBM Cloud. 🦑

https://testingnextjs.mybluemix.net/

If you are doing more than this example demo and it fails
ibmcloud cf logs [YOUR_APPSNAME] --recent
And watch it. I have been mostly able to troubleshoot from those logs and use cf docs.

Note: I altered the production to dev in the start script of package.json bc I hadn't installed dotenv and was first figuring out deployment of a live instance solely using next.js before actual implementation.

Zeit - The idea behind the example app

Most of the times the default Next server will be enough but sometimes you want to run your own server to customize routes or other kind of the app behavior. Next provides a Custom server and routing so you can customize as much as you want.

Because the Next.js server is just a node.js module you can combine it with any other part of the node.js ecosystem. in this case we are using express to build a custom router on top of Next.

The example shows a server that serves the component living in pages/a.js when the route /b is requested and pages/b.js when the route /a is accessed. This is obviously a non-standard routing strategy. You can see how this custom routing is being made inside server.js.