Next.js v15 & MUI

Overview

Next.js v15 paired with MUI (Material-UI) React offers a powerful setup for building scalable, responsive web applications with a smooth developer experience. Here’s an overview of what makes this combination effective:

1. Next.js v15 Enhancements

• App Router: Streamlined routing for easier page and component structure, allowing nested layouts and API routes to be managed in one framework.
• Performance Optimizations: Includes optimizations like faster page transitions, automatic image optimization, and built-in caching, making apps load faster.
• React Server Components: Supports seamless server and client-side rendering, with reduced loading times and lower data transfer requirements.
• Incremental Static Regeneration (ISR): Enables pages to update without requiring a full rebuild, enhancing flexibility for content-heavy apps.
• Enhanced TypeScript Support: First-class TypeScript integration for type-safe code, minimizing runtime errors.

2. MUI (Material-UI) Integration

• Theming & Customization: MUI’s robust theming system allows for a consistent look and feel, while custom themes align the UI closely with brand guidelines.
• Pre-Built, Accessible Components: MUI provides a comprehensive library of responsive and accessible UI components, saving development time.
• System Integration with Next.js: MUI works well with Next.js’ SSR and CSR, allowing styles to be rendered on the server for optimized SEO and performance.
• CSS Baseline & Flexibility: With MUI’s CSS baseline and styling solutions, developers can apply global styles or use utility-first CSS with Tailwind CSS, combining aesthetics with functionality.

3. Benefits of Next.js v15 + MUI

• Performance & SEO-Friendly: Both frameworks enhance server-side rendering, static generation, and caching, which boosts performance and SEO.
• Component-Driven Development: Both Next.js and MUI prioritize modularity, making it easier to scale and maintain applications.
• Rich UI with Minimal Overhead: MUI’s component library supports rapid prototyping while retaining flexibility to create custom components.

This combination is well-suited for both small and large-scale applications, such as e-commerce, admin dashboards, and content-heavy sites. Together, they empower developers to build high-performance, visually polished, and feature-rich applications.

Main Features

Some of the main Next.js features include:

Setup Development Environment

To kickstart the development of the web app with Trezo, at first need to setup the react development environment.

• Node.js and NPM: If NodeJS is not installed then download it from https://nodejs.org. NPM comes bundled with Node.js

NPM Packages

• Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.

Development Server

• Run npm run dev for a dev server. Navigate to http://localhost:3000. The app will autometically reload if you change any of the source files.

Building

• Run npm run build to build the project. The build artifacts will be stored in the .next/ directory. More Help: Deploying

• For Static Exports: Run npm run build to build the project. The build artifacts will be stored in the out/ directory. More Help: Static Exports

Local Environment Installation

Open the trezo-nextjs/trezo-nextjs-material-ui folder in Visual Studio Code and open a terminal on that folder and run these commands one by one.

1. npm install
2. npm run dev
3. Go To http://localhost:3000
4. Done

Pages and Components Info

• eCommerce dashboard (/src/app/dashboard/ecommerce/page.tsx)
• CRM dashboard (/src/app/dashboard/crm/page.tsx)
• Project Management dashboard (/src/app/dashboard/project-management/page.tsx)
• LMS dashboard (/src/app/dashboard/lms/page.tsx)
• Help Desk dashboard (/src/app/dashboard/helpdesk/page.tsx)
• Front page (/src/app/page.tsx)
• Front page features (/src/app/front-pages/features/page.tsx)
• Front page team (/src/app/front-pages/team/page.tsx)
• Front page faq (/src/app/front-pages/faq/page.tsx)
• Front page contact (/src/app/front-pages/contact/page.tsx)
• To Do List (/src/app/apps/to-do-list/page.js)
• ^{and more...}

Common Components:

• Providers (/src/providers/LayoutProvider.tsx)
• TopNavbar (/src/components/Layout/TopNavbar/index.tsx)
• LeftSidebar (/src/components/Layout/LeftSidebarMenu.tsx)
• Footer (/src/components/Layout/Footer.tsx)
• Control Panel (/src/components/Layout/ControlPanel/index.tsx)
• ^{and more...}

Dependencies

Here are the dependencies list which being used in the Trezo Nextjs Template:

"dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/react": "^6.1.15",
    "@mantine/core": "^5.10.5",
    "@mantine/hooks": "^5.10.5",
    "@mantine/rte": "^5.10.5",
    "@mui/icons-material": "^5.15.21",
    "@mui/lab": "^5.0.0-alpha.172",
    "@mui/material": "^5.16.0",
    "@mui/material-nextjs": "^5.15.11",
    "@mui/x-data-grid": "^7.11.1",
    "@mui/x-date-pickers": "^7.10.0",
    "@mui/x-tree-view": "^7.11.1",
    "apexcharts": "^3.50.0",
    "dayjs": "^1.11.11",
    "next": "^14.2.4",
    "react": "^18.3.1",
    "react-apexcharts": "^1.4.1",
    "react-dom": "^18.3.1",
    "remixicon": "^4.3.0",
    "swiper": "^11.1.4"
},
"devDependencies": {
    "@types/node": "^20.14.10",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "eslint": "^8.57.0",
    "eslint-config-next": "^14.2.4",
    "typescript": "^5.5.2"
}

Responsive Breakpoints

The Trezo is a responsive template and is based on the React Material UI. For more information you can check the MUI.

• xs, extra-small: 0px
• sm, small: 600px
• md, medium: 900px
• lg, large: 1200px
• xl, extra-large: 1536px

Fonts Used

By default, the template loads Inter font from Google Web Font Services. The font can be changed based on the website needs. Google Fonts

Font code can be found in the styles/globals.scss & sec/app/layout.tsx files.

:root {
	--fontFamily: "Inter", sans-serif;
}

Option to Change the Main Color

styles/globals.scss

:root {
	--primaryColor: #605dff;
	--secondaryColor: #3584fc;
	--successColor: #25b003;
	--dangerColor: #ff4023;
	--warningColor: #ffc107;
	--infoColor: #0dcaf0;
	--lightColor: #f8f9fa;
	--darkColor: #212529;
	--purpleColor: #ad63f6;
	--orangeColor: #fd5812;
}

Speed Optimization

Please optimize all images KB, MB also, use the image size following by placeholder file path: public/images/..

How to Change Image?

Please go to the image file 'path: public/images/...' replace the image which one you want following placeholder image size & name

Credits

Note: All images are used for preview purpose only and not included in the final purchase files.

Images

• https://freepik.com

• https://pixabay.com

• https://unsplash.com

Google Fonts

• Inter

IconFont

• RemixIcon

• Material Symbols

Packages

• Nextjs

• MUI

• Apexcharts

Additional Notes

If you need more details, please refer to the written instructions.

Feel free to reach out to our support team if you have any questions!