Next.js on IBM Cloud
Tags: nextjs, node, express, react
Published: 2019-12-07 01:02:01



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

*A version of [Next's example/custom-server-express](https://github.com/zeit/next.js/tree/master/examples/custom-server-express) revised to [deploy to IBM Cloud](https://github.com/nimicent/ibmcloud-nextjs-custom-server-express).*

### Why use Next.js React Framework

Always is my advice to go to the [people](https://github.com/zeit/) 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](https://github.com/mars/heroku-nextjs-custom-server-express) 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](https://cloud.ibm.com/)


* Install [IBM Cloud CLI](https://github.com/IBM-Cloud/ibm-cloud-cli-release) 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](https://github.com/nimicent/ibmcloud-nextjs-custom-server-express/blob/master/manifest.yml) 

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

![the manifest.yml](https://i.imgur.com/YAzCYHv.png)

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.

![using ibmcloud cli to push up app](https://i.imgur.com/VfokmYM.png)
``` bash
npm i --save
ibmcloud login --sso
ibmcloud target --cf 
ibmcloud app push
```
Watch deployment logs.

You should see ... 
![console shows that app has started on IBM Cloud](https://i.imgur.com/LUCWCwO.png)
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](https://docs.cloudfoundry.org/devguide/deploy-apps/deploy-app.html) 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](https://github.com/zeit/next.js#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`.