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

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
22
Generating report for SSL Certificates for Websites with PowerShell
Azure

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
104
Win a free certifications at the Microsoft spring skills challenge  🎁
Blog

Win a free certifications at the Microsoft spring skills challenge 🎁

March 20, 2022
291
My Trip to Turkey
Blog

My Trip to Turkey

February 5, 2022
175
Microsoft Ignite Cloud Skills Challenge November 2021 :  Learn…and get rewarded (only 3 days left)

Microsoft Ignite Cloud Skills Challenge November 2021 : Learn…and get rewarded (only 3 days left)

November 27, 2021
200
Tools I use with Database
Blog

Tools I use with Database

November 7, 2021
253
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

You forget to shutdown your virtual machine on your way home ? send an email and save your time

You forget to shutdown your virtual machine on your way home ? send an email and save your time

February 6, 2021
257
Generating report for SSL Certificates for Websites with PowerShell

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
104
Create a Linux VM with infrastructure in Azure using Terraform

Create a Linux VM with infrastructure in Azure using Terraform

August 30, 2020
1.7k
Azure Policy for governance

Azure Policy for governance

August 29, 2020
596
How to make the most of each day

How to make the most of each day

February 2, 2021
147
Background Tasks With Hangfire And .Net 5

Background Tasks With Hangfire And .Net 5

January 25, 2021
2.1k
Facebook Twitter LinkedIn Youtube
Win free certifications at the Microsoft Build Cloud Skills Challenge | May 2022 🎁

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

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

Generating report for SSL Certificates for Websites with PowerShell

April 10, 2022
Win a free certifications at the Microsoft spring skills challenge  🎁

Win a free certifications at the Microsoft spring skills challenge 🎁

March 20, 2022

Categories

  • Apps (1)
  • Azure (35)
  • blazor (2)
  • Blog (59)
  • c# (6)
  • Cloud (34)
  • Dapr (4)
  • docker (2)
  • 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