Add with-docker-compose example

[maxproske]

with-docker-compose contains everything needed to get Next.js up and running with Docker Compose.

This example aims to provide an easy-to-use, Next.js app development and production environment, all without Node.js being installed on the host machine. This ensures a consistent development environment across Windows, MacOS, and Linux teams.

I was inspired to create this, because the existing with-docker example only uses Docker to build the final production artifacts, not provide a development environment. Docker Compose easily syncs changes with containers for Hot Reloading, parallel builds, and networking, making it a powerful and consistent development tool.

Developers can easily extend this example by modifying the YAML files to include Nginx, Postgres, and other Docker images.

This example takes advantage of Docker multistage builds combined with the Next 12.1 Output Standalone feature, to create up to 80% smaller apps (Approximately 110 MB compared to 1 GB with create-next-app). I also included an example without multistage builds, for developers who don't want to get into the weeds.

I have been tweaking this Docker Compose setup over 3 years of real world use, but please let me know if anything can be improved.

[leerob]

Could you explain more where there's both a JS and TS apps? All examples will be TypeScript first going forward, so if you were worried about not having a vanilla JS one, that's okay 👍

[maxproske]

Hi @leerob! My example contains separate directories for JS and TS apps, with Docker Compose files located at the root.

with-docker-compose/
├── next-js-app/
├── next-ts-app/
└── docker-compose.yml

I used this project structure instead of creating separate examples for JS and TS, because I wanted to demonstrate how Docker Compose can be used to successfully manage monorepos containing both JS and TS apps. I'm primarily a JavaScript developer, so I wanted to give others the option to create multiple JS or TS apps, or both.

Let me know what you think!

[leerob]

I used this project structure instead of creating separate examples for JS and TS, because I wanted to demonstrate how Docker Compose can be used to successfully manage monorepos containing both JS and TS apps. I'm primarily a JavaScript developer, so I wanted to give others the option to create multiple JS or TS apps, or both.

Having a Docker Compose example is great - but I think we can simplify this to just the TypeScript app 👍

[maxproske]

@leerob Thanks for your feedback! I have removed the JS app and updated the README.

[maxproske]

@leerob Thanks again for your feedback. Hopefully I'm not creating extra pressure by asking when this example will be merged.

[maxproske]

Thanks @leerob! I made all your requested changes.

[balazsorban44]

I wonder if this might give the wrong impression to developers about how to use environment variables and some might accidentally expose secrets this way. What do you think?

[maxproske]

Good point! I've removed this, since there's no need to showcase a basic feature of Next.js.

[balazsorban44]

Thanks, I added some comments. Mostly to remove some files/packages that do not showcase anything in this example, to match our Example requirements:

https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples

[maxproske]

Thank you @balazsorban44! It's pretty cool you ask new contributors what they think. I've made your requested changes, and re-read the examples guidelines.

[balazsorban44]

Thanks!