Fix nextjs plugin to work on all environments (#1612)

* fix(ui~cli): `nextjs` plugin

* log file writes in `dev`

* log file writes in `dev`

* update changeset

Author: SutuSebastian

.changeset/short-candies-warn.md

@@ -0,0 +1,22 @@
+---
+"flowbite-react": patch
+---
+
+Fix `nextjs` plugin to work on all environments
+
+## Changes
+
+- fix(ui): `nextjs` plugin to run properly on `NODE_ENV` environments: `production`, `development` and `test`
+- log file writes in `dev`
+
+## Breaking changes
+
+`withFlowbiteReact` now always returns async configuration (see: [Async Configuration](https://nextjs.org/docs/app/api-reference/config/next-config-js#async-configuration)) so make sure to wrap any other HOC (higher-order-functions) such as `withContentlayer` because most of them do not forward pass async config arguments (eg: `phase, options`)
+
+```tsx
+// ❌ not working
+export default withContentlayer(withFlowbiteReact(nextConfig));
+
+// ✅ working
+export default withFlowbiteReact(withContentlayer(nextConfig));
+```

apps/web/next.config.mjs

@@ -158,4 +158,4 @@ const nextConfig = {
   },
 };
 
-export default withContentlayer(withFlowbiteReact(nextConfig));
+export default withFlowbiteReact(withContentlayer(nextConfig));

packages/ui/src/cli/commands/dev.ts

@@ -63,6 +63,7 @@ export async function dev() {
 
   if (!isEqual(classList, newClassList)) {
     classList = newClassList;
+    console.log(`Generating ${classListFilePath} file...`);
     await fs.writeFile(classListFilePath, JSON.stringify(classList, null, 2));
   }
 
@@ -106,6 +107,7 @@ export async function dev() {
 
     if (!isEqual(classList, newClassList)) {
       classList = newClassList;
+      console.log(`Generating ${classListFilePath} file...`);
       await fs.writeFile(classListFilePath, JSON.stringify(classList, null, 2));
     }
   }

packages/ui/src/plugin/nextjs.ts

@@ -1,4 +1,5 @@
 import type { NextConfig } from "next";
+import { PHASE_DEVELOPMENT_SERVER, PHASE_PRODUCTION_BUILD } from "next/constants.js";
 import { build } from "../cli/commands/build";
 import { dev } from "../cli/commands/dev";
 
@@ -8,24 +9,24 @@ interface ConfigurationOptions {
 
 type ConfigurationCallback = (phase: string, options: ConfigurationOptions) => NextConfig | Promise<NextConfig>;
 
-export default function withFlowbiteReact(
-  nextConfig: NextConfig | ConfigurationCallback = {},
-): NextConfig | ConfigurationCallback {
-  if (process.env.NODE_ENV === "development") {
-    dev();
-  }
-  if (process.env.NODE_ENV === "production") {
-    build();
-  }
-
-  if (typeof nextConfig === "function") {
-    return async (phase: string, options: ConfigurationOptions) => {
-      const originalConfig = await nextConfig(phase, options);
-      return patchConfig(originalConfig);
-    };
-  }
-
-  return patchConfig(nextConfig);
+let devRan = false;
+let buildRan = false;
+
+export default function withFlowbiteReact(nextConfig: NextConfig | ConfigurationCallback = {}): ConfigurationCallback {
+  return async (phase: string, options: ConfigurationOptions) => {
+    if (phase === PHASE_DEVELOPMENT_SERVER && !devRan) {
+      devRan = true;
+      dev();
+    }
+    if (phase === PHASE_PRODUCTION_BUILD && !buildRan) {
+      buildRan = true;
+      build();
+    }
+
+    const userConfig = typeof nextConfig === "function" ? await nextConfig(phase, options) : nextConfig;
+
+    return patchConfig(userConfig);
+  };
 }
 
 function patchConfig(config: NextConfig): NextConfig {