Achraf Ben Alaya
No Result
View All Result
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About
    • Resume
SUBSCRIBE
  • Home
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • About
    • Resume
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.2k
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

Block the default URL assigned to the azure web app using azure application gateway
Azure

Block the default URL assigned to the azure web app using azure application gateway

May 31, 2023
56
Block the default URL assigned to the azure web app
Blog

Block the default URL assigned to the azure web app

May 14, 2023
215
What if we can check the cost of Azure resources in a juts few seconds
Azure

What if we can check the cost of Azure resources in a juts few seconds

May 9, 2023
331
Part 5-A : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments
Azure

Part 5-C : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments

May 2, 2023
216
15 E-books that focus on learning Microsoft Azure Cloud
Azure

15 E-books that focus on learning Microsoft Azure Cloud

April 23, 2023
102
Part 5-A : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments
Cloud

Part 5-B : Using Azure DevOps, Automate Your CI/CD Pipeline and Your Deployments

April 20, 2023
123
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

Deploy azure function from Docker Hub CI/CD

Deploy azure function from Docker Hub CI/CD

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

How to configure an ingress controller using TLS/SSL for the Azure Kubernetes Service (AKS)

November 25, 2022
641
Learn… and get rewarded

Learn… and get rewarded

September 28, 2020
434
Azure Static Web App Service

Azure Static Web App Service

September 27, 2020
638
Generating report for SSL Certificates for Websites with PowerShell

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
685
Dapr – Service Invocation Part 1/2

Dapr – Service Invocation Part 1/2

August 17, 2021
589
Facebook Twitter LinkedIn Youtube
Block the default URL assigned to the azure web app using azure application gateway

Block the default URL assigned to the azure web app using azure application gateway

May 31, 2023
Block the default URL assigned to the azure web app

Block the default URL assigned to the azure web app

May 14, 2023
What if we can check the cost of Azure resources in a juts few seconds

What if we can check the cost of Azure resources in a juts few seconds

May 9, 2023

Categories

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