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.jsonfile 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 ๐ซต
Top comments (1)
Detailed and straight to the point. Love it!