Preview Purchase
License Reminder
One license allows using Metronic for a single deployment and all subsequent usage requires a separate license.
If you plan to use Metronic in a Software as a Service (SaaS) model with paid subscriptions, you'll need an Extended License.
Getting Started Integration

Next.js

This guide outlines the integration of the latest Next.js framework with Metronic Tailwind, providing a comprehensive foundation for building modern web applications.

Download

Get started with your Next.js project by downloading the Metronic integration examples from our GitHub repository . These examples provide a quick way to integrate the Metronic styles into your Next.js project. This will give you a working starting point that you can customize to fit your needs.

Please note that the sample project does not include the Metronic Tailwind CSS source files by default. To integrate the styles, you need to copy the Metronic Tailwind CSS source files from your downloaded Metronic folder.

1

Copy Source Folder

Copy the src folder from the metronic-tailwind-html package and paste it into the Next.js src directory. Rename the copied folder to metronic so that the directory structure should now look like this: src/metronic . This step imports the necessary styles and assets from the original HTML package into your Next.js project.
In the src/metronic/core folder, delete the unnecessary index.ts file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the index.spa.ts file to index.ts to ensure proper integration.
Remove KTLayout instance initialization from src/metronic/app/layouts/demo1.js . 
				
					KTDom.ready(() => {
KTLayout.init();
});
2

Copy Media Folder

Copy the media folder from the metronic-tailwind-html package's dist/assets/media directory into your Next.js project's public directory.
3

Copy Fonts

Create public/fonts folder and move all the icon contents from metronic/vendors/keenicons into it.
4

Setup Fonts

Update all file references in the style.css for icons. Change the font file paths to start with /fonts/ instead of fonts/ as they are in the original files.
5

Install Packages & Start Development Server

Install the required Node.js packages by running npm install . Start the Next.js development server by running npm run dev . 
				
					npm install
npm run dev
That's it! You now have the Metronic Tailwind template integrated into your Next.js project.

Creating Project

This guide will lead you through the essential steps of creating Next.js project from scratch.
1

Install Node.js and Npm

Before starting with Next.js, ensure you have Node.js and npm (Node Package Manager) installed on your machine. Visit https://nodejs.org/ to download and install the latest version.
2

Create Next.js Project

Create new Next.js project with TypeScript support using the following command. 
				
					npx create-next-app@latest metronic-tailwind-next --typescript --eslint --tailwind --src-dir --no-app --import-alias="@/*"
3

Install dependencies

Install dependencies and devDependencies using the following command: 
				
					npm install @popperjs/core && npm install --D tailwindcss postcss autoprefixer mini-svg-data-uri postcss-import postcss-loader postcss-nesting postcss-preset-env

The command will install the core mandatory dependencies needed to get started with Metronic. If you want to use apexcharts , axios , or clipboard , they must be installed separately.

4

Serve the Next Application

Run the development server with the following commands: 
				
					npm run dev
Open your browser and navigate to http://localhost:3000 to see your new Next app in action.

Integrate Styles

This guide provides a detailed walkthrough of the key steps required to integrate the Metronic Tailwind CSS stylesheet into your Next.js project.
1

Copy Source Folder

Copy the src folder from the metronic-tailwind-html package and paste it into the Next.js src directory. Rename the copied folder to metronic so that the directory structure should now look like this: src/metronic . This step imports the necessary styles and assets from the original HTML package into your Next.js project.
In the src/metronic/core folder, delete the unnecessary index.ts file. This file is not needed for Single Page Application (SPA) integration as it could cause conflicts. Instead, rename the index.spa.ts file to index.ts to ensure proper integration.
Replace html initialization with default instance export in src/metronic/app/layouts/demo1.js .
Remove KTLayout instance initialization from src/metronic/app/layouts/demo1.js . 
				
					KTDom.ready(() => {
KTLayout.init();
});
2

Import Styles

Open the Next.js global style file /styles/globals.css and replace existing code with import statement below: 
				
					@import "../metronic/vendors/keenicons/duotone/style.css";
@import "../metronic/vendors/keenicons/filled/style.css";
@import "../metronic/vendors/keenicons/solid/style.css";
@import "../metronic/vendors/keenicons/outline/style.css";

@import "../metronic/css/styles.css";

#__next {
display: contents;
}
This step ensures that the styles and icon fonts are properly imported and applied to your Next.js project.
3

Copy Postcss Configuration

Copy all postcss plugins from metronic-tailwind-html/postcss.config.js and paste it to metronic-tailwind-next/postcss.config.mjs .
4

Copy Tailwind Configuration

