Achraf Ben Alaya
No Result
View All Result
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
    • General Tips & Fix
  • AI
  • Cloud
  • Motivation
  • Courses
  • About
    • Resume
    • Privacy Policy
SUBSCRIBE
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
    • General Tips & Fix
  • AI
  • Cloud
  • Motivation
  • Courses
  • About
    • Resume
    • Privacy Policy
No Result
View All Result
Achraf Ben Alaya
No Result
View All Result
ADVERTISEMENT
Home Blog Cloud Azure

How To host a Next.js app on Azure

Deploy Next.js application with Azure Static Web App Service and GitHub Actions

achraf by achraf
October 5, 2020
in Azure, Blog, Cloud
3 min read
0
0
SHARES
1.6k
VIEWS
Share on FacebookShare on Twitter

In this new blog post we are going to build a simple basic Next.js application , so you don’t have to know a lot about Next.js , all we are going to build or use is a demo project .

If you want to read more about the Azure Static Web App Service follow this link .

Creating the Next.js application

To build a next.js application we are going to use a couple of commands :

“Make sure you have a recent version of Node.js installed”

Setup :

npx create-next-app
 # or 
yarn create next-app

nextjs

The project will be generated automatically. Let’s go to our project using !

cd .\my-app\

You can use npm install to install missing dependencies .

 

To run Next.js app in development: :

 

npm run dev

Generate a static website from Next.js build

When you build a Next.js site using npm run build, the app is built as a traditional web app, not a static site. To generate a static site, use the following application configuration.

  1. To configure static routes, create file named next.config.js at the root of your project and add the following code
module.exports = {
  exportTrailingSlash: true,
  exportPathMap: function() {
    return {
      '/': { page: '/' }
    };
  }
};

This configuration maps / to the Next.js page that is served for the / route, and that is the pages/index.js page file.

Update the package.json‘s build script to also generate a static site after building, using the next export command. The export command generates a static site.

"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
},

Now with this command in place, Static Web Apps will run the build script every time you push a commit.

 

npm run build

Pushing code to GitHub

Now after building our project on our local computer ,we are now going to push it to GitHub .

For that we need to create a new repository :

nextjs

Now to push our solution to GitHub we are going to use a couple of commands :

 

git add -A
 git commit -m "first commit" 
git branch -M master git remote add origin https://github.com/achrafbenalaya/nextjsdemoachraf.git
 git push -u origin master

Create Static Web App

make sure to choose Custom for the build and for the App artifact write : out

After you create the app , the GitHub action will start and create a new fresh build

now all you have to do , pull your project since there is a new yml file that contain the build config , do not touch that file in local, choose do your modifications on your website and push again and everything will go smoothly .

Full demo in the video Below :

 

ShareTweet
Previous Post

How To host an Angular app on Azure

Next Post

coding news

Related Posts

Azure

Honored to be recognized as a Microsoft Azure MVP for 2025-2026

July 20, 2025
77
AI

Model Context Protocol (MCP): The Future of AI Integration

April 21, 2025
227
Azure

Step-by-Step Guide: Azure Front Door + Storage Account Static Website + Custom Domain with Terraform

March 11, 2025
627
Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet
Azure

Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet

February 3, 2025
173
Understanding Generative AI and RAG Benefits
AI

Understanding Generative AI and RAG Benefits

January 12, 2025
131
Azure Communication Services Email Sending Simplified: From Setup to Execution and Monitoring
Azure

Azure Communication Services Email Sending Simplified: From Setup to Execution and Monitoring

December 8, 2024
2.1k
Next Post
How to Claim My Free Microsoft Certification Voucher

How to Claim My Free Microsoft Certification Voucher

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Terraform

Certifications

Microsoft certified trainer (MCT)

Recommended

Azure Function to Upload Data to Azure Blob

Azure Function to Upload Data to Azure Blob

August 29, 2020
3.5k
How to setup nginx reverse proxy for aspnet core apps with and without  Docker compose

How to setup nginx reverse proxy for aspnet core apps with and without Docker compose

November 23, 2022
2.1k
Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet

Network Security & Route Tables – Checking NSGs, route tables, and service endpoints for a targeted VNET or Subnet

February 3, 2025
173
Dapr – Service Invocation Part 1/2

Dapr – Service Invocation Part 2/2

August 17, 2021
585
Access Microsoft Azure Courses On Pluralsight for Free

Access Microsoft Azure Courses On Pluralsight for Free

April 21, 2020
472
Azure Elastic Job Tutorial: Automate Your SQL Jobs Efficiently

Azure Elastic Job Tutorial: Automate Your SQL Jobs Efficiently

June 23, 2024
181
Facebook Twitter LinkedIn Youtube

Honored to be recognized as a Microsoft Azure MVP for 2025-2026

July 20, 2025

Model Context Protocol (MCP): The Future of AI Integration

April 21, 2025

Step-by-Step Guide: Azure Front Door + Storage Account Static Website + Custom Domain with Terraform

March 11, 2025

Categories

  • AI (2)
  • Apps (1)
  • Azure (64)
  • blazor (2)
  • Blog (91)
  • c# (7)
  • Cloud (66)
  • Courses (3)
  • Dapr (4)
  • docker (4)
  • Games (1)
  • General Tips & Fix (1)
  • Home (1)
  • Kubernetes Service (AKS) (1)
  • motivation (2)
  • Motivation (3)
  • News (9)
  • Resume (1)
  • sql (4)
  • Terrafrom (1)
  • Tricks, Tips and Fixes (4)
  • xamarin (5)
No Result
View All Result
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
    • General Tips & Fix
  • AI
  • Cloud
  • Motivation
  • Courses
  • About
    • Resume
    • Privacy Policy