devextreme-cli 1.11.0-alpha.0 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-cli",
-  "version": "1.11.0-alpha.0",
+  "version": "1.11.0",
   "description": "DevExtreme CLI",
   "keywords": [
     "devexpress",
@@ -14,8 +14,8 @@
     "devextreme": "index.js"
   },
   "engines": {
-    "node": ">12.6.0",
-    "npm": ">6.2.0",
+    "node": ">20.19.0",
+    "npm": ">9.6.0",
     "yarn": ">1.21"
   },
   "files": [
@@ -43,7 +43,7 @@
     "minimist": "^1.2.8",
     "mustache": "^3.2.1",
     "prompts": "^2.4.2",
-    "sass": "^1.85.1",
+    "sass": "^1.89.2",
     "semver": "^5.7.2",
     "strip-bom": "^4.0.0"
   },
@@ -51,7 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "babel-eslint": "^10.1.0",
-    "create-vite": "6.3.1",
+    "create-vite": "7.0.0",
     "cross-env": "^5.2.1",
     "eslint": "^7.32.0",
     "eslint-config-angular": "^0.5.0",
@@ -59,19 +59,20 @@
     "eslint-plugin-angular": "^4.1.0",
     "eslint-plugin-jest": "^22.21.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-unused-imports": "^1.1.5",
     "eslint-plugin-vue": "^7.20.0",
     "eslint-stylish": "^0.2.0",
     "jest": "^29.7.0",
-    "jest-image-snapshot": "^6.4.0",
+    "jest-image-snapshot": "^6.5.1",
     "prettier": "^2.8.8",
     "rimraf": "^2.7.1",
     "tree-kill": "^1.2.2",
     "tree-kill-promise": "^1.0.12",
     "typescript": "^4.0.2",
-    "typescript-eslint-parser": "^22.0.0"
+    "typescript-eslint-parser": "^22.0.0",
+    "wait-on": "8.0.3"
   },
-  "gitHead": "4c13206f0278c88053f62682fd2a6ca0a8ea5866"
+  "gitHead": "16351e5d8d9dceee7d826668231c3e047d4df3fc"
 }

package/src/application.js

@@ -1,12 +1,34 @@
 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.');
