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

Switch to Azure Container Registry from Docker Hub
Azure

From Docker Hub, switch to Azure Container Registry & AKS

January 16, 2023
132
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)
Azure

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

November 25, 2022
229
How to setup nginx reverse proxy && load balancer for aspnet core apps with Docker and azure kubernetes service (AKS)
Azure

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

November 23, 2022
100
How to setup nginx reverse proxy for aspnet core apps with and without  Docker compose
Azure

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

November 23, 2022
153
Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁
Blog

Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁

May 28, 2022
107
Generating report for SSL Certificates for Websites with PowerShell
Azure

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
386
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

Swagger & OpenAPI and Versioning for ASP.NET Core

Swagger & OpenAPI and Versioning for ASP.NET Core

December 8, 2020
1k
Azure Static Web App Service

Azure Static Web App Service

September 27, 2020
548
Configure postman / newman API tests in Azure DevOps

Configure postman / newman API tests in Azure DevOps

October 25, 2021
2.2k
Installing WordPress with docker image of XAMPP

Installing WordPress with docker image of XAMPP

April 21, 2020
665
Sql tips and tricks

Sql tips and tricks

April 26, 2020
161
Azure Tips

Azure Tips

April 28, 2020
311
Facebook Twitter LinkedIn Youtube
Switch to Azure Container Registry from Docker Hub

From Docker Hub, switch to Azure Container Registry & AKS

January 16, 2023
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
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

Categories

  • Apps (1)
  • Azure (39)
  • blazor (2)
  • Blog (62)
  • c# (7)
  • Cloud (37)
  • Dapr (4)
  • docker (3)
  • Games (1)
  • General Tips & Fix (1)
  • motivation (2)
  • Motivation (3)
  • News (9)
  • Resume (1)
  • sql (4)
  • Tricks, Tips and Fixes (3)
  • xamarin (5)
No Result
View All Result
  • News
  • Blog
    • blazor
    • c#
    • Cloud
      • Azure
    • docker
    • sql
    • xamarin
    • Dapr
    • Tricks, Tips and Fixes
  • Cloud
  • Motivation
  • General Tips & Fix
  • Exam Preparation
    • AZ-104
    • AZ-400
  • About
    • Resume