Next.js v15 & Bootstrap v5

Overview

Next.js v15 and Bootstrap 5 is a powerful combination for creating fast, responsive, and modern web applications. Here’s a breakdown of each:

Next.js v15

Next.js v15 is the latest version of the React-based framework known for its server-side rendering (SSR), static site generation (SSG), and other advanced features like dynamic routing and API support. Key highlights include:

• App Directory and Server Actions: An evolution of the App Router with improved server action handling for complex data-fetching needs.
• Performance Optimizations: Enhanced image optimization and caching.
• Dynamic Routes and Layouts: Simplified nested layouts and better route grouping for more flexible page structures.
• Full Stack Support: Ability to manage both frontend and backend logic within the Next.js ecosystem, suitable for full-stack applications.

Bootstrap v5

Bootstrap v5 is a popular CSS framework for building responsive, mobile-first websites with ease. Key features:

• Responsive Grid System: A flexible grid system to create layouts for different screen sizes.
• Utility Classes: A variety of pre-built classes for styling, positioning, and spacing.
• JavaScript Components: Built-in components like modals, carousels, and tooltips without needing external libraries.
• No jQuery: Bootstrap v5 removed the dependency on jQuery, making it lighter and faster.

Combining Next.js v15 and Bootstrap v5

By combining Next.js v15 with Bootstrap v5, you can quickly build responsive web applications with server-side capabilities and an appealing UI:

• Seamless Integration: Bootstrap can be included via CDN or by customizing the SCSS for more control, while Next.js optimizes asset loading.
• Custom Styling: Bootstrap’s utility classes and SCSS variables allow you to tweak the look to fit specific branding needs.
• Server-Side Rendering: Next.js will manage rendering for better SEO, while Bootstrap ensures the site looks great on any device.

This combination allows you to rapidly prototype and build robust applications with an emphasis on performance and modern UI standards.

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-react-nextjs-bootstrap 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.js)
• CRM dashboard (/src/app/dashboard/crm/page.js)
• Project Management dashboard (/src/app/dashboard/project-management/page.js)
• LMS dashboard (/src/app/dashboard/lms/page.js)
• Help Desk dashboard (/src/app/dashboard/helpdesk/page.js)
• Front page (/src/app/page.js)
• Front page features (/src/app/front-pages/features/page.js)
• Front page team (/src/app/front-pages/team/page.js)
• Front page faq (/src/app/front-pages/faq/page.js)
• Front page contact (/src/app/front-pages/contact/page.js)
• To Do List (/src/app/apps/to-do-list/page.js)
• ^{and more...}

Common Components:

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

Dependencies

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

"dependencies": {
    "@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",
    "apexcharts": "^3.52.0",
    "bootstrap": "^5.3.3",
    "formik": "^2.4.6",
    "next": "14.2.5",
    "react": "^18",
    "react-apexcharts": "^1.4.1",
    "react-bootstrap": "^2.10.4",
    "react-calendar": "^5.0.0",
    "react-dom": "^18",
    "react-material-symbols": "^4.4.0",
    "react-select": "^5.8.0",
    "react-tabs": "^6.0.2",
    "remixicon": "^4.3.0",
    "swiper": "^11.1.9",
    "yup": "^1.4.0"
},
"devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "14.2.5"
}

Responsive Breakpoints

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

• X-Small: 576px
• sm, Small: 576px
• md, medium: 768px
• lg, large: 992px
• xl, Extra large: 1200px
• xxl, Extra extra large: 1400px

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 sec/app/layout.js files.

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

Option to Change the Main Color

styles/_variables.scss

$body-color: #64748b;
$primary: #605dff;
$secondary: #3a4252;
$info: #2db6f5;
$success: #37d80a;
$warning: #ffbc2b;
$danger: #fd5812;
$light: #d5d9e2;
$dark: #000000;
$border-color: #eceef2;
$body-bg: #f6f7f9;
$primary-div: #ad63f6;
$danger-div: #ffcea9;
$gray-light: #445164;
$rating-color: #fe7a36;
$card-bg-c: #3584fc;
$card-text-c: #ffe8d4;
$gary-light: #f4f6fc;
$gray-div: #f7f8f7;
$transition: all ease 0.5s;
$box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
$body-font-family: "Inter", sans-serif;
$logo-font-family: "Epilogue", sans-serif;

// For Dark Mode Color
$dark-body-bg: #0a0e19;
$dark-body-color: #8695aa;
$dark-card-bg: #0c1427;
$dark-input-bg: #15203c;
$dark-border: #172036;

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

• React Bootstrap

• Apexcharts

Installation Video

To help you understand the installation process better, please watch the following video tutorial. It provides a step-by-step guide on setting up the application:

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!