diff --git a/concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md b/concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md
index 11a50d74a9f..69241e7d329 100644
--- a/concepts/50 React Components/50 Application Template/40 Configure Themes/40 Apply Theme Variables to Custom Elements.md
+++ b/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`:
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md
index 32941975547..2a29eb94d2a 100644
--- a/concepts/50 React Components/50 Application Template/45 Authentication/00 Authentication.md
+++ b/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.
\ No newline at end of file
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/00 Vite Authentication.md
new file mode 100644
index 00000000000..1841071c218
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/10 Integrate with a Back End.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Authentication Functions.md
similarity index 58%
rename from concepts/50 React Components/50 Application Template/45 Authentication/10 Integrate with a Back End.md
rename to concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/10 Implement Authentication Functions.md
index 7127ac3698d..fb400dd5ca8 100644
--- a/concepts/50 React Components/50 Application Template/45 Authentication/10 Integrate with a Back End.md
+++ b/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:
| isOk |
- A Boolean value that is true if the request was successful and false otherwise. |
+ A Boolean value that represents whether the request was successful. |
| message |
@@ -19,4 +19,4 @@ Each function returns an object with the following fields:
data |
The request result (user information). |
-
+
\ No newline at end of file
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Get User Information.md b/concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md
similarity index 100%
rename from concepts/50 React Components/50 Application Template/45 Authentication/20 Get User Information.md
rename to concepts/50 React Components/50 Application Template/45 Authentication/10 Vite Authentication/20 Get User Information.md
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/00 Next.js Authentication.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/00 Next.js Authentication.md
new file mode 100644
index 00000000000..27911dfa8d3
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/10 Generate Session Key.md
new file mode 100644
index 00000000000..5ad82a56d0c
--- /dev/null
+++ b/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`:
+
+
+ SESSION_SECRET=
+
+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.
\ No newline at end of file
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/20 Implement Authentication Functions.md
new file mode 100644
index 00000000000..b152fa022e2
--- /dev/null
+++ b/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:
+
+
+
+ | Field |
+ Description |
+
+
+ | isOk |
+ A Boolean value that represents whether the request was successful. |
+
+
+ | message |
+ An error message (if an error occurred). |
+
+
\ No newline at end of file
diff --git a/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md b/concepts/50 React Components/50 Application Template/45 Authentication/20 Next.js Authentication/30 Implement Authorization Functions.md
new file mode 100644
index 00000000000..c931b1e0851
--- /dev/null
+++ b/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.
\ No newline at end of file
diff --git a/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md b/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md
index 8a8973f4705..6445e70c712 100644
--- a/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md
+++ b/concepts/50 React Components/50 Application Template/50 Create an Empty Application.md
@@ -1,6 +1,7 @@
-To generate an application with empty data, use the `--empty` flag (the layout remains the same):
+To generate an application without sample data, specify the `--empty` flag. The application's layout remains the same.
npx devextreme-cli new react-app app-name --empty
#####See Also#####
-- [Add DevExtreme to a React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/')
\ No newline at end of file
+- [Add DevExtreme to a React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/')
+- [DevExtreme CLI - Create a New Application](/Documentation/Guide/Common/DevExtreme_CLI/#DevExtreme_Application/Create_a_New_Application)
\ No newline at end of file
diff --git a/concepts/Common/DevExtreme CLI/00 Requirements.md b/concepts/Common/DevExtreme CLI/00 Requirements.md
index e736e3a757b..e61cc2cb512 100644
--- a/concepts/Common/DevExtreme CLI/00 Requirements.md
+++ b/concepts/Common/DevExtreme CLI/00 Requirements.md
@@ -1,4 +1,4 @@
- Node.js v18.0.0 or later
-- npm v6.2.0 or later
+- npm v8.0.0 or later
[tags] angular, vue, react
\ No newline at end of file
diff --git a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md
index cdc17488f05..c05011aadb4 100644
--- a/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md
+++ b/concepts/Common/DevExtreme CLI/10 Add DevExtreme to an Existing Application.md
@@ -43,6 +43,12 @@ This command does the following:
These steps are explained in the [Add DevExtreme to a React Application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') article.
+The `add devextreme-react` command supports React apps created with Vite and Next.js. DevExtreme CLI supports Next.js apps created with the following option combinations:
+
+- With or without a `src` folder.
+- Using TypeScript or JavaScript.
+- With or without App Router.
+
Once the command is executed, [import DevExtreme components](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/60%20Import%20DevExtreme%20Components.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/#Import_DevExtreme_Components').
---
diff --git a/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md b/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md
index c2d3324544f..37c37debd28 100644
--- a/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md
+++ b/concepts/Common/DevExtreme CLI/20 DevExtreme Application/10 Create a New Application.md
@@ -47,9 +47,9 @@ Specifies whether to generate a Vue 2 or Vue 3 application. Available values: `2
Creates a new DevExtreme React application that uses the [DevExtreme layout template](/concepts/50%20React%20Components/50%20Application%20Template/00%20Application%20Template.md '/Documentation/Guide/React_Components/Application_Template/'):
- devextreme new react-app app-name [--layout][--empty]
+ devextreme new react-app app-name [--layout][--empty][--template][--app-type][--transpiler]
// ===== or without installing the DevExtreme CLI =====
- npx devextreme-cli new react-app app-name [--layout][--empty]
+ npx devextreme-cli new react-app app-name [--layout][--empty][--template][--app-type][--transpiler]
Arguments:
@@ -61,10 +61,24 @@ Specifies the DevExtreme layout. Available values:
See the following topic to review both layouts: [Layouts](/concepts/50%20React%20Components/50%20Application%20Template/10%20Layouts.md '/Documentation/Guide/React_Components/Application_Template/#Layouts').
* `--empty`
-Specifies whether to skip sample view generation (default: `false`).
+Specifies whether to skip sample data generation. Available values:
+ * `false` (default)
+ * `true`
* `--template`
-Specifies whether to create an application template with TypeScript support. Available values: `javascript` and `typescript`.
+Specifies whether to create an application template with TypeScript support. Available values:
+ * `javascript`
+ * `typescript`
+
+* `--app-type`
+Specifies whether to create an application with [Next.js](https://nextjs.org/) or [Vite](https://vite.dev/). Available values:
+ * `nextjs`
+ * `vite`
+
+* `--transpiler`
+Specifies whether to use [Babel](https://babeljs.io/) or [SWC](https://swc.rs/) as a transpiler. Used only when `--app-type` is `vite`. Available values:
+ * `babel`
+ * `swc`
---
diff --git a/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md b/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md
deleted file mode 100644
index 5af12601f33..00000000000
--- a/concepts/Common/Integration Guides/20 Create a DevExtreme application with Next.js/20 Create a DevExtreme application with Next.js.md
+++ /dev/null
@@ -1,193 +0,0 @@
----
-title: DevExtreme React - Create a DevExtreme-powered Website/Application with Next.js
----
-
-Next.js is a React-based web development framework. It can generate static websites and serve dynamic content. The creators of React endorse Next.js because Next is easy to use, feature-rich, and compatible with modern web development patterns (such as server-side page rendering).
-
-This help topic details the use of DevExtreme UI components alongside the Next.js framework.
-
-## 1. Create a New Project
-
-Consult the following external webpage if you are new to Next.js: [Getting Started: Installation | Next.js (nextjs.org)](https://nextjs.org/docs/getting-started/installation).
-
-The `create-next-app` wizard allows you to bootstrap a Next.js web app in a matter of minutes.
-
-
-
-The wizard creates a folder for the project, installs the necessary dependencies, and populates the project with sample code.
-
-Run the following command to launch the wizard:
-
- npx create-next-app@latest
-
-Answer the wizard's prompts to configure your new app. For this tutorial, we enabled the following options:
-
-* TypeScript support
-* ESLint support
-* Store source code in the `src/` directory
-* Use the Next.js App Router
-
-After the wizard completes its job, you can start the development server:
-
- npm run dev
-
-If you want to run your website in **production mode**, build the project first:
-
- npm run build; npm run start
-
-The server outputs the preview URL to the console. The default URL is `http://localhost:3000`. Open the URL in the browser to view the page.
-
-
-
-Proceed to the next step when you get the server up and running.
-
-## 2. Add Static Content to the Front Page
-
-During the set-up process we selected the "Store source code in the `src/` directory" option. As such, the `src/app/page.tsx` file stores the source for your app’s front page.
-
-Let's replace page content with a simple heading and a paragraph:
-
-
- export default function Home() {
- return (
-
- Main Page
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- )
- }
-
-### Clean-up
-
-The `page.tsx` file no longer references the `page.module.css` file. Delete the CSS file from disk.
-
-The `globals.css` file contains global styles, including the setting used to configure the default background color. It is **unsafe** to remove this file. Delete the following CSS code to apply a plain background:
-
-
- body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
- }
-
-### View the server-rendered page
-
-Your page should appear as follows:
-
-
-
-Next.js rendered this content on the server. This means you can view the page in a browser that prohibits execution of client-side JavaScript. Try it yourself - go to your browser settings, disable JavaScript, and refresh the page.
-
-
-
-The page should not change.
-
-
-
-Activate JavaScript to continue the tutorial.
-
-## 3. Add a DevExtreme Grid
-
-### Install Dependencies
-
-Run the following command to install the necessary DevExtreme packages and save them to your package dependency list:
-
- npm install devextreme@25.1 devextreme-react@25.1 --save-exact
-
-### Set up the Necessary Imports
-
-Open the `page.tsx` file. Add the following `import` statements at the beginning:
-
-
- import DataGrid from 'devextreme-react/data-grid';
- import 'devextreme/dist/css/dx.light.css';
-
-The first `import` allows you to use the DataGrid component. The second applies the default "Light" theme to DevExtreme UI components.
-
-### Set up a Data Source
-
-[note] If you use [DataSource](/api-reference/30%20Data%20Layer/DataSource '/Documentation/ApiReference/Data_Layer/DataSource/'), add a [`use client` directive](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) to ensure that the instance is created on the client only. DataSource instances do not support React serialization and therefore cannot be created on the server and sent to the client.
-
-Our DataGrid requires a data source. For the purpose of this tutorial, we'll use data from the publicly available [Cat Facts API](https://catfact.ninja). Add the following asynchronous code to the `page.tsx` file:
-
-
- const getCatFacts = async (): Promise => {
- const dataResponse = await fetch("https://catfact.ninja/facts", {
- cache: "no-store", });
- const facts = (await dataResponse.json()).data;
- return facts;
- };
-
- const dataItemsPromise = getCatFacts();
-
-### Configure the DataGrid
-
-[note] The Next.js Router imposes additional limitations on DevExtreme UI components. Components without the ["use client" directive](https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs) only accept props of primitive data types. Include this directive to use custom DevExtreme data types such as `ArrayStore` and `ODataStore`.
-
-Create a new React component with the name `DemoGrid`. Use this component to define and configure a new instance of the DevExtreme DataGrid:
-
-
- const DemoGrid: React.FC = async () => {
- const dataItems = await dataItemsPromise; // Load the data from the Cat Facts API
- return (
- <>
-
-
-
- );
- }
-
-### Insert the DataGrid Into the Page
-
-Modify the Home function to include the `DemoGrid` component we created in the previous step:
-
-
- export default function Home() {
- return (
-
- Main Page
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
- )
- }
-
-### View the Client-side Rendered Grid
-
-If your server runs in development mode, refresh the browser window. If your server runs in production mode, build the application, and restart the server:
-
- npm run build; npm run start
-
-The page should now display an interactive grid with data from the Cat Facts API.
-
-
-
-DevExtreme renders the DataGrid on the client, even if the rest of the page is rendered server-side. If you disable JavaScript again, you'll see an empty `div` element in place of the grid:
-
-
-
-## 4. Next Steps
-
-DevExtreme UI components are intuitive, easy to use, and fully compatible with Next.js. Review our [application templates](https://js.devexpress.com/React/Templates/) and [demos](https://js.devexpress.com/Demos/WidgetsGallery/) to explore the capabilities of DevExtreme UI components at your own pace.
-
-For additional information on the Next.js framework, refer to the following external webpage: [Introduction | Next.js (nextjs.org)](https://nextjs.org/docs).
-
-[tags] react
diff --git a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md b/concepts/50 React Components/50 Application Template/05 Generate a New Application.md
index c9777283419..2dd4e9712bc 100644
--- a/concepts/50 React Components/50 Application Template/05 Generate a New Application.md
+++ b/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.
\ No newline at end of file
+Execute the following commands to run the generated application:
+
+ cd app-name
+ npm run dev
diff --git a/concepts/50 React Components/50 Application Template/10 Layouts.md b/concepts/50 React Components/50 Application Template/10 Layouts.md
index 811a7e9cf89..cc31fed62c6 100644
--- a/concepts/50 React Components/50 Application Template/10 Layouts.md
+++ b/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**
