You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/static-web-apps/deploy-nextjs-hybrid.md
+12-10Lines changed: 12 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ services: static-web-apps
5
5
author: aaronpowell
6
6
ms.service: static-web-apps
7
7
ms.topic: tutorial
8
-
ms.date: 10/12/2022
8
+
ms.date: 04/25/2024
9
9
ms.author: aapowell
10
10
ms.custom: devx-track-js
11
11
---
@@ -121,7 +121,7 @@ Once GitHub Actions workflow is complete, you can select the URL link to open th
121
121
122
122
## Add Server-Rendered data with a Server Component
123
123
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.
125
125
126
126
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.
127
127
@@ -293,18 +293,19 @@ Next.js uses environment variables at build time and at request time, to support
293
293
294
294
## Enable standalone feature
295
295
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.
297
297
298
-
Output File Tracing creates a compressed version of the whole application with necessary package dependenciesbuilt 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.
299
299
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`:
301
301
```js
302
302
module.exports ={
303
303
output:"standalone",
304
304
}
305
305
```
306
306
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
+
308
309
```json
309
310
{
310
311
...
@@ -319,7 +320,7 @@ You will also need to configure the `build` command in the `package.json` file i
319
320
320
321
## Configure your Next.js routing and middleware for deployment to Azure Static Web Apps
321
322
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.
323
324
324
325
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:
325
326
@@ -353,7 +354,7 @@ Static Web Apps validates that your Next.js site is successfully deployed by add
353
354
};
354
355
```
355
356
356
-
1. Configure your rewritesin`next.config.js` to exclude routes starting with `.swa`
357
+
1. Configure your rewrite rulesin`next.config.js` to exclude routes starting with `.swa`
357
358
358
359
```js
359
360
module.exports = {
@@ -369,11 +370,12 @@ Static Web Apps validates that your Next.js site is successfully deployed by add
369
370
},
370
371
};
371
372
```
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.
373
375
374
376
## Enable logging for Next.js
375
377
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:
377
379
378
380
* [Example preload script for Application Insights + Next.js](https://medium.com/microsoftazure/enabling-the-node-js-application-insights-sdk-in-next-js-746762d92507)
0 commit comments