Thank you for using this Devextreme App Template for NextJS. If you find it helpful please add a star to my github page.

This template uses the following Devextreme Components:

• DataGrid
• Form
• Drawer
• Button
• ToolTip

If you are not already familiar with NextJS it is best to visit their website and read their introductory documentation:

• NEXTJS and the APP ROUTER

In order to add your own pages to this app, simply add another subfolder in the /app/(authenticated_content) directory with a similar structure as the /app/(authenticated_content)/profile and /app/(authenticated_content)/tasks folders. Each subfolder name automatically becomes a route (/profile and /tasks respectively) and the page.jsx file within becomes a server component. The (authenticated_content) subdirectory is ignored because it is a route group used for layout purposes only.

You will notice that these pages contain client components found in the app/components directory. These client components contain the Devextreme Widgets and typically start with the directive 'use client'

After adding a new route in this manner modify the app/app-navigation.js file to add it to the navigation menu. You can also change the main title or footer in the app/app-info.js file, and enable a footer copyright message by setting footerInfo.copyRight to true.

If you wish to add a custom toolbar item go to the /components/layout/mainToolbar.js file and add a Toolbar Item.

Authentication includes complete signin and registration flows using Auth.js with the Google, Facebook, and Twitter social providers. You can sign in or register with credentials or a social account. The server component for Auth.js can be found in the root of the project in the auth.js file, and the custom server functions accompanying this boilerplate can be found in /app/api/customAuth.js

NextJS uses a .env.local file to store your keys at the root of your application. Make sure you set the following keys:

• NEXT_PUBLIC_DEVEXTREME_LICENSE_KEY
• AUTH_GOOGLE_ID
• AUTH_GOOGLE_SECRET
• AUTH_FACEBOOK_ID
• AUTH_FACEBOOK_SECRET
• AUTH_TWITTER_ID
• AUTH_TWITTER_SECRET
• AUTH_TRUST_HOST=TRUE

All the keys starting with “AUTH“ are for Auth.js authentication, more information can be found on their website:

For technical content related to DevExtreme React components, feel free to explore their online documentation and technical demos