Add prompt for react-app for choosing nextjs/vite (#953)

* add prompt for create new react-app
---------

Co-authored-by: Vasily Strelyaev <Vasily.Strelyaev@devexpress.com>

Author: GoodDayForSurf

packages/devextreme-cli/src/application.js

@@ -2,12 +2,33 @@ const angularApplication = require('./applications/application.angular');
 const reactApplication = require('./applications/application.react');
 const nextjsApplication = require('./applications/application.nextjs');
 const vueApplication = require('./applications/application.vue');
+const getReactAppType = require('./utility/prompts/react-app-type');
 const printHelp = require('./help').printHelp;
 
 const isApplicationCommand = (command) => {
     return [ 'new', 'add' ].includes(command);
 };
 
+const handleWrongAppType = (appType, command) => {
+    console.error(`The '${appType}' application type is not valid`);
+    printHelp(command);
+};
+
+const createReact = async(appName, options, command) => {
+    const reactAppType = await getReactAppType(options['app-type']);
+
+    switch(reactAppType) {
+        case 'vite':
+            await reactApplication.create(appName, options);
+            return;
+        case 'nextjs':
+            await nextjsApplication.create(appName, options);
+            return;
+        default:
+            handleWrongAppType(reactAppType, command);
+    }
+};
+
 const run = async(commands, options, devextremeConfig) => {
     if(!commands[1]) {
         console.error('Command is incomplete. Please specify parameters.');
@@ -24,18 +45,15 @@ const run = async(commands, options, devextremeConfig) => {
                 await angularApplication.create(appName, options);
                 return;
             case 'react-app':
-                await reactApplication.create(appName, options);
-                return;
-            case 'nextjs-app':
-                await nextjsApplication.create(appName, options);
+                await createReact(appName, options, commands[0]);
                 return;
             case 'vue-app':
                 await vueApplication.create(appName, options);
                 return;
             default:
-                console.error(`The '${app}' application type is not valid`);
-                printHelp(commands[0]);
+                handleWrongAppType(app, commands[0]);
         }
+
     } else {
         if(commands[0] === 'add') {
             if(commands[1] === 'devextreme-angular') {

packages/devextreme-cli/src/templates/nextjs/sample-pages/home/page.tsx

@@ -69,7 +69,7 @@ export default function Page() {
           <p>Thanks for using the  DevExtreme React App Template.</p>
           <p>
             <span>This application was built using </span>
-            <a href={'https://vite.dev/guide/'} target={'_blank'} rel={'noopener noreferrer'}>create-vite</a>
+            <a href={'https://nextjs.org/'} target={'_blank'} rel={'noopener noreferrer'}>NextJs</a>
             <span> and </span>
             <a href={'https://js.devexpress.com/Documentation/Guide/Common/DevExtreme_CLI/'} target={'_blank'} rel={'noopener noreferrer'}>DevExtreme CLI</a>
             <span> and includes the following DevExtreme components:</span>

packages/devextreme-cli/src/utility/prompts/react-app-type.js

@@ -0,0 +1,17 @@
+const prompts = require('./prompts');
+
+const choices = [
+    { value: 'vite', title: 'React+Vite' },
+    { value: 'nextjs', title: 'Next.js-based' }
+];
+
+const question = {
+    message: 'Specify the desired React application type:',
+    choices: choices
+};
+
+const getReactAppType = async(defaultValue) => {
+    return await prompts(question, choices, defaultValue);
+};
+
+module.exports = getReactAppType;

packages/devextreme-cli/testing/env.nextjs.js

@@ -29,7 +29,8 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi
         await runCommand('node', [
             path.join(process.cwd(), './index.js'),
             'new',
-            'nextjs-app',
+            'react-app',
+            '--app-type=nextjs',
             `--template=${template}`,
             '--layout=side-nav-outer-toolbar',
             ...additionalArguments

packages/devextreme-cli/testing/env.react.js

@@ -30,6 +30,7 @@ function getConfig({ engine, template, fileExtension, templateExtension, transpi
             path.join(process.cwd(), './index.js'),
             'new',
             'react-app',
+            '--app-type=vite',
             '--layout=side-nav-outer-toolbar',
             `--template=${template}`,
             `--transpiler=${transpiler}`,