Next.js + Azure (based on the 'with Docker' and 'with Tailwind CSS' examples)

This example shows:

• how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs
• how to use Docker with Next.js based on the deployment documentation
• how to deploy a Next.js application to Azure, via Azure Container Registry and Azure App Service

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/finalist/nextjs-with-azure azure-app
# or
yarn create next-app --example https://github.com/finalist/nextjs-with-azure azure-app
# or
pnpm create next-app -- --example https://github.com/finalist/nextjs-with-azure azure-app

Create an .env.local file for environment variables (of course, do not check in if it carries secrets).

Deployment

Configure

In ./bin/config.sh, set:

• RESOURCE_GROUP: name of the Azure resource group
• REGISTRY: name of the Azure Container Registry

Provision

You will run this script only once for the web app.

This script will do the following:

• Create an App Service Plan
• Create an App Service
• Set parameters according to .env.local
• Set registry permissions
• Configure logging

./bin/provision.sh -n <your-app-name>

The value for <your-app-name> should be globally unique, as it will be made available as a subdomain azurewebsites.net.

Build

The build script will do the following:

• Build and tag a Docker image
• Push to the Azure container registry

./bin/build.sh -n <your-app-name>

Deploy

This script will deploy the image from the container registry to the web app.

./bin/deploy.sh -n <your-app-name>

Optionally, you can create a web hook, so that the app will be deployed when a new image is pushed to the container registry:

./bin/webhook.sh -n <your-app-name>