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.5k
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

AI

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

April 21, 2025
90
Azure

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

March 11, 2025
211
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
132
Understanding Generative AI and RAG Benefits
AI

Understanding Generative AI and RAG Benefits

January 12, 2025
95
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
1.5k
PowerShell Automation for Azure Networks: Detailed VNET and Subnet Analysis
Azure

PowerShell Automation for Azure Networks: Detailed VNET and Subnet Analysis

November 2, 2024
495
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

How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)

November 23, 2022
869
Run background tasks with WebJobs in Azure App Service

Run background tasks with WebJobs in Azure App Service

August 21, 2021
2k
Auto Post and Schedule Tweets & Linkedin using Azure Logic Apps

Auto Post and Schedule Tweets & Linkedin using Azure Logic Apps

April 14, 2021
611
Streamlining Website Editing on My Local Machine with Docker Compose and WordPress

Streamlining Website Editing on My Local Machine with Docker Compose and WordPress

July 1, 2023
140
Win a free certifications at the Microsoft spring skills challenge  🎁

Win a free certifications at the Microsoft spring skills challenge 🎁

March 20, 2022
533
Xamarin.forms,Blazor and Web API

Xamarin.forms,Blazor and Web API

December 3, 2020
1.2k
Facebook Twitter LinkedIn Youtube

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
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

Categories

  • AI (2)
  • Apps (1)
  • Azure (63)
  • blazor (2)
  • Blog (91)
  • c# (7)
  • Cloud (65)
  • 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