Muokkaa

Jaa

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

  • Artikkeli

In this tutorial, 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 readme.

Prerequisites

1. 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 app that supports dynamic routes.

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

  1. Go 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. Go 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

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

Start Next.js app

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

Details page

2. Create a static app

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.

  1. Go to the Azure portal.

  2. Select Create a Resource.

  3. Search for Static Web Apps.

  4. Select Static Web App.

  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, if prompted.

  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.

3. Review and create

  1. Select Review + Create 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. 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

Once the workflow is complete, you can refresh the browser to view your web app.

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

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

Configuring Static Rendering

By default, the application is treated as a hybrid rendered Next.js application, but to continue using it as a static site generator, you need to update the deployment task.

  1. Open the repository in Visual Studio Code.

  2. Navigate to the GitHub Actions file that Azure Static Web Apps added to your repository at .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Update the Build and Deploy job to have an environment variable of IS_STATIC_EXPORT set to true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Commit the changes to git and push them to GitHub.

    git commit -am "Configuring static site generation" && git push

Once the build has completed, the site will be statically rendered.

Clean up resources

If you're not going to continue to use this app, 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 Delete.
  5. Select Yes to confirm the delete action.

Next steps

Set up a custom domain