Copy the tailwind.config.js file from the metronic-tailwind-html package to the root of your Next.js project.
Edit the file and update the following content to the content and plugins array: 
				
					// ...
content: ["./src/**/*.{js,ts,jsx,tsx}"],
// ...

				
			
				
					// ...
plugins: [
require('./src/metronic/core/plugins/plugin'),
require('./src/metronic/core/plugins/components/theme'),
require('./src/metronic/core/plugins/components/breakpoints'),
require('./src/metronic/core/plugins/components/typography'),
require('./src/metronic/core/plugins/components/menu'),
require('./src/metronic/core/plugins/components/dropdown'),
require('./src/metronic/core/plugins/components/accordion'),
require('./src/metronic/core/plugins/components/input'),
require('./src/metronic/core/plugins/components/input-group'),
require('./src/metronic/core/plugins/components/select'),
require('./src/metronic/core/plugins/components/textarea'),
require('./src/metronic/core/plugins/components/file-input'),
require('./src/metronic/core/plugins/components/switch'),
require('./src/metronic/core/plugins/components/checkbox'),
require('./src/metronic/core/plugins/components/radio'),
require('./src/metronic/core/plugins/components/range'),
require('./src/metronic/core/plugins/components/container'),
require('./src/metronic/core/plugins/components/image-input'),
require('./src/metronic/core/plugins/components/modal'),
require('./src/metronic/core/plugins/components/drawer'),
require('./src/metronic/core/plugins/components/tooltip'),
require('./src/metronic/core/plugins/components/popover'),
require('./src/metronic/core/plugins/components/btn'),
require('./src/metronic/core/plugins/components/btn-group'),
require('./src/metronic/core/plugins/components/tabs'),
require('./src/metronic/core/plugins/components/pagination'),
require('./src/metronic/core/plugins/components/card'),
require('./src/metronic/core/plugins/components/table'),
require('./src/metronic/core/plugins/components/badge'),
require('./src/metronic/core/plugins/components/rating'),
require('./src/metronic/core/plugins/components/scrollable'),
require('./src/metronic/core/plugins/components/progress'),
require('./src/metronic/core/plugins/components/apexcharts'),
require('./src/metronic/core/plugins/components/leaflet')
]
// ...
This step configures Tailwind CSS to scan and process your Next.js project files, and it also integrates additional Metronic plugins.
5

Copy Media Folder

Copy the media folder from the metronic-tailwind-html package's dist/assets/media directory into your Next.js project's public directory.
6

Copy Fonts

Create public/fonts folder and move all the files listed below to this folder.
  • metronic/vendors/keenicons/duotone/fonts/keenicons-duotone.svg
  • metronic/vendors/keenicons/duotone/fonts/keenicons-duotone.ttf
  • metronic/vendors/keenicons/duotone/fonts/keenicons-duotone.woff
  • metronic/vendors/keenicons/duotone/fonts/keenicons-filled.svg
  • metronic/vendors/keenicons/duotone/fonts/keenicons-filled.ttf
  • metronic/vendors/keenicons/duotone/fonts/keenicons-filled.woff
  • metronic/vendors/keenicons/duotone/fonts/keenicons-outline.svg
  • metronic/vendors/keenicons/duotone/fonts/keenicons-outline.ttf
  • metronic/vendors/keenicons/duotone/fonts/keenicons-outline.woff
  • metronic/vendors/keenicons/duotone/fonts/keenicons-solid.svg
  • metronic/vendors/keenicons/duotone/fonts/keenicons-solid.ttf
  • metronic/vendors/keenicons/duotone/fonts/keenicons-solid.woff
Update all file references in the style.css for icons. Change the font file paths to start with /fonts/ instead of fonts/ as they are in the original files.

Integrate Core

This guide provides a detailed walkthrough of the key steps required to integrate the Metronic core components into your Next.js project.
1

Initialize global typescript components

Create new GlobalInit.tsx file and paste the code below: 
				
					// GlobalInit.tsx
import { useEffect } from "react";
import KTComponent from "@/metronic/core";
import KTLayout from "@/metronic/app/layouts/demo1";

export default function GlobalInit() {
useEffect(() => {
KTComponent.init();
KTLayout.init();
}, []);

return null;
}
1

Instantiate global initialization component

Inside file pages/_app.tsx , dynamically import the GlobalInit component with the ssr: false flag to disable server-side rendering. This ensures global components are initialized after the DOM elements are rendered. 
				
					const GlobalInit = dynamic(() => import('../components/GlobalInit'), { ssr: false });

<GlobalInit />
Previous React Next Vue