Skip to content

Files

Latest commit

jborsecnikjborsecnik
Merge pull request MicrosoftDocs#90540 from changeworld/patch-23
Apr 12, 2022
f73c9fa · Apr 12, 2022

History

History
141 lines (95 loc) · 5.13 KB

deploy-nextjs.md

File metadata and controls

141 lines (95 loc) · 5.13 KB
title description services author ms.service ms.topic ms.date ms.author ms.custom
Tutorial: Deploy static-rendered Next.js websites on Azure Static Web Apps
Generate and deploy Next.js dynamic sites with Azure Static Web Apps.
static-web-apps
craigshoemaker
static-web-apps
tutorial
03/26/2022
cshoe
devx-track-js

Deploy static-rendered Next.js websites on Azure Static Web Apps

In this tutorial, you learn to deploy a Next.js generated static website to Azure Static Web Apps. For more information about Next.js specifics, see the starter template's readme.

Prerequisites

Set up a Next.js app

Rather than using the Next.js CLI to create your app, you can use a starter repository. The starter repository contains an existing Next.js application that supports dynamic routes.

To begin, create a new repository under your GitHub account from a template repository.

  1. Navigate to https://github.com/staticwebdev/nextjs-starter/generate

  2. Name the repository nextjs-starter

  3. Next, clone the new repo to your machine. Make sure to replace <YOUR_GITHUB_ACCOUNT_NAME> with your account name.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter

  4. Navigate to the newly cloned Next.js app:

    cd nextjs-starter

  5. Install dependencies:

    npm install

  6. Start Next.js app in development:

    npm run dev

Navigate to http://localhost:3000 to open the app, where you should see the following website open in your preferred browser:

:::image type="content" source="media/deploy-nextjs/start-nextjs-app.png" alt-text="Start Next.js app":::

When you select a framework or library, you see a details page about the selected item:

:::image type="content" source="media/deploy-nextjs/start-nextjs-details.png" alt-text="Details page":::

Deploy your static website

The following steps show how to link your app to Azure Static Web Apps. Once in Azure, you can deploy the application to a production environment.

Create a static app

  1. Navigate to the Azure portal.

  2. Select Create a Resource.

  3. Search for Static Web Apps.

  4. Select Static Web Apps.

  5. Select Create.

  6. On the Basics tab, enter the following values.

    Property Value
    Subscription Your Azure subscription name.
    Resource group my-nextjs-group
    Name my-nextjs-app
    Plan type Free
    Region for Azure Functions API and staging environments Select a region closest to you.
    Source GitHub

  7. Select Sign in with GitHub and authenticate with GitHub.

  8. Enter the following GitHub values.

    Property Value
    Organization Select the appropriate GitHub organization.
    Repository Select nextjs-starter.
    Branch Select main.

  9. In the Build Details section, select Custom from the Build Presets. Add the following values as for the build configuration.

    Property Value
    App location Enter / in the box.
    Api location Leave this box empty.
    Output location Enter out in the box.

Review and create

  1. Select the Review + Create button to verify the details are all correct.

  2. Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.

  3. Once the deployment completes select, Go to resource.

  4. On the Overview window, select the URL link to open your deployed application.

If the website doesn't load immediately, then the build is still running. Once the workflow is complete, you can refresh the browser to view your web app.

To check the status of the Actions workflow, navigate to the Actions dashboard for your repository:

https://github.com/<YOUR_GITHUB_USERNAME>/nextjs-starter/actions

Now any changes made to the main branch start a new build and deployment of your website.

Sync changes

When you created the app, Azure Static Web Apps created a GitHub Actions file in your repository. Synchronize with the server by pulling down the latest to your local repository.

Return to the terminal and run the following command git pull origin main.

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web Apps instance through the following steps:

  1. Open the Azure portal.
  2. Search for my-nextjs-group from the top search bar.
  3. Select on the group name.
  4. Select on the Delete button.
  5. Select Yes to confirm the delete action.

[!div class="nextstepaction"] Set up a custom domain