add nextjs server side rendering include

Author: craigshoemaker

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

@@ -119,6 +119,10 @@ Once GitHub Actions workflow is complete, you can select the URL link to open th
 
 1. Open the project in Visual Studio Code or your preferred code editor.
 
+## Set up server side rendering
+
+[!INCLUDE [Server side rendering](../../includes/static-web-apps/static-web-apps-nextjs-backends.md)]
+
 ## Add Server-Rendered data with a Server Component
 
 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.
@@ -135,7 +139,7 @@ To add server-rendered data in your Next.js project using the App Router, edit a
     ```
 
 1. Import `unstable_noStore` from `next/cache` and call it within the `Home` component to ensure the route is dynamically rendered.
-   
+
     ```ts
     import { unstable_noStore as noStore } from 'next/cache';
 
@@ -196,6 +200,7 @@ Begin by adding an API route.
     ```
 
 1. Create a new file at `app/components/CurrentTimeFromAPI.tsx`. This component creates a container for the Client Component that fetches the API from the browser.
+
 1. Add a client component that fetches the API in this file.
 
     ```ts
@@ -248,7 +253,7 @@ This Client Component fetches the API with a `useEffect` React hook to render th
         );
     }
     ```
-   
+
 1. The result from the API route is displayed on the page.
 
 :::image type="content" source="media/deploy-nextjs/nextjs-13-home-display.png" alt-text="Screenshot showing the display the output from the API route.":::
@@ -298,6 +303,7 @@ When your application size exceeds 250 MB, the Next.js [Output File Tracing](htt
 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.
 
 In order to enable the `standalone` feature, add the following property to your `next.config.js`:
+
 ```js
 module.exports ={
     output:"standalone",

articles/static-web-apps/nextjs.md

@@ -28,7 +28,6 @@ With hybrid Next.js applications, pages and components can be dynamically render
 
 Key features that are available in the preview are:
 
-
 - [App Router](https://nextjs.org/docs/app) and [Pages Router](https://nextjs.org/docs/pages)
 - [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
 - [Hybrid rendering](https://nextjs.org/docs/app/building-your-application/rendering/server-components#server-rendering-strategies)
@@ -42,6 +41,9 @@ Follow the [deploy hybrid Next.js applications](deploy-nextjs-hybrid.md) tutoria
 
 [!INCLUDE [Unsupported Next.js features](../../includes/static-web-apps-nextjs-unsupported.md)]
 
+## Server side rendering
+
+[!INCLUDE [Server side rendering](../../includes/static-web-apps/static-web-apps-nextjs-backends.md)]
 
 ## Static HTML export
 

includes/static-web-apps/static-web-apps-nextjs-backends.md

@@ -0,0 +1,27 @@
+---
+author: craigshoemaker
+ms.service: static-web-apps
+ms.topic:  include
+ms.date: 04/25/2024
+ms.author: cshoe
+---
+
+Next.js applications that use server-side rendering require a dedicated Azure App Service as the deployment destination for the backend of the application. Once you have this hosting plan, you can link your static web app to the App Service plan.
+
+When you link the backend resource to your Next.js app, server-side requests are served from the backend server.
+
+Use the following steps to link your App Service plan to your static web app: 
+
+1. Create an Azure App Service under the **S1** plan.
+
+1. Go to your static web app in the Azure portal.
+
+1. In the *Settings* section, select **APIs**.
+
+1. Append the following text to the end of the URL in your browser's location:
+
+    ```text
+    exp.AzurePortal_enable-nextjs=true
+    ```
+
+    Once you complete these steps, you can link your static web app to your App Service plan using this screen.