DevExtreme CLI: add React Next.js info

MenuConfig.xml

@@ -39,7 +39,6 @@
   <MenuRule Destination="050 Getting Started/32 Rollup Configuration" SourcePattern="Howto:^40 Angular Components/10 Getting Started/30 Other Approaches/06 Using Rollup" VisibleFor="Angular" />
   <MenuRule Destination="050 Getting Started/33 Ionic Configuration" SourcePattern="Howto:^40 Angular Components/10 Getting Started/30 Other Approaches/05 Using Ionic" VisibleFor="Angular" />
   <MenuRule Destination="050 Getting Started/34 Gatsby Configuration" SourcePattern="Howto:^Common/Integration Guides/10 Create a DevExtreme application with Gatsby"/>
-  <MenuRule Destination="050 Getting Started/35 Next.js Configuration" SourcePattern="Howto:^Common/Integration Guides/20 Create a DevExtreme application with Next.js"/>
   <MenuRule Destination="050 Getting Started/36 Vite Configuration" SourcePattern="Howto:^Common/Integration Guides/30 Create a DevExtreme application with Vite.js"/>
 
   <MenuRule Destination="070 Licensing" SourcePattern="Howto:^Common/Licensing" />

concepts/50 React Components/50 Application Template/00 Application Template.md

@@ -1,4 +1,8 @@
-The DevExtreme React Application Template helps you create a simple React application with a navigation menu and several sample views in a responsive layout (see <a href="https://devexpress.github.io/devextreme-react-template/#/home">live preview</a>).
+The DevExtreme React Application Template allows you to speed up the process of setting up a new React project that integrates the DevExtreme UI library. The template includes multiple components such as [DataGrid](/Documentation/Guide/UI_Components/DataGrid/Overview/), [Form](/Documentation/Guide/UI_Components/Form/Overview/), [TreeView](/Documentation/Guide/UI_Components/TreeView/Getting_Started_with_TreeView/), and more. Multiple sample views are included, as well as placeholder authentication functions for implementing a secure log-in system.
+
+#include btn-open-github with {
+    href: "https://devexpress.github.io/devextreme-react-template/#/home"
+}
 
 <img src="/images/dx-application-templates/react-app-template.png" style="width: 800px;" alt="DevExtreme React Template" />
 

concepts/50 React Components/50 Application Template/05 Generate a New Application.md

