Merge pull request #214165 from chcomley/users/chcomley/deply-nextjs-1995787

Refresh deploy-nextjs.md

Author: v-stsavell

articles/static-web-apps/deploy-nextjs.md

@@ -1,76 +1,73 @@
 ---
-title: "Tutorial: Deploy static-rendered Next.js websites on Azure Static Web Apps"
+title: "Deploy static-rendered Next.js websites on Azure Static Web Apps"
 description: "Generate and deploy Next.js dynamic sites with Azure Static Web Apps."
 services: static-web-apps
 author: craigshoemaker
 ms.service: static-web-apps
 ms.topic:  tutorial
-ms.date: 03/26/2022
+ms.date: 10/11/2022
 ms.author: cshoe
-ms.custom: devx-track-js
+ms.custom: devx-track-js, engagement-fy23
 ---
 
-
 # Deploy static-rendered Next.js websites on Azure Static Web Apps
 
-In this tutorial, you learn to deploy a [Next.js](https://nextjs.org) generated static website to [Azure Static Web Apps](overview.md). For more information about Next.js specifics, see the [starter template's readme](https://github.com/staticwebdev/nextjs-starter#readme).
+In this tutorial, learn to deploy a [Next.js](https://nextjs.org) generated static website to [Azure Static Web Apps](overview.md). For more information about Next.js specifics, see the [starter template readme](https://github.com/staticwebdev/nextjs-starter#readme).
 
 ## Prerequisites
 
 - An Azure account with an active subscription. [Create an account for free](https://azure.microsoft.com/free/).
 - A GitHub account. [Create an account for free](https://github.com/join).
 - [Node.js](https://nodejs.org) installed.
 
-## Set up a Next.js app
+## 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 application that supports dynamic routes.
+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. Navigate to [https://github.com/staticwebdev/nextjs-starter/generate](https://github.com/login?return_to=/staticwebdev/nextjs-starter/generate)
-1. Name the repository **nextjs-starter**
-1. Next, clone the new repo to your machine. Make sure to replace `<YOUR_GITHUB_ACCOUNT_NAME>` with your account name.
+1. Go to [https://github.com/staticwebdev/nextjs-starter/generate](https://github.com/login?return_to=/staticwebdev/nextjs-starter/generate).
+2. Name the repository **nextjs-starter**.
+3. Clone the new repo to your machine. Make sure to replace `<YOUR_GITHUB_ACCOUNT_NAME>` with your account name.
 
     ```bash
     git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter
     ```
 
-1. Navigate to the newly cloned Next.js app:
+4. Go to the newly cloned Next.js app.
 
    ```bash
    cd nextjs-starter
    ```
 
-1. Install dependencies:
+5. Install dependencies.
 
     ```bash
     npm install
     ```
 
-1. Start Next.js app in development:
+6. Start Next.js app in development.
 
     ```bash
     npm run dev
     ```
 
-Navigate to `http://localhost:3000` to open the app, where you should see the following website open in your preferred browser:
+7. Go 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
+## 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.
 
-### Create a static app
-
-1. Navigate to the [Azure portal](https://portal.azure.com).
+1. Go to the [Azure portal](https://portal.azure.com).
 1. Select **Create a Resource**.
 1. Search for **Static Web Apps**.
-1. Select **Static Web Apps**.
+1. Select **Static Web App**.
 1. Select **Create**.
 1. On the _Basics_ tab, enter the following values.
 
@@ -83,7 +80,7 @@ The following steps show how to link your app to Azure Static Web Apps. Once in
     | _Region for Azure Functions API and staging environments_ | Select a region closest to you. |
     | _Source_ | **GitHub** |
 
-1. Select **Sign in with GitHub** and authenticate with GitHub.
+1. Select **Sign in with GitHub** and authenticate with GitHub, if prompted.
 
 1. Enter the following GitHub values.
 
@@ -101,41 +98,50 @@ The following steps show how to link your app to Azure Static Web Apps. Once in
     | _Api location_ | Leave this box empty. |
     | _Output location_ | Enter **out** in the box. |
 
-### Review and create
+## 3. Review and create
 
 1. Select the **Review + Create** button to verify the details are all correct.
 
 1. Select **Create** to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.
 
 1. Once the deployment completes select, **Go to resource**.
 
-1. On the _Overview_ window, select the *URL* link to open your deployed application.
+2. On the _Overview_ window, select the *URL* link to open your deployed app.
 
 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:
+To check the status of the Actions workflow, go to the *Actions* dashboard for your repository:
 
 ```url
 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
+## 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`.
 
 ## 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:
+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](https://portal.azure.com).
-1. Search for **my-nextjs-group** from the top search bar.
-1. Select on the group name.
-1. Select on the **Delete** button.
-1. Select **Yes** to confirm the delete action.
+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.
+
+## Next steps
 
 > [!div class="nextstepaction"]
 > [Set up a custom domain](custom-domain.md)
+
+## Related articles
+
+- [Set up authentication and authorization](authentication-authorization.md)
+- [Configure app settings](application-settings.md)
+- [Enable monitoring](monitor.md)
+- [Azure CLI](https://github.com/Azure/static-web-apps-cli)