Reviews for deploy next and nuxt

Author: christiannwamba

articles/static-apps/deploy-nextjs.md

@@ -1,6 +1,6 @@
 ---
-title: "Tutorial: Deploy server-rendered Next.js websites on App Service Static Apps"
-description: "Build with JAMstack: Generate and deploy Next.js dynamic sites with App Service Static App."
+title: "Tutorial: Deploy server-rendered Next.js websites on Azure Static Web Apps"
+description: "Generate and deploy Next.js dynamic sites with Azure Static Web Apps."
 services: #Required for articles that deal with a service; service slug assigned to your service by ACOM.
 author: christiannwamba
 ms.service: azure-functions
@@ -12,17 +12,17 @@ ms.author: chnwamba
 
 # Deploy server-rendered Next.js websites on App Service Static Apps
 
-In this tutorial, you will learn how to deploy a [Next.js](https://nextjs.org) generated static website to [Azure App Service Static Apps](overview.md). You'll learn how to set up, configure, and deploy a Next.js app. You wil also learn how to deal with the most prominent challenges you might come across when generating static pages with Next.js
+In this tutorial, you learn to deploy a [Next.js](https://nextjs.org) generated static website to [Azure Static Web Apps](overview.md). To begin, you learn to set up, configure, and deploy a Next.js app. During this process, you also learn to deal with common challenges often faced when generating static pages with Next.js
 
 ## 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
+## Set up a Next.js app
 
-You can set up a new Next.js project using `create-next-app`. Instead of a new project, let's clone a repository that is set up to demonstrate an edge case when you try to deploy a dynamic Next.js app. The repository contains an example of a dynamic site that we want to serve as a static site.
+Rather than using the Next.js CLI to create an app, you can use a starter repository that includes an existing Next.js app. This repository features a Next.js app with dynamic routes, which highlights a common deployment issue. Dynamic routes need an extra deployment configuration which you will learn more about in a moment.
 
 1. Clone starter repository:
 
@@ -58,9 +58,9 @@ When you click on a framework/library, you should see a details page about the s
 
 ## Generate a static website from Next.js build
 
-When you build a Next.js site using `npm run build`, it only builds the app to be served like a regular web app, not a static site. Here is how to generate a static site from the 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. Configure static routes--create a _next.config.js_ file at the root of your project and add the following route config:
+1. To configure static routes, create file named _next.config.js_ at the root of your project.
 
     ```javascript
     module.exports = {
@@ -73,9 +73,9 @@ When you build a Next.js site using `npm run build`, it only builds the app to b
     };
     ```
     
-  This configuration will map `/` to the Next.js page that is served for `/`, and that is the _pages/index.js_ page file.
+  This configuration maps `/` to the Next.js page that is served for the `/` route, and that is the _pages/index.js_ page file.
 
-1. Update the _package.json_'s build script to also generate a static site after building, using the `next export` command:
+1. 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.
 
     ```json
     "scripts": {
@@ -84,22 +84,22 @@ When you build a Next.js site using `npm run build`, it only builds the app to b
     },
     ```
 
-    App Service Static Apps will run the `build` script every time you push a commit.
+    Now with this command in place, Static Web Apps will run the `build` script every time you push a commit.
 
 1. Generate a static site:
 
     ```bash
     npm run build
     ```
 
-    The static site will be generated and copied into an _out_ folder at the root of your working directory.
+    The static site is generated and copied into an _out_ folder at the root of your working directory.
 
     > [!NOTE]
-    > This folder is ignored in _.gitignore_ because it should be generated by CI/CD when you deploy.
+    > This folder is listed in the _.gitignore_ file because it should be generated by CI/CD when you deploy.
 
 ## Push your static website to GitHub
 
-App Service Static Apps will deploy your app from a GitHub repository and it will keep doing so for every pushed commit. Set up a repository:
+Azure Static Web Apps deploys your app from a GitHub repository and keeps doing so for every pushed commit to a designated branch. Use the following command to set up a repository.
 
 1. Initialize a git repo
 
@@ -130,37 +130,37 @@ App Service Static Apps will deploy your app from a GitHub repository and it wil
 
 ## Deploy your static website
 
-The following steps show how to create a new static site app and deploy it to a production environment.
+The following steps show how to deploy the app you just pushed to GitHub to Azure Static Web Apps. Once in Azure you can deploy the application to a production environment.
 
 ### Create Azure App Service Static App
 
 1. Navigate to the [Azure Portal](https://portal.azure.com).
-1. Click **Create a Resource** then search for **Static App** and select it.
+1. Click **Create a Resource** then search for **Static Web Apps** and select the matching result.
 
   [Image of Static App]
 
 1. Select a subscription from the *Subscription* dropdown list or use the default one.
 1. Click the **New** link below the *Resource group* dropdown. In *New resource group name*, type **nextjsstaticsite** and click **OK**
-1. Provide a globally unique name for your app in the **Name** text box. Valid characters include `a-z`, `A-Z`, `0-9`, and `-`. This value is used as the URL prefix for your static app in the format of `https://<APP_NAME>.....`
-1. In the *Region* dropdown, choose a region closest to you.
-1. Select **Basic** from the SKU dropdown.
+1. Provide a globally unique name for your app in the **Name** text box. Valid characters include `a-z`, `A-Z`, `0-9`, and `-`. This value is used as the URL prefix for your static app in the format of `https://<APP_NAME>.azurestaticapps.net`.
+1. In the *Region* drop-down, choose a region closest to you.
+1. Select **Free** from the SKU drop-down.
 
   [Image of static app form]
 
 ### Add a GitHub repository
 
-Azure App Service Static App needs access to the repository where your Next.js app lives so it can automatically deploy commits:
+The new Static Web Apps account needs access to the repository with your Next.js app so it can automatically deploy commits.
 
 1. Click the **Sign in with GitHub button**
-1. Select the **Organization** under which you created the repo for your Next.js project. It can also be your GitHub username.
-1. Find the name of the repository you created earlier and select it.
-1. Choose **master** as the branch from the *Branch* dropdown.
+1. Select the **Organization** under which you created the repo for your Next.js project, which may be your GitHub username.
+1. Find and select the name of the repository you created earlier.
+1. Choose **master** as the branch from the *Branch* drop-down.
 
   [Image of new repo form]
 
 ### Configure the build process
 
-There are few things that Azure App Service Static App can assume--things like automatically installing npm modules and running `npm run build`. There are also few you have to be explicit about, like what folder will the static app be copied to after build so the static site can be served from there.
+Azure Static Web Apps is built to automatically carry out common tasks like installing npm modules and running `npm run build` during each deployment. There are, however, a few settings like the application source folder and the build destination folder that you need to configure manually.
 
 1. Click on the **Build** tab to configure the static output folder.
 
@@ -175,21 +175,21 @@ There are few things that Azure App Service Static App can assume--things like a
 1. Once the deployment is completed, click **Go to resource**
 1. On the resource screen, click the *URL* link to open your deployed application. 
 
-## How to handle dynamic routes
+## Configure dynamic routes
 
-Head to your newly deployed site and click on one of the frameworks/libraries. Instead of getting a details page, this time, you get a 404 error page:
+Navigate to the newly-deployed site and click on one of the framework or library logos. Instead of getting a details page, you get a 404 error page.
 
 ![404 on dynamic routes](./media/deploy-nextjs/404-in-production.png)
 
-The reason for this error is, when we generated a static site with Next.js, we only did so for the home page:
+The reason for this error is because Next.js only generated the home page based on the application configuration.
 
 ```javascript
 module.exports = {
   exportTrailingSlash: true,
   exportPathMap: function() {
-  return {
-    '/': { page: '/' }
-  };
+    return {
+      '/': { page: '/' }
+    };
   }
 };
 ```
@@ -211,8 +211,8 @@ module.exports = {
 
     projects.forEach((project) => {
       paths[`/project/${project.slug}`] = {
-      page: '/project/[path]',
-      query: { path: project.slug },
+        page: '/project/[path]',
+        query: { path: project.slug },
       };
     });
 
@@ -222,16 +222,12 @@ module.exports = {
   ```
 
   > [!NOTE]
-  > `exportPathMap` is an async function, so you can make a request to an API in this function and use the returned list to generate the paths.
+  > The `exportPathMap` function is an async function, so you can make a request to an API in this function and use the returned list to generate the paths.
 
-1. Push the new changes to your GitHub repository and wait for a few minutes while GitHub Actions builds your site again. After the build, the 404 error will be gone:
+1. Push the new changes to your GitHub repository and wait for a few minutes while GitHub Actions builds your site again. After the build is complete, the 404 error disappears.
 
   ![404 on dynamic routes fixed](./media/deploy-nextjs/404-in-production-fixed.png)
 
-## Summary
-
-In this *tutorial*, you created a Next.js static website with dynamic routes and deployed it to App Service Static Site using GitHub Actions.
 
-## Next Steps
 > [!div class="nextstepaction"]
-> [Set up a custom domain in app service static apps](custom-domain.md)
+> [Set up a custom domain](custom-domain.md)