DEV Community

Cover image for Deploying NextJS apps with PipeOps
Orunto Eniola
Orunto Eniola

Posted on • Updated on

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 Create a new project

Select Web Project as project type

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

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

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!

The NextJS project 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.
Build Settings with build method set to Heroku BuildPack

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
    Lifecycle command in build settings set to pnpm build

  • 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@*
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Thanks for reading, happy building!

See you at the finals ๐Ÿซต

Top comments (0)