Open-source by Keenthemes!Support our KtUI and ReUI open-source projects and help with growth.
Star on Github

Metronics keen themes for next js


Hi team,

I’ve been working on integrating the Metronic theme (purchased license) into a Next.js project using the App Router. However, I haven’t found a direct or officially supported method to do this with the HTML or Tailwind version.

I came across some community suggestions recommending the use of the React theme bundle instead. While that seemed promising, I ran into several issues when trying to adapt the React version for a Next.js environment, particularly with:

1. SSR (Server-Side Rendering) conflicts
2. ESM/CommonJS module compatibility
3. Accessing browser-only APIs like localStorage or window
4. Dynamic routing and layout composition with the App Router

I’d really appreciate any guidance or best practices on how to properly integrate the Metronic theme—whether HTML, Tailwind, or React—into a modern Next.js setup (especially with the App Router).

Is there an official or recommended path for this type of integration?

Thanks in advance!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)

Deleted comment

Hi,

We are releasing the new Metronic 9 Next.js with App router within the next week.
Please reach our us via support@keenthemes.com to get the beta version and give a try.

Please provide your purchase code from
in order to get the beta code.

Regards,
Sean



We have a paid subscription but how can we download the latest NEXTjs supported Metronics



Please login into your themeforest account and download the latest Metronic zip and you will get all packages including Metronic 9.2.x Next.js


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(