Skip to content

Commit aab80e6

Browse files
acrolinx updates
1 parent 7f2fae9 commit aab80e6

File tree

1 file changed

+12
-10
lines changed

1 file changed

+12
-10
lines changed

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ services: static-web-apps
55
author: aaronpowell
66
ms.service: static-web-apps
77
ms.topic: tutorial
8-
ms.date: 10/12/2022
8+
ms.date: 04/25/2024
99
ms.author: aapowell
1010
ms.custom: devx-track-js
1111
---
@@ -121,7 +121,7 @@ Once GitHub Actions workflow is complete, you can select the URL link to open th
121121

122122
## Add Server-Rendered data with a Server Component
123123

124-
To add server-rendered data in your Next.js project using the App Router, edit a Next.js component to add a server-side operations to render data in the component. By default, Next.js components are [Server Components](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) that can be server-rendered.
124+
To add server-rendered data in your Next.js project using the App Router, edit a Next.js component to add a server-side operation to render data in the component. By default, Next.js components are [Server Components](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating) that can be server-rendered.
125125

126126
1. Open the `app/page.tsx` file and add an operation that sets the value of a variable, which is computed server-side. Examples include fetching data or other server operations.
127127

@@ -293,18 +293,19 @@ Next.js uses environment variables at build time and at request time, to support
293293
294294
## Enable standalone feature
295295
296-
When your application size exceeds 250Mb, the Next.js [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing) feature helps optimize the app size and enhance performance.
296+
When your application size exceeds 250 MB, the Next.js [Output File Tracing](https://nextjs.org/docs/advanced-features/output-file-tracing) feature helps optimize the app size and enhance performance.
297297
298-
Output File Tracing creates a compressed version of the whole application with necessary package dependencies built into a folder named *.next/standalone*. This folder is meant to deploy on its own without additional *node_modules* dependencies.
298+
Output File Tracing creates a compressed version of the whole application with necessary package dependencies. This package is built into a folder named _.next/standalone_. With this package, your app can deploy on its own without _node_modules_ dependencies.
299299
300-
In order to enable the `standalone` feature, add the following additional property to your `next.config.js`:
300+
In order to enable the `standalone` feature, add the following property to your `next.config.js`:
301301
```js
302302
module.exports ={
303303
output:"standalone",
304304
}
305305
```
306306
307-
You will also need to configure the `build` command in the `package.json` file in order to copy static files to your standalone output.
307+
Next, configure the `build` command in the `package.json` file in order to copy static files to your standalone output.
308+
308309
```json
309310
{
310311
...
@@ -319,7 +320,7 @@ You will also need to configure the `build` command in the `package.json` file i
319320
320321
## Configure your Next.js routing and middleware for deployment to Azure Static Web Apps
321322
322-
Your Next.js project can be configured to have custom handling of routes with redirects, rewrites, and middleware. These handlers are commonly used for authentication, personalization, routing, and internationalization. Custom handling affects the default routing of your Next.js site and the configuration must be compatible with hosting on Static Web Apps.
323+
Your Next.js project can be configured to have custom handling of routes with redirects, rewrites, and middleware. These handlers are commonly used for authentication, personalization, routing, and internationalization. Custom handling affects the default routing of your Next.js site and the configuration must be compatible with hosting on Static Web Apps.
323324
324325
Static Web Apps validates that your Next.js site is successfully deployed by adding a page to your site at build time. The page is named `public/.swa/health.html`, and Static Web Apps verifies the successful startup and deployment of your site by navigating to `/.swa/health.html` and verifying a successful response. Middleware and custom routing, which includes redirects and rewrites, can affect the access of the `/.swa/health.html` path, which can prevent Static Web Apps' deployment validation. To configure middleware and routing for a successful deployment to Static Web Apps, follow these steps:
325326
@@ -353,7 +354,7 @@ Static Web Apps validates that your Next.js site is successfully deployed by add
353354
};
354355
```
355356
356-
1. Configure your rewrites in `next.config.js` to exclude routes starting with `.swa`
357+
1. Configure your rewrite rules in `next.config.js` to exclude routes starting with `.swa`
357358
358359
```js
359360
module.exports = {
@@ -369,11 +370,12 @@ Static Web Apps validates that your Next.js site is successfully deployed by add
369370
},
370371
};
371372
```
372-
These code snippets exclude paths that start with `.swa` from being handled by your custom routing or middleware. These rules ensure that the paths resolve as expected during deployment validation.
373+
374+
These code snippets exclude paths that start with `.swa` to stop your custom routing or middleware from processing these requests. These rules ensure that the paths resolve as expected during deployment validation.
373375
374376
## Enable logging for Next.js
375377
376-
Following best practices for Next.js server API troubleshooting, add logging to the API to catch these errors. Logging on Azure uses **Application Insights**. In order to preload this SDK, you need to create a custom start up script. To learn more:
378+
Following best practices for Next.js server API troubleshooting, add logging to the API to catch these errors. Logging on Azure uses **Application Insights**. In order to preload this SDK, you need to create a custom startup script. To learn more:
377379
378380
* [Example preload script for Application Insights + Next.js](https://medium.com/microsoftazure/enabling-the-node-js-application-insights-sdk-in-next-js-746762d92507)
379381
* [GitHub issue](https://github.com/microsoft/ApplicationInsights-node.js/issues/808)

0 commit comments

Comments
 (0)