Download
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.
Copy Source Folder
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.
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.
KTLayout
instance initialization from
src/metronic/app/layouts/demo1.js
.
KTDom.ready(() => {
KTLayout.init();
});
Copy Media Folder
media
folder from the
metronic-tailwind-html
package's
dist/assets/media
directory into your Next.js project's
public
directory.
Copy Fonts
public/fonts
folder and move all the icon contents from
metronic/vendors/keenicons
into it.
Setup Fonts
style.css
for icons. Change the font file paths to start with
/fonts/
instead of
fonts/
as they are in the original files.
Install Packages & Start Development Server
npm
install
. Start the Next.js development server by running
npm run dev
.
npm install
npm run dev
Creating Project
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.Create Next.js Project
npx create-next-app@latest metronic-tailwind-next --typescript --eslint --tailwind --src-dir --no-app --import-alias="@/*"
Install dependencies
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.
Serve the Next Application
npm run dev
http://localhost:3000
to see your new Next app in action.
Integrate Styles
Copy Source Folder
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.
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.
src/metronic/app/layouts/demo1.js
.
KTLayout
instance initialization from
src/metronic/app/layouts/demo1.js
.
KTDom.ready(() => {
KTLayout.init();
});
Import Styles
/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;
}
Copy Postcss Configuration
metronic-tailwind-html/postcss.config.js
and paste it to
metronic-tailwind-next/postcss.config.mjs
.
Copy Tailwind Configuration
tailwind.config.js
file from the
metronic-tailwind-html
package to the root of your
Next.js project.
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')
]
// ...
Copy Media Folder
media
folder from the
metronic-tailwind-html
package's
dist/assets/media
directory into your Next.js project's
public
directory.
Copy Fonts
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
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
Initialize global typescript components
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;
}
Instantiate global initialization component
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 />