Lendemor/next 14

reflex/.templates/web/next.config.js

@@ -3,4 +3,5 @@ module.exports = {
   compress: true,
   reactStrictMode: true,
   trailingSlash: true,
+  output: "",
 };

reflex/constants/base.py

@@ -24,7 +24,7 @@ class Dirs(SimpleNamespace):
     # The name of the utils file.
     UTILS = "utils"
     # The name of the output static directory.
-    STATIC = "_static"
+    STATIC = "out"
     # The name of the state file.
     STATE_PATH = "/".join([UTILS, "state"])
     # The name of the components file.

reflex/constants/installer.py

@@ -95,8 +95,8 @@ class Commands(SimpleNamespace):
         """The commands to define in package.json."""
 
         DEV = "next dev"
-        EXPORT = "next build && next export -o _static"
-        EXPORT_SITEMAP = "next build && next-sitemap && next export -o _static"
+        EXPORT = "next build"
+        EXPORT_SITEMAP = "next-sitemap && next build"
         PROD = "next start"
 
     PATH = os.path.join(Dirs.WEB, "package.json")
@@ -106,7 +106,7 @@ class Commands(SimpleNamespace):
         "focus-visible": "5.2.0",
         "framer-motion": "10.16.4",
         "json5": "2.2.3",
-        "next": "13.5.4",
+        "next": "14.0.1",
         "next-sitemap": "4.1.8",
         "next-themes": "0.2.0",
         "react": "18.2.0",

reflex/reflex.py

@@ -337,6 +337,8 @@ def export(
     console.rule("[bold]Compiling production app and preparing for export.")
 
     if frontend:
+        # Update some parameters for export
+        prerequisites.update_next_config(export=True)
         # Ensure module can be imported and app.compile() is called.
         prerequisites.get_app()
         # Set up .web directory and install frontend dependencies.

reflex/testing.py

@@ -677,7 +677,7 @@ class AppHarnessProd(AppHarness):
     frontend_server: Optional[Subdir404TCPServer] = None
 
     def _run_frontend(self):
-        web_root = self.app_path / reflex.constants.Dirs.WEB / "_static"
+        web_root = self.app_path / reflex.constants.Dirs.WEB_STATIC
         error_page_map = {
             404: web_root / "404.html",
         }

reflex/utils/build.py

@@ -181,7 +181,7 @@ def export(
                 target=os.path.join(
                     zip_dest_dir, constants.ComponentName.FRONTEND.zip()
                 ),
-                root_dir=".web/_static",
+                root_dir=constants.Dirs.WEB_STATIC,
                 files_to_exclude=files_to_exclude,
                 exclude_venv_dirs=False,
             )

reflex/utils/prerequisites.py

@@ -25,7 +25,7 @@
 
 from reflex import constants, model
 from reflex.compiler import templates
-from reflex.config import Config, get_config
+from reflex.config import get_config
 from reflex.utils import console, path_ops, processes
 
 
@@ -288,15 +288,7 @@ def initialize_web_directory():
 
     path_ops.mkdir(constants.Dirs.WEB_ASSETS)
 
-    # update nextJS config based on rxConfig
-    next_config_file = os.path.join(constants.Dirs.WEB, constants.Next.CONFIG_FILE)
-
-    with open(next_config_file, "r") as file:
-        next_config = file.read()
-        next_config = update_next_config(next_config, get_config())
-
-    with open(next_config_file, "w") as file:
-        file.write(next_config)
+    update_next_config()
 
     # Initialize the reflex json file.
     init_reflex_json()
@@ -337,16 +329,24 @@ def init_reflex_json():
     path_ops.update_json_file(constants.Reflex.JSON, reflex_json)
 
 
-def update_next_config(next_config: str, config: Config) -> str:
-    """Update Next.js config from Reflex config. Is its own function for testing.
+def update_next_config(export=False):
+    """Update Next.js config from Reflex config.
 
     Args:
-        next_config: Content of next.config.js.
-        config: A reflex Config object.
-
-    Returns:
-        The next_config updated from config.
+        export: if the method run during reflex export.
     """
+    next_config_file = os.path.join(constants.Dirs.WEB, constants.Next.CONFIG_FILE)
+
+    with open(next_config_file, "r") as file:
+        next_config = file.read()
+
+    next_config = _update_next_config(next_config, get_config(), export=export)
+
+    with open(next_config_file, "w") as file:
+        file.write(next_config)
+
+
+def _update_next_config(next_config, config, export=False):
     next_config = re.sub(
         "compress: (true|false)",
         f'compress: {"true" if config.next_compression else "false"}',
@@ -357,6 +357,11 @@ def update_next_config(next_config: str, config: Config) -> str:
         f'basePath: "{config.frontend_path or ""}"',
         next_config,
     )
+
+    if export:
+        next_config = re.sub('output: ".*?"', 'output: "export"', next_config)
+    else:
+        next_config = re.sub('output: "export"', 'output: ""', next_config)
     return next_config
 
 

tests/test_prerequisites.py

@@ -4,11 +4,11 @@
 
 from reflex import constants
 from reflex.config import Config
-from reflex.utils.prerequisites import initialize_requirements_txt, update_next_config
+from reflex.utils.prerequisites import _update_next_config, initialize_requirements_txt
 
 
 @pytest.mark.parametrize(
-    "template_next_config, reflex_config, expected_next_config",
+    "input, config, export, expected_output",
     [
         (
             """
@@ -17,17 +17,20 @@
                     compress: true,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
                 };
             """,
             Config(
                 app_name="test",
             ),
+            False,
             """
                 module.exports = {
                     basePath: "",
                     compress: true,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
                 };
             """,
         ),
@@ -38,18 +41,21 @@
                     compress: true,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
                 };
             """,
             Config(
                 app_name="test",
                 next_compression=False,
             ),
+            False,
             """
                 module.exports = {
                     basePath: "",
                     compress: false,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
                 };
             """,
         ),
@@ -60,18 +66,21 @@
                     compress: true,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
                 };
             """,
             Config(
                 app_name="test",
                 frontend_path="/test",
             ),
+            False,
             """
                 module.exports = {
                     basePath: "/test",
                     compress: true,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
                 };
             """,
         ),
@@ -82,28 +91,57 @@
                     compress: true,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
                 };
             """,
             Config(
                 app_name="test",
                 frontend_path="/test",
                 next_compression=False,
             ),
+            False,
             """
                 module.exports = {
                     basePath: "/test",
                     compress: false,
                     reactStrictMode: true,
                     trailingSlash: true,
+                    output: "",
+                };
+            """,
+        ),
+        (
+            """
+                module.exports = {
+                    basePath: "",
+                    compress: true,
+                    reactStrictMode: true,
+                    trailingSlash: true,
+                    output: "",
+                };
+            """,
+            Config(
+                app_name="test",
+            ),
+            True,
+            """
+                module.exports = {
+                    basePath: "",
+                    compress: true,
+                    reactStrictMode: true,
+                    trailingSlash: true,
+                    output: "export",
                 };
             """,
         ),
     ],
 )
-def test_update_next_config(template_next_config, reflex_config, expected_next_config):
-    assert (
-        update_next_config(template_next_config, reflex_config) == expected_next_config
-    )
+def test_update_next_config(input, config, export, expected_output):
+    output = _update_next_config(input, config, export=export)
+    assert output == expected_output
+
+    if export:
+        assert _update_next_config(output, config) == input
 
 
 def test_initialize_requirements_txt(mocker):