@@ -23,15 +45,15 @@ const run = async(commands, options, devextremeConfig) => {
                 await angularApplication.create(appName, options);
                 return;
             case 'react-app':
-                await reactApplication.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') {
@@ -40,7 +62,12 @@ const run = async(commands, options, devextremeConfig) => {
             }
 
             if(commands[1] === 'devextreme-react') {
-                reactApplication.install(options);
+                if(nextjsApplication.isNextJsApp()) {
+                    nextjsApplication.install(options);
+                } else {
+                    reactApplication.install(options);
+                }
+
                 return;
             }
 
@@ -54,23 +81,16 @@ const run = async(commands, options, devextremeConfig) => {
                 return;
             }
 
-            if(devextremeConfig.applicationEngine === 'angular') {
-                if(commands[1] === 'view') {
-                    angularApplication.addView(commands[2], options);
-                } else {
-                    console.error('Invalid command');
-                    printHelp(commands[0]);
-                }
-            } else if(devextremeConfig.applicationEngine === 'react') {
-                if(commands[1] === 'view') {
-                    reactApplication.addView(commands[2], options);
-                } else {
-                    console.error('Invalid command');
-                    printHelp(commands[0]);
-                }
-            } else if(devextremeConfig.applicationEngine === 'vue') {
+            const app = {
+                'angular': angularApplication,
+                'react': reactApplication,
+                'nextjs': nextjsApplication,
+                'vue': vueApplication,
+            }[devextremeConfig.applicationEngine];
+
+            if(app) {
                 if(commands[1] === 'view') {
-                    vueApplication.addView(commands[2], options);
+                    app.addView(commands[2], options);
                 } else {
                     console.error('Invalid command');
                     printHelp(commands[0]);

package/src/applications/application.angular.js

@@ -13,6 +13,7 @@ const modifyJson = require('../utility/modify-json-file');
 const schematicsVersion = latestVersions['devextreme-schematics'] || 'latest';
 
 const minNgCliVersion = new semver('17.0.0');
+const ngCliWithZoneless = new semver('20.0.0');
 
 async function runSchematicCommand(schematicCommand, options, evaluatingOptions) {
     const collectionName = 'devextreme-schematics';
@@ -63,6 +64,7 @@ function localPackageExists(packageName) {
 
 const hasSutableNgCli = async() => {
     const localVersion = ngVersion.getLocalNgVersion();
+
     if(!localVersion) {
         return false;
     }
@@ -83,6 +85,7 @@ const bumpAngular = (appPath, versionTag) => {
             for(const depName in section) {
                 section[depName] = depName.startsWith('@angular') ? versionTag : section[depName];
             }
+            return section;
         };
 
         return {
@@ -96,6 +99,7 @@ const bumpAngular = (appPath, versionTag) => {
 
 const create = async(appName, options) => {
     const layout = await getLayoutInfo(options.layout);
+    const currentNgVersion = ngVersion.getNgCliVersion().version;
     const depsVersionTag = extractDepsVersionTag(options);
 
     const commandArguments = [
@@ -105,10 +109,14 @@ const create = async(appName, options) => {
         '--routing=false',
         '--skip-tests=true',
         '--skip-install=true',
-        '--standalone=false',
+        '--standalone=true',
         '--ssr=false'
     ];
 
+    if(ngCliWithZoneless.compare(currentNgVersion) <= 0) {
+        commandArguments.push('--zoneless=false');
+    }
+
     await runNgCommand(commandArguments, options);
 
     const appPath = path.join(process.cwd(), appName);
@@ -150,9 +158,9 @@ const changeMainTs = (appPath) => {
     moduleWorker.insertImport(filePath, 'devextreme/ui/themes', 'themes', true);
 
     const fileContent = fs.readFileSync(filePath).toString();
-    const bootstrapPattern = /platformBrowser(?:Dynamic)?\(\)\.bootstrapModule\(\s*AppModule\s*(?:,\s*\{[^}]*\})?\s*\)/;
+    const bootstrapPattern = /bootstrapApplication\([^)]+\)/;
     const firstChaptStr = fileContent.match(bootstrapPattern)[0];
-    const lastChaptStr = '.catch(err => console.error(err));';
+    const lastChaptStr = '.catch((err) => console.error(err));';
 
     fs.writeFileSync(
         filePath,

package/src/applications/application.nextjs.js

@@ -0,0 +1,231 @@
+const runCommand = require('../utility/run-command');
+const path = require('path');
+const fs = require('fs');
+const getLayoutInfo = require('../utility/prompts/layout');
+const getTemplateTypeInfo = require('../utility/prompts/typescript');
+const templateCreator = require('../utility/template-creator');
+const packageManager = require('../utility/package-manager');
+const packageJsonUtils = require('../utility/package-json-utils');
+const insertItemToArray = require('../utility/file-content').insertItemToArray;
+const stringUtils = require('../utility/string');
+const typescriptUtils = require('../utility/typescript-extension');
+const removeFile = require('../utility/file-operations').remove;
+const latestVersions = require('../utility/latest-versions');
+const { extractDepsVersionTag } = require('../utility/extract-deps-version-tag');
+const {
+    updateJsonPropName,
+    bumpReact,
+    getCorrectPath,
+    addStylesToApp,
+    getComponentPageName,
+} = require('./application.react');
+
+const defaultStyles = [
+    'devextreme/dist/css/dx.light.css'
+];
+
+const isNextJsApp = () => {
+    const appPath = process.cwd();
+
+    return fs.existsSync(path.join(appPath, 'next.config.ts')) || fs.existsSync(path.join(appPath, 'next.config.mjs'));
+};
+
+const isTsApp = (appPath) => {
+    return fs.existsSync(path.join(appPath, 'next.config.ts'));
+};
+
+const getExtension = (appPath) => {
+    return fs.existsSync(path.join(appPath, 'src/app', 'layout.tsx')) ? '.tsx' : '.jsx';
+};
+
+const pathToPagesIndex = () => {
+    const extension = getExtension(process.cwd());
+    return path.join(process.cwd(), 'src', 'views', `index${extension}`);
+};
+
+const preparePackageJsonForTemplate = (appPath, appName) => {
+    const dependencies = [
+        { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
+        { name: 'jose', version: latestVersions['jose'] },
+    ];
+    const scripts = [
+        { name: 'build-themes', value: 'devextreme build' },
+        { name: 'postinstall', value: 'npm run build-themes' }
+    ];
+
+    packageJsonUtils.addDependencies(appPath, dependencies);
+    packageJsonUtils.updateScripts(appPath, scripts);
+    packageJsonUtils.updateName(appPath, appName);
+};
+
+const create = async(appName, options) => {
+    const templateType = await getTemplateTypeInfo(options.template);
+    const layoutType = await getLayoutInfo(options.layout);
+
+    const templateOptions = Object.assign({}, options, {
+        project: stringUtils.humanize(appName),
+        layout: stringUtils.classify(layoutType),
+        isTypeScript: typescriptUtils.isTypeScript(templateType)
+    });
+    const depsVersionTag = extractDepsVersionTag(options);
+
+    let commandArguments = [`-p=create-next-app@${depsVersionTag || latestVersions['create-next-app']}`, 'create-next-app', appName];
+
+    commandArguments = [
+        ...commandArguments,
+        `${templateOptions.isTypeScript ? '--typescript' : '--javascript'}`,
+        '--eslint',
+        '--no-tailwind',
+        '--src-dir',
+        '--app',
+        '--no-turbopack',
+        '--import-alias "@/*"',
+    ];
+
+    await runCommand('npx', commandArguments);
+
+    const appPath = path.join(process.cwd(), appName);
+
+    if(depsVersionTag) {
+        bumpReact(appPath, depsVersionTag, templateOptions.isTypeScript);
+    }
+
+    addTemplate(appPath, appName, templateOptions);
+    modifyAppFiles(appPath, templateOptions);
+};
+
+const modifyAppFiles = (appPath, { project, isTypeScript }) => {
+    const entryFilePath = path.join(appPath, `src/app/layout.${isTypeScript ? 'tsx' : 'jsx'}`);
+
+    let content = fs.readFileSync(entryFilePath).toString();
+    content = content.replace(/<title>[^<]+<\/title>/, `<title>${project}<\/title>`);
+
+    fs.writeFileSync(entryFilePath, content);
+};
+
+const addTemplate = (appPath, appName, templateOptions) => {
+    const applicationTemplatePath = path.join(
+        templateCreator.getTempaltePath('nextjs'),
+        'application'
+    );
+
+    const manifestPath = path.join(appPath, 'public', 'manifest.json');
+
+    const styles = [
+        '../dx-styles.scss',
+        '../themes/generated/theme.additional.css',
+        '../themes/generated/theme.additional.dark.css',
+        '../themes/generated/theme.base.css',
+        '../themes/generated/theme.base.dark.css',
+        'devextreme/dist/css/dx.common.css'
+    ];
+
+    templateCreator.moveTemplateFilesToProject(applicationTemplatePath, appPath, templateOptions, getCorrectPath);
+
+    !templateOptions.isTypeScript && removeFile(path.join(appPath, 'src', 'types.jsx'));
+    removeFile(path.join(appPath, 'src/app', 'page.js'));
+    removeFile(path.join(appPath, 'src/app', 'layout.js'));
+    removeFile(path.join(appPath, 'src/app', 'globals.scss'));
+
+    if(!templateOptions.empty) {
+        addSamplePages(appPath, templateOptions);
+    }
+
+    preparePackageJsonForTemplate(appPath, appName, templateOptions.isTypeScript);
+    updateJsonPropName(manifestPath, appName);
+    install({ isTypeScript: templateOptions.isTypeScript }, appPath, styles);
+};
+
+const getEntryFilePath = (options, appPath) => {
+    const extension = options.isTypeScript || isTsApp(appPath) ? 'ts' : 'js';
+    const srcFolder = fs.existsSync(path.join(appPath, 'src')) ? 'src' : '';
+    const isAppRouterApp = fs.existsSync(path.join(appPath, srcFolder, 'app')) && fs.lstatSync(appPath).isDirectory();
+
+    const entryFilePath = isAppRouterApp
+        ? path.join('app', `layout.${extension}`)
+        : path.join('pages', `_app.${extension}`);
+
+    const jsx = fs.existsSync(path.join(appPath, srcFolder, entryFilePath + 'x')) ? 'x' : '';
+
+    return path.join(srcFolder, entryFilePath + jsx);
+};
+
+const install = (options, appPath, styles) => {
+    appPath = appPath ? appPath : process.cwd();
+
+    const pathToMainComponent = path.join(appPath, getEntryFilePath(options, appPath));
+
+    addStylesToApp(pathToMainComponent, styles || defaultStyles);
+    packageJsonUtils.addDevextreme(appPath, options.dxversion, 'react');
+
+    packageManager.runInstall({ cwd: appPath });
+};
+
+const getNavigationData = (viewName, componentName, icon) => {
+    const pagePath = stringUtils.dasherize(viewName);
+    return {
+        navigation: `\n  {\n    text: \'${stringUtils.humanize(viewName)}\',\n    path: \'/pages/${pagePath}\',\n    icon: \'${icon}\'\n  }`
+    };
+};
+
+const createPathToPage = (pageName) => {
+    const pagesPath = path.join(process.cwd(), 'src', 'app/pages');
+    const newPageFolderPath = path.join(pagesPath, pageName);
+
+    if(!fs.existsSync(pagesPath)) {
+        fs.mkdirSync(pagesPath);
+        fs.writeFileSync(pathToPagesIndex(), '');
+    }
+
+    if(!fs.existsSync(newPageFolderPath)) {
+        fs.mkdirSync(newPageFolderPath);
+    }
+
+    return newPageFolderPath;
+};
+
+const addSamplePages = (appPath, templateOptions) => {
+    const samplePageTemplatePath = path.join(
+        templateCreator.getTempaltePath('nextjs'),
+        'sample-pages'
+    );
+
+    const pagesPath = path.join(appPath, 'src', 'app/pages');
+
+    templateCreator.moveTemplateFilesToProject(samplePageTemplatePath, pagesPath, {
+        isTypeScript: templateOptions.isTypeScript
+    }, getCorrectPath);
+};
+
+const addView = (pageName, options) => {
+    const pageTemplatePath = path.join(
+        templateCreator.getTempaltePath('nextjs'),
+        'page'
+    );
+    const extension = getExtension(process.cwd());
+
+    const componentName = getComponentPageName(pageName);
+    const pathToPage = createPathToPage(pageName);
+    const navigationModulePath = path.join(process.cwd(), 'src', `app-navigation${extension}`);
+    const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder');
+
+    const getCorrectExtension = (fileExtension) => {
+        return fileExtension === '.tsx' ? extension : fileExtension;
+    };
+
+    const getPageFileName = (pageName, pageItem) => {
+        return pageItem === 'page.tsx' ? 'page' : pageName;
+    };
+
+    templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension, { getPageFileName });
+
+    insertItemToArray(navigationModulePath, navigationData.navigation);
+};
+
+module.exports = {
+    isNextJsApp,
+    install,
+    create,
+    addTemplate,
+    addView
+};

package/src/applications/application.react.js

@@ -52,14 +52,19 @@ const updateJsonPropName = (path, name) => {
     });
 };
 
-const bumpReact = (appPath, versionTag) => {
+const bumpReact = (appPath, versionTag, isTypeScript) => {
     const dependencies = [
         { name: 'react', version: versionTag },
         { name: 'react-dom', version: versionTag },
-        { name: '@types/react', version: versionTag, dev: true },
-        { name: '@types/react-dom', version: versionTag, dev: true },
     ];
 
+    if(isTypeScript) {
+        dependencies.push(
+            { name: '@types/react', version: versionTag, dev: true },
+            { name: '@types/react-dom', version: versionTag, dev: true },
+        );
+    }
+
     packageJsonUtils.addDependencies(appPath, dependencies);
 };
 
@@ -86,7 +91,7 @@ const create = async(appName, options) => {
     modifyIndexHtml(appPath, templateOptions.project);
 
     if(depsVersionTag) {
-        bumpReact(appPath, depsVersionTag);
+        bumpReact(appPath, depsVersionTag, templateOptions.isTypeScript);
     }
 
     addTemplate(appPath, appName, templateOptions);
@@ -209,7 +214,7 @@ const addView = (pageName, options) => {
         return fileExtension === '.tsx' ? extension : fileExtension;
     };
     templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);
-    moduleUtils.insertExport(pathToPagesIndex(), componentName, `./${pageName}/${pageName}`);
+    moduleUtils.insertExport(pathToPagesIndex(), componentName, `./${pageName}/${pageName}`, 'Page');
     moduleUtils.insertImport(routingModulePath, './pages', componentName);
     insertItemToArray(routingModulePath, navigationData.route);
     insertItemToArray(navigationModulePath, navigationData.navigation);
@@ -219,5 +224,10 @@ module.exports = {
     install,
     create,
     addTemplate,
-    addView
+    addView,
+    updateJsonPropName,
+    bumpReact,
+    getCorrectPath,
+    addStylesToApp,
+    getComponentPageName,
 };

package/src/applications/application.vue.js

@@ -16,10 +16,9 @@ const defaultStyles = [
 
 const preparePackageJsonForTemplate = (appPath, appName) => {
     const dependencies = [
-        { name: 'sass', version: '^1.34.1' },
+        { name: 'sass-embedded', version: '^1.85.1' },
         { name: 'vue-router', version: '^3.0.1' },
-        { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true },
-        { name: 'sass-loader', version: '^10', dev: true }
+        { name: 'devextreme-cli', version: latestVersions['devextreme-cli'], dev: true }
     ];
 
     const nameDepends = dependencies.map(d => d.name);
@@ -38,18 +37,14 @@ const preparePackageJsonForTemplate = (appPath, appName) => {
 };
 
 async function createVueApp(name, depsVersionTag) {
-    const argList = ['-p', `@vue/cli@${depsVersionTag}`, 'vue', 'create', name, '--registry', 'https://registry.npmjs.org/', '-p "Default (Vue 3)"'];
-
-    return runCommand('npx', argList);
+    const argList = ['create', `vue@${depsVersionTag ? depsVersionTag : latestVersions['create-vue']}`, name, '--registry', 'https://registry.npmjs.org/', '--', '--eslint', '--default', '--bare'];
+    return runCommand('npm', argList);
 }
 
 const bumpVue = (appPath, versionTag) => {
     const dependencies = [
         { name: 'vue', version: versionTag },
         { name: 'vue-router', version: versionTag },
-        { name: '@vue/cli-plugin-babel', version: versionTag, dev: true },
-        { name: '@vue/cli-plugin-eslint', version: versionTag, dev: true },
-        { name: '@vue/cli-service', version: versionTag, dev: true },
     ];
 
     packageJsonUtils.addDependencies(appPath, dependencies);
@@ -78,7 +73,7 @@ const create = async(appName, options) => {
 };
 
 const modifyIndexHtml = (appPath, appName) => {
-    const indexHtmlPath = path.join(appPath, 'public', 'index.html');
+    const indexHtmlPath = path.join(appPath, 'index.html');
     let htmlContent = fs.readFileSync(indexHtmlPath).toString();
 
     htmlContent = htmlContent.replace(/<title>(\w+\s*)+<\/title>/, `<title>${appName}<\/title>`);
@@ -175,7 +170,7 @@ const addView = (pageName, options) => {
     const navigationData = getNavigationData(pageName, componentName, options && options.icon || 'folder');
     const getCorrectExtension = (fileExtension) => fileExtension;
     templateCreator.addPageToApp(pageName, pathToPage, pageTemplatePath, getCorrectExtension);
-    moduleUtils.insertImport(routingModulePath, `./views/${pageName}`, componentName, true);
+    moduleUtils.insertImport(routingModulePath, `./views/${pageName}.vue`, componentName, true);
     insertItemToArray(routingModulePath, navigationData.route);
     insertItemToArray(navigationModulePath, navigationData.navigation);
 };

package/src/templates/nextjs/application/.env

@@ -0,0 +1 @@
+SESSION_SECRET=<your_secret_key_goes_here>

package/src/templates/nextjs/application/devextreme.json

@@ -0,0 +1,63 @@
+{
+  "applicationEngine": "nextjs",
+  "build": {
+      "commands": [
+          {
+              "command": "build-theme",
+              "options": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "outputFile": "src/themes/generated/theme.base.css"
+              }
+          },
+          {
+            "command": "build-theme",
+            "options": {
+              "inputFile": "src/themes/metadata.base.dark.json",
+              "outputFile": "src/themes/generated/theme.base.dark.css"
+            }
+          },
+          {
+              "command": "build-theme",
+              "options": {
+                  "inputFile": "src/themes/metadata.additional.json",
+                  "outputFile": "src/themes/generated/theme.additional.css"
+              }
+          },
+          {
+            "command": "build-theme",
+            "options": {
+              "inputFile": "src/themes/metadata.additional.dark.json",
+              "outputFile": "src/themes/generated/theme.additional.dark.css"
+            }
+          },
+          {
+              "command": "export-theme-vars",
+              "options": {
+                  "inputFile": "src/themes/metadata.base.json",
+                  "outputFile": "src/themes/generated/variables.base.scss"
+              }
+          },
+          {
+            "command": "export-theme-vars",
+            "options": {
+              "inputFile": "src/themes/metadata.base.dark.json",
+              "outputFile": "src/themes/generated/variables.base.dark.scss"
+            }
+          },
+          {
+              "command": "export-theme-vars",
+              "options": {
+                  "inputFile": "src/themes/metadata.additional.json",
+                  "outputFile": "src/themes/generated/variables.additional.scss"
+              }
+          },
+          {
+            "command": "export-theme-vars",
+            "options": {
+              "inputFile": "src/themes/metadata.additional.dark.json",
+              "outputFile": "src/themes/generated/variables.additional.dark.scss"
+            }
+          }
+      ]
+  }
+}

package/src/templates/nextjs/application/next.config.mjs

@@ -0,0 +1,32 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/pages/home',
+        permanent: true,
+      },
+      {
+        source: '/login',
+        destination: '/auth/login',
+        permanent: true,
+      },
+      {
+        source: '/reset-password',
+        destination: '/auth/reset-password',
+        permanent: true,
+      },
+      {
+        source: '/create-account',
+        destination: '/auth/create-account',
+        permanent: true,
+      },
+    ]
+  },
+  images: {
+    remotePatterns: [new URL('https://js.devexpress.com/**')]
+  },
+}
+
+export default nextConfig;