Deploying NextJS apps with PipeOps

It's Day 2 of Pipeops HackOps 1.0 and participants are building at full speed 🚀. Just look at the leaderboard 😮‍💨

However, PipeOps is a new platform and as such the builders are still trying to find their footing with it. In light of that here's a quick guide to deploying Next JS apps on Pipeops

• Start a new project and select Web Project as project type

• Select your preferred git provider, the account/organization your project repo is on and your project repo

• Hit proceed on project summary
• In project build settings, make sure Framework is set to NextJS build method is set to Nixpack

• Hit 'Deploy project' and watch the magic happen
• Your NextJS app is now live!

Troubleshooting

Error 503

One of the more common errors participants have run into when deploying NextJS apps is the 503 Error with their live links. This issue has been addressed by the team but here's a rundown incase you missed it 👇
In your project's build settings, change build method is to Heroku BuildPack and that should settle it.

pnpm

If you're a space saving weirdo (Like me 🤡) that uses pnpm, you need to make sure the following is in order

• Set Lifecycle command to pnpm run
  

• When using Heroku BuildPack, specify your pnpm version by running commands in your local environment and commit the resulting change to your package.json file before building
  

corepack enable

corepack use pnpm@*

Note: Terminal must be running as administrator

Image optimization

If you're having Error 404 or Error 502 when trying to load images, you probably have issues with optimization and that can easily be resolved by installing sharp

npm i sharp

pnpm add sharp

Thanks for reading, happy building!

See you at the finals 🫵