How can I integrate demo10 of the Tailwind version of Metronic with the NextJS framework?
Hello, thank you for creating such an amazing framework.
I am running and testing it with NextJS. Currently, I am using the import statement:
import KTLayout from "@/metronic/app/layouts/demo1";However, I would like to use demo10 instead. Is there a solution for this? Could you provide guidance on how to modify it? Thank you, as always.
Do you have any plans to integrate demo10 with NextJS?
Replies (2)
Integrating Demo10 of the Tailwind version of Metronic with Next.js involves setting up a Next.js project and configuring Tailwind CSS properly. First, install Next.js with npx create-next-app@latest my-metronic-app and navigate into the project directory. Then, install Tailwind CSS using npm install -D tailwindcss postcss autoprefixer and generate the configuration files with npx tailwindcss init -p. Next, copy the Demo10 components and assets from Metronic into the components and styles folders of your Next.js app. Ensure that Tailwind’s content configuration in tailwind.config.js includes all relevant files, such as ./pages/**/*.{js,ts,jsx,tsx} and ./components/**/*.{js,ts,jsx,tsx}. If Metronic uses specific plugins, install them as needed. Finally, start your Next.js app with npm run dev and verify the integration. Whether it's setting up a dashboard, authentication pages, or Fake Phone Pay APK payment integrations, ensure that all UI elements align with Tailwind’s utility classes for a seamless design.
Hi,
Thank you for reaching out to us.
For the demo10 you do not need to initialize any layout file, make sure to initialize global component file KTComponent.init();.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
