DEV Community

Cover image for Next.js on IBM Cloud
Julia Flash for IBM Developer

Posted on

Next.js on IBM Cloud

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.

the manifest.yml

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

npm i --save
ibmcloud login --sso
ibmcloud target --cf 
ibmcloud app push
Enter fullscreen mode Exit fullscreen mode

Watch deployment logs.

You should see ...
console shows that app has started on IBM Cloud
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.

Top comments (3)

Collapse
 
marekdano profile image
Marek Dano • Edited

Thanks for the tutorial
I learn more about IBM Cloud and when I try to run ibmcloud app push I've got back

FAILED
No org and space targeted. Use 'ibmcloud target -o ORG -s SPACE' to target an org and space.

Has something changed on CLI that it has to be set up now? I cannot find the answer to my question anywhere.
THANKS!!!

Collapse
 
juliathepm profile image
Julia Flash

Yes Marek, so sorry this is so late - I had another email for my dev.to account that I screwed up the MX record on, so just now seeing this!

Yeah so did you ibmcloud target --cf command? It expedites this setup and walks you through the org, space. I do it every time I login. :)

Collapse
 
luisang12312356 profile image
Nopa

Hello, I have a problem with deploy my application next js in IBM Cloud, when entry the url i get error 403 Forbidden and my files that there, I need help