Deploying a Next.js Static Site on DigitalOcean's App Platform
Tags: appplatform, digitalocean, nextjs
Published: 2023-11-29 09:10:03


Wondering if deploying a Next.js static site on DigitalOcean can deliver a seamless experience? 😂

I was assigned the task of deploying a static site and initially, I assumed it would be as simple as deploying a React Native app. I diligently followed the steps outlined in the [documentation](https://docs.digitalocean.com/developer-center/deploy-a-next.js-app-to-app-platform/#deploying-nextjs-as-a-static-site).

After successfully completing the build process, I eagerly clicked on the URL, only to encounter a frustrating 404 error. It was then that I delved into the build logs to troubleshoot the underlying issue.

## Identifying the Issue
![nextjs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9b11u2n3eixg7gcinxsd.png)

The root cause of the problem lies in the absence of a clear definition for the output directory of the static site. As a result, it was searching for static files and, by default, resorting to the standard 404 error document provided by the App Platform.

## Finding a Solution

![settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3qawdsfbm94brpauax8.png)

To resolve this issue, head to the settings and make a modification in the `appsec`  file by adding the line `output_dir: /out`. Don't forget to clear the build cache before initiating a redeployment.

![spec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bxgw1nrfxsg448u1c4e.png)

![appspec](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odz6e2ry05yds7kqomyq.png)

The build process concluded successfully, and the static files were exported to the designated `/out` directory.

![logs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uw4gnujlas1x5eat6cp.png)

## Managing URL Path Rewrites and Redirects

If your application involves URL path rewrites or redirects, consult the [documentation](https://docs.digitalocean.com/products/app-platform/how-to/url-rewrites/) for the specific steps. You'll either need to manually configure these routes or include them in the `appsec` file under the `ingress rule` section.

![ingress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6sjxwwvw2wnymhbqhjt.png)

## Handling Domain Management in the App Platform

For guidance on effectively managing domains while using the App Platform, refer to the [documentation](https://docs.digitalocean.com/products/app-platform/how-to/manage-domains/), which offers a clear and straightforward guide.

## Conclusion

Deploying a Next.js static site on DigitalOcean's App Platform is easy when you have the right guidance. This guide is here to help you make the process smooth and enjoyable. Additionally, the GitHub integration automates the build and deployment process, making it even more convenient.

App platforms offer many benefits like simplified deployment, automatic scaling, managed infrastructure, security features, CI/CD support, isolation, monitoring, and more. They boost developer productivity and reduce costs. The choice of the right platform depends on your project's needs and your organization's goals.