@@ -1,7 +1,13 @@
-    npx devextreme-cli new react-app app-name
-    // ===== or generate a template with TypeScript =====
-    npx devextreme-cli new react-app app-name --template=typescript
-    cd app-name
-    npm run start
+You can create a new DevExtreme React Application Template with Vite or Next.js. Specify the `devextreme-cli new` command's `--app-type` argument to select an app type. If you leave the argument unspecified, the command prompts you to choose an app type.
+
+    // ===== generate a react app with Vite =====
+    npx devextreme-cli new react-app app-name --app-type=vite
+    // ===== generate a react app with Next.js =====
+    npx devextreme-cli new react-app app-name --app-type=nextjs
+
+[note] For more information on the `devextreme-cli new react-app` command, refer to the [DevExtreme CLI - Create a New Application](/Documentation/Guide/Common/DevExtreme_CLI/#DevExtreme_Application/Create_a_New_Application) help topic.
 
-The application already contains the [DataGrid](https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/Overview) and [Form](https://js.devexpress.com/Demos/WidgetsGallery/Demo/Form/Overview) components. You can find their configurations in the `src\pages\tasks\tasks.js` and `src\pages\profile\profile.js` files correspondingly.
+Execute the following commands to run the generated application:
+
+    cd app-name
+    npm run dev

concepts/50 React Components/50 Application Template/10 Layouts.md

@@ -1,4 +1,4 @@
-The application includes two layouts. The only difference between them is where the toolbar is located: outer (default) or inner toolbar.
+The application template includes two layouts. The only difference between them is what type of toolbar is implemented: outer (default) or inner.
 
 **Outer toolbar**
 <br/>
@@ -9,13 +9,17 @@ The application includes two layouts. The only difference between them is where
 <img src="/images/dx-application-templates/inner.png" style="width: 800px;" alt="Inner toolbar expanded" />
 <br/>
 
-To switch to another layout, open the `src\Content.js` file and replace the `SideNavOuterToolbar` import with `SideNavInnerToolbar`:
+To switch to another layout: 
 
-    <!-- tab: Content.js -->
-    import {
-      SideNavInnerToolbar as SideNavBarLayout,
-      SingleCard
-    } from './layouts';
+- If your project uses Vite, replace the `SideNavOuterToolbar` import with `SideNavInnerToolbar` in `src\Content.js`.
+
+        <!-- tab: Content.js -->
+        import { SideNavInnerToolbar as SideNavBarLayout, SingleCard } from './layouts';
+
+- If your project uses Next.js, replace the `SideNavOuterToolbar` import with `SideNavInnerToolbar` in `src\app\pages\layout.jsx`.
+
+        <!-- tab: Content.js -->
+        import { SideNavInnerToolbar as SideNavBarLayout, SingleCard } from './src/layouts/index';
 
 To generate a new application with an inner toolbar, set the `--layout` flag to `side-nav-inner-toolbar`:
 

concepts/50 React Components/50 Application Template/20 Add a New View.md

@@ -2,4 +2,9 @@ Run the following command to add a new view. `--icon` specifies an icon from the
 
     npx devextreme add view view-name [--icon=IconName]
 
-You can find the added view under the `src\pages` folder. This command also creates a navigation menu item for the added view in the `src\app-navigation.js` file.
+You can find the added view in:
+
+- `src\pages` if your project uses Vite.
+- `src\app\pages` if your project uses Next.js. 
+
+The `devextreme add view` command also creates a navigation menu item for the added view in `src\app-navigation.js`.

concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/10 Configure Menu Items.md

@@ -1,4 +1,6 @@
-Edit the `src\app-navigation.js` file to configure navigation menu items. Each item configuration can have the following fields:
+To configure navigation menu items, edit `src\app-navigation.js`.
+
+Each item configuration has the following fields:
 
 - **text** - the item's text
 
@@ -8,7 +10,7 @@ Edit the `src\app-navigation.js` file to configure navigation menu items. Each i
 
 - **items** - child items
 
-[note] A menu item should either navigate to a page OR include subitems. For that reason, do not specify both **path** and **items** for the same menu item.
+[note] A menu item should either navigate to a page OR include subitems. Do not specify both **path** and **items** for the same menu item.
 
     <!-- tab: JavaScript -->
     {

concepts/50 React Components/50 Application Template/30 Configure the Navigation Menu/20 Hide the Menu in the Closed State.md

@@ -1,11 +1,11 @@
-In the closed state, the navigation menu is partially visible because it displays item icons. If the items do not have icons, you can hide the menu. To do this, open the `SideNavOuterToolbar` or `SideNavInnerToolbar` component (depending on the used [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts')), find the [Drawer](/api-reference/10%20UI%20Components/dxDrawer '/Documentation/ApiReference/UI_Components/dxDrawer/') configuration, and set its [minSize](/api-reference/10%20UI%20Components/dxDrawer/1%20Configuration/minSize.md '/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#minSize') property to 0:
+In its closed state, the navigation menu is partially visible as it displays item icons. If items do not have icons, you can hide the menu. In the `SideNavOuterToolbar` or `SideNavInnerToolbar` component (depending on which [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts') your project uses), find the [Drawer](/api-reference/10%20UI%20Components/dxDrawer '/Documentation/ApiReference/UI_Components/dxDrawer/') configuration and set its [minSize](/api-reference/10%20UI%20Components/dxDrawer/1%20Configuration/minSize.md '/Documentation/ApiReference/UI_Components/dxDrawer/Configuration/#minSize') property to 0:
 
     <!-- tab: side-nav-outer-toolbar.js -->
     // ...
     export default function ({ title, children }) {
         // ...
         return (
-            <div className={'side-nav-inner-toolbar'}>
+            <div className={'side-nav-outer-toolbar'}>
                 <Drawer ...
                     minSize={0}>
                     {/* ... */}

concepts/50 React Components/50 Application Template/35 Add a Custom Toolbar Item.md

@@ -1,4 +1,6 @@
-The application template uses the DevExtreme [Toolbar](/api-reference/10%20UI%20Components/dxToolbar '/Documentation/ApiReference/UI_Components/dxToolbar/') component. The Toolbar is part of the `Header` component whose configuration is in the `src\components\header\Header.js` file. To add a custom toolbar item, open this file and add an `Item` element inside `Toolbar`. Refer to the [items](/api-reference/10%20UI%20Components/dxToolbar/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/') help section for information on `Item` properties.
+The application template uses the DevExtreme [Toolbar](/api-reference/10%20UI%20Components/dxToolbar '/Documentation/ApiReference/UI_Components/dxToolbar/') component. The Toolbar is part of the `Header` component. To add a custom toolbar item, add an `Item` element inside `Toolbar` in `src\components\header\Header.js`.
+
+Refer to the [items](/api-reference/10%20UI%20Components/dxToolbar/1%20Configuration/items '/Documentation/ApiReference/UI_Components/dxToolbar/Configuration/items/') help section for information on `Item` properties.
 
 The following code adds a search button to the toolbar:
 
@@ -34,4 +36,4 @@ The following code adds a search button to the toolbar:
         );
     }
 
-In the code above, the button click handler is declared in the `SideNavOuterToolbar` component. This component applies when the outer toolbar [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts') is used. If the application uses the inner toolbar layout, add the same code to the `SideNavInnerToolbar` component.
+In the code above, the button click handler is declared in the `SideNavOuterToolbar` component. This component applies when the outer toolbar [layout](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts') is used. If your application uses the inner toolbar layout, add the same code to the `SideNavInnerToolbar` component.

concepts/50 React Components/50 Application Template/40 Configure Themes/10 Switch the Theme.md

@@ -1,14 +1,14 @@
 [note]
 
-For more information about switching themes, refer to the following help topic: [Switch Between Themes at Runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime'). You can also take a look at this GitHub Example:
+For more information about switching themes, refer to the following help topic: [Switch Between Themes at Runtime](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/60%20Switch%20Between%20Themes%20at%20Runtime '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Switch_Between_Themes_at_Runtime'). You can also refer the following GitHub example:
 
 #include btn-open-github with {
     href: "https://github.com/DevExpress-Examples/devextreme-project-template-theme-selector"
 }
 
 [/note]
 
-You can switch between themes in the DevExtreme React Template. `src\theme.tsx` contains the theme switcher logic.
+You can switch between themes in the DevExtreme React Template. You can find the theme switcher logic in `src\theme.js`.
 
 The template uses a main theme for view content and an additional theme ([color swatch](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/55%20Color%20Swatches.md '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Color_Swatches')) for the navigation menu. The corresponding .JSON files are shown below.
 
@@ -30,7 +30,7 @@ The template uses a main theme for view content and an additional theme ([color
     </tr>
 </table>
 
-The default theme is `fluent.blue.light`. To switch to another theme, open the .JSON file and assign the theme name to the `baseTheme` field:
+The default theme is `fluent.blue.light`. To switch to another theme, open the .JSON files mentioned above and assign a new theme to the `baseTheme` field:
 
     <!-- tab: metadata.base.json -->
     {
@@ -64,6 +64,6 @@ You can find all theme names in the [Predefined Themes](/concepts/60%20Themes%20
 
 [important] If you use a Generic theme, add the `generic.` prefix. For instance, `generic.dark` instead of `dark`.
 
-After making changes in the .JSON files, run the following command to rebuild themes:
+After making changes in theme .JSON files, run the following command to rebuild themes:
 
     npm run build-themes

concepts/50 React Components/50 Application Template/40 Configure Themes/20 Create a Custom Theme.md

@@ -1,6 +1,6 @@
 You can use the [DevExtreme ThemeBuilder](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/') to create custom themes based on predefined themes. Follow the steps below:
 
-1. [Import](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/01%20Get%20Started/7%20Import%20an%20Existing%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Import_an_Existing_Theme') [theme .JSON file](/concepts/50%20React%20Components/50%20Application%20Template/40%20Configure%20Themes/10%20Switch%20the%20Theme.md '/Documentation/Guide/React_Components/Application_Template/#Configure_Themes/Switch_the_Theme') to the ThemeBuilder.
+1. [Import](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/01%20Get%20Started/7%20Import%20an%20Existing%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Get_Started/Import_an_Existing_Theme') a [theme .JSON file](/concepts/50%20React%20Components/50%20Application%20Template/40%20Configure%20Themes/10%20Switch%20the%20Theme.md '/Documentation/Guide/React_Components/Application_Template/#Configure_Themes/Switch_the_Theme') into ThemeBuilder.
 
 1. [Customize the theme](/concepts/60%20Themes%20and%20Styles/08%20ThemeBuilder/10%20Customize%20the%20Theme.md '/Documentation/Guide/Themes_and_Styles/ThemeBuilder/#Customize_the_Theme').
 

concepts/50 React Components/50 Application Template/40 Configure Themes/30 Apply a Color Swatch.md

@@ -1,6 +1,8 @@
 [Color swatches](/concepts/60%20Themes%20and%20Styles/05%20Predefined%20Themes/55%20Color%20Swatches.md '/Documentation/Guide/Themes_and_Styles/Predefined_Themes/#Color_Swatches') are secondary color schemes used alongside a primary color scheme.
 
-In the DevExtreme React Template, a  color swatch is applied to the navigation menu. You can configure it in the `src\themes\metadata.additional.json` and `src\themes\metadata.additional.dark.json` files. To use this color swatch on an element, add the `dx-swatch-additional` class (or `dx-swatch-additional-dark` for a dark theme) to the element:
+In the DevExtreme React Template, a color swatch is applied to the navigation menu. You can configure this color swatch in `src\themes\metadata.additional.json` and `src\themes\metadata.additional.dark.json`.
+
+To use this color swatch on an element, add the `dx-swatch-additional` class (or `dx-swatch-additional-dark` for a dark theme) to the element:
 
     <!-- tab: TSX -->
     <div className={`dx-swatch-additional${theme?.isDark() ? '-dark' : ''}`}>

concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md

@@ -1,4 +1,4 @@
-Theme variables are defined in the `src\variables.scss` file. Apply the variables to custom elements, so that the elements have a uniform appearance with the rest of the application.
+Theme variables are defined in `src\variables.scss`. Apply the variables to custom elements, so that the elements have a uniform appearance with the rest of the application.
 
 The following code applies the `var(--base-accent)` variable as the `background-color` of `my-element`:
 

concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md

@@ -1,5 +1 @@
-A DevExtreme React application includes authentication UI and API. Client-side routing is configured so that unauthenticated users can navigate to authentication pages only. These pages allow the users to sign in, create a new account, or reset the password.
-
-Authentication pages are rendered by the `UnauthenticatedContent.js` component. The rest of the application is rendered by the `Content.js` component.
-
-[important] Do not rely on client-side routing to protect your application from unauthorized access. Always verify user credentials on the back end.
+The DevExtreme React Application Template offers authentication UI and functions, including multiple authentication pages. These pages allow users to sign in, create accounts, and reset or change their passwords. The authentication functionality of the Vite and Next.js templates are different.

concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md

@@ -0,0 +1,3 @@
+The Vite template offers stub functions that utilize [React Router](https://reactrouter.com/) for authentication with client-side routing. The `UnauthenticatedContent.js` component renders authentication pages. The `Content.js` component renders the rest of the application.
+
+[important] Do not rely on client-side routing to protect your application from unauthorized access. Always verify user credentials on the back end.

concepts/50 React Components/50 Application Template/45 Authentication/10 Integrate with a Back End.md → concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Authentication Functions.md

@@ -1,4 +1,4 @@
-Stub authentication functions for back-end requests are located in the `src\api\auth.js` file. Update these functions to make actual requests to your back end.
+Authentication functions for back-end requests are located in `src\api\auth.js`. You must update these functions to make requests to your server, such as to add or verify users.
 
 Each function returns an object with the following fields:
 
@@ -9,7 +9,7 @@ Each function returns an object with the following fields:
     </tr>
     <tr>
         <td>isOk</td>
-        <td>A Boolean value that is <b>true</b> if the request was successful and <b>false</b> otherwise.</td>
+        <td>A Boolean value that represents whether the request was successful.</td>
     </tr>
     <tr>
         <td>message</td>
@@ -19,4 +19,4 @@ Each function returns an object with the following fields:
         <td>data</td>
         <td>The request result (user information).</td>
     </tr>
-</table>
+</table>

concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/00 Next.js Authentication.md

@@ -0,0 +1,3 @@
+The Next.js template implements server-side routing and authentication. The implementation follows the [Next.js Authentication Guide](https://nextjs.org/docs/app/guides/authentication) and offers session management with JSON Web Tokens (JWTs).
+
+[note] The Next.js template utilizes the third-party [Jose](https://www.npmjs.com/package/jose) session management library.

concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md

@@ -0,0 +1,10 @@
+To implement authentication functions in the Next.js template, define a session key first. This key is used to encrypt session cookies. You can find it in `application\.env`:    
+
+    <!-- tab: .env -->
+    SESSION_SECRET=<your_secret_key_goes_here>
+
+You can generate a secret key with the `openssl` command in terminal:
+
+    openssl rand -base64 32
+
+[important] To ensure the security of your application, define a unique session key.

concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md

@@ -0,0 +1,18 @@
+Authentication functions for back-end requests are located in `src\app\actions\auth.jsx`. You must update these functions to make requests to your server, such as to add or verify users.
+
+Each function returns an object with the following fields:
+
+<table class="dx-table">
+    <tr>
+        <th>Field</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+        <td>isOk</td>
+        <td>A Boolean value that represents whether the request was successful.</td>
+    </tr>
+    <tr>
+        <td>message</td>
+        <td>An error message (if an error occurred).</td>
+    </tr>
+</table>

concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md

@@ -0,0 +1,3 @@
+Authorization functions allow you to verify if a given user has access to certain pages in your project. If a user is not authorized, you can redirect them to an authorization page. These functions are located in `middleware.js` in the root directory of your project.
+
+[note] The Next.js template includes a `_DEMO_logIn()` function in `middleware.js` that allows you to test your application in development without authorization. Remove this function and implement redirects in production.