top of page
Search

Deploying Your Next.js App to Azure App Service

  • Writer: Jawand Singh
    Jawand Singh
  • Sep 8, 2024
  • 2 min read

Code in Action: Building and Deploying a Next.js App
Code in Action: Building and Deploying a Next.js App


Hey there, fellow developer! 👋 Ready to get your Next.js app up and running on Azure App Service? You're in the right place! We'll walk you through deploying your app using Linux as the runtime and Azure CLI for that sweet, sweet automation. Let's dive in!


Before We Start

Make sure you've got these things ready:

  1. An Azure account with an active subscription (if you don't have one, sign up here)

  2. Azure CLI installed on your machine

  3. Node.js and npm (we'll be using Node.js 20 LTS)

  4. Your awesome Next.js application, ready to show the world


Let's Get Started!


Step 1: Log in to Azure


First things first, let's log in to your Azure account. Open up your terminal and type:

az login

This will open a browser window. Log in, and you're good to go!


Step 2: Create a Resource Group


Think of a resource group as a container for all your Azure resources. Let's create one:

az group create --name myNextJsGroup --location eastus

Feel free to replace myNextJsGroup with whatever cool name you come up with, and eastus with your preferred location.


Step 3: Set Up an App Service Plan


Now, let's create an App Service plan. This is where your app will live:

az appservice plan create --name myNextJsPlan --resource-group myNextJsGroup --sku B1 --is-linux

Step 4: Create Your Web App


Time to create the web app using Node.js 20 LTS:

az webapp create --resource-group myNextJsGroup --plan myNextJsPlan --name my-nextjs-app --runtime "NODE|20-lts"

Replace my-nextjs-app with your app's name. Remember, this name needs to be unique across all of Azure, so get creative!


Step 5: Configure Your App Settings


Let's set up some environment variables:

az webapp config appsettings set --resource-group myNextJsGroup --name my-nextjs-app --settings NODE_ENV=production

Step 6: Set the Startup Command


Tell Azure how to start your app:

az webapp config set --resource-group myNextJsGroup --name my-nextjs-app --startup-file "npm run start"

Step 7: Prep Your Next.js App


  1. Make sure your package.json has these scripts:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

  1. Build your app:

npm run build

Step 8: Deploy Your Next.js App


Let's use Azure CLI to deploy:

az webapp deployment source config-local-git --name my-nextjs-app --resource-group myNextJsGroup

This will give you a Git URL. Use it to push your code:


git remote add azure <Git URL from previous command>
git add .
git commit -m "Taking over Azure with Next.js! 🚀"
git push azure master

Step 9: Check It Out!


Once everything's deployed, visit your app at https://my-nextjs-app.azurewebsites.net (replace my-nextjs-app with your app's name).


You Did It! 🎉


Congratulations! You've just deployed your Next.js app to Azure App Service. How cool is that?

Remember to keep an eye on your app's performance and scale your App Service plan if needed. Azure's got your back!


Want to Learn More?


Check out these helpful Microsoft docs for more info:


Happy coding, and may your deployment be ever smooth! 😊

bottom of page