create-plasmic-app 0.0.142 → 0.0.144

package/cpa-out/nextjs-app-loader-ts/plasmic-init-client.tsx

@@ -13,48 +13,10 @@ import { PLASMIC } from "@/plasmic-init";
 // PLASMIC.registerComponent(...);
 
 /**
- * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ * ClientPlasmicRootProvider is a Client Component that passes the loader to PlasmicRootProvider.
  *
- * Why? Props passed from Server to Client Components must be serializable.
+ * Props passed from a Server Component to a Client Component must be serializable.
  * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
- * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
- *
- * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:
- *
- * ```tsx
- * import { PLASMIC } from "@/plasmic-init";
- * import { PlasmicRootProvider } from "plasmicapp/loader-nextjs";
- * export default function MyPage() {
- *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
- *   return (
- *     <PlasmicRootProvider
- *       loader={PLASMIC} // ERROR: loader is not serializable
- *       prefetchedData={prefetchedData}
- *     >
- *       {yourContent()}
- *     </PlasmicRootProvider>;
- *   );
- * }
- * ```
- *
- * Therefore, we define ClientPlasmicRootProvider as a Client Component (this file is marked "use client").
- * ClientPlasmicRootProvider wraps the PlasmicRootProvider and passes in the loader for you,
- * while allowing your Server Component to pass in prefetched data and other serializable props:
- *
- * ```tsx
- * import { PLASMIC } from "@/plasmic-init";
- * import { ClientPlasmicRootProvider } from "@/plasmic-init-client"; // changed
- * export default function MyPage() {
- *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
- *   return (
- *     <ClientPlasmicRootProvider // don't pass in loader
- *       prefetchedData={prefetchedData}
- *     >
- *       {yourContent()}
- *     </ClientPlasmicRootProvider>;
- *   );
- * }
- * ```
  */
 export function ClientPlasmicRootProvider(
   props: Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">

package/cpa-out/nextjs-app-loader-ts/plasmic-init.ts

@@ -19,3 +19,8 @@ export const PLASMIC = initPlasmicLoader({
   // only use this for development, as this is significantly slower.
   preview: false,
 });
+
+// Register custom functions here so they are available during SSR.
+// See https://docs.plasmic.app/learn/registering-custom-functions/
+//
+// PLASMIC.registerFunction(...);

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicButton.jsx

@@ -146,6 +146,7 @@ function PlasmicButton__RenderFunc(props) {
       className={classNames(
         projectcss.all,
         projectcss.button,
+        projectcss.button__47tFX,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicDynamicPage.jsx

@@ -123,6 +123,7 @@ function PlasmicDynamicPage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}

package/cpa-out/nextjs-pages-codegen-js/components/plasmic/create_plasmic_app/PlasmicHomepage.jsx

@@ -126,6 +126,7 @@ function PlasmicHomepage__RenderFunc(props) {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}
@@ -149,7 +150,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -163,7 +166,9 @@ function PlasmicHomepage__RenderFunc(props) {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/cpa-out/nextjs-pages-codegen-js/package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"

package/cpa-out/nextjs-pages-codegen-js/plasmic.json

@@ -135,6 +135,6 @@
   "nextjsConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -282,6 +282,7 @@ function PlasmicButton__RenderFunc(props: {
       className={classNames(
         projectcss.all,
         projectcss.button,
+        projectcss.button__47tFX,
         projectcss.root_reset,
         projectcss.plasmic_default_styles,
         projectcss.plasmic_mixins,

package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -201,6 +201,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}

package/cpa-out/nextjs-pages-codegen-ts/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -205,6 +205,7 @@ function PlasmicHomepage__RenderFunc(props: {
               className={classNames(
                 projectcss.all,
                 projectcss.h1,
+                projectcss.h1__47tFX,
                 projectcss.__wab_text,
                 sty.h1
               )}
@@ -228,7 +229,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -242,7 +245,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/cpa-out/nextjs-pages-codegen-ts/package.json

@@ -9,8 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"

package/cpa-out/nextjs-pages-codegen-ts/plasmic.json

@@ -135,6 +135,6 @@
   "nextjsConfig": {
     "pagesDir": "../pages"
   },
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/nextjs-pages-loader-js/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/loader-nextjs": "^1.0.456",
+    "@plasmicapp/loader-nextjs": "^2.0.3",
     "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"

package/cpa-out/nextjs-pages-loader-ts/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@plasmicapp/loader-nextjs": "^1.0.456",
+    "@plasmicapp/loader-nextjs": "^2.0.3",
     "next": "14.2.35",
     "react": "^18",
     "react-dom": "^18"

package/cpa-out/react-codegen-js/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^1.0.0",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/cpa-out/react-codegen-js/plasmic.json

@@ -132,6 +132,6 @@
   },
   "wrapPagesWithGlobalContexts": true,
   "preserveJsImportExtensions": false,
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/react-codegen-ts/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^1.0.0",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/cpa-out/react-codegen-ts/plasmic.json

@@ -132,6 +132,6 @@
   },
   "wrapPagesWithGlobalContexts": true,
   "preserveJsImportExtensions": false,
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/tanstack-codegen-ts/package.json

@@ -12,11 +12,11 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@plasmicapp/cli": "^0.1.359",
-    "@plasmicapp/react-web": "^0.2.425",
+    "@plasmicapp/cli": "^0.1.361",
+    "@plasmicapp/react-web": "^1.0.6",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-devtools": "latest",
-    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-query": "^5.100.9",
     "@tanstack/react-router": "latest",
     "@tanstack/react-router-devtools": "latest",
     "@tanstack/router-plugin": "^1.132.0",
@@ -34,12 +34,11 @@
     "@types/node": "^22.10.2",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "jsdom": "^28.1.0",
-    "typescript": "^5.7.2",
-    "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5"
+    "typescript": "^6.0.2",
+    "vite": "^8.0.0",
+    "vitest": "^4.1.5"
   },
   "pnpm": {
     "onlyBuiltDependencies": [

package/cpa-out/tanstack-codegen-ts/plasmic.json

@@ -135,6 +135,6 @@
   "tanstackConfig": {
     "pagesDir": "../routes"
   },
-  "cliVersion": "0.1.359",
-  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.359/dist/plasmic.schema.json"
+  "cliVersion": "0.1.361",
+  "$schema": "https://unpkg.com/@plasmicapp/cli@0.1.361/dist/plasmic.schema.json"
 }

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicButton.tsx

@@ -281,6 +281,7 @@ function PlasmicButton__RenderFunc(props: {
       className={classNames(
         "plasmic_default__all",
         "plasmic_default__button",
+        "plasmic_default__button__47tFX",
         "root_reset_47tFXWjN2C4NyHFGGpaYQ3",
         "plasmic_default_styles",
         "plasmic_mixins",
@@ -425,7 +426,6 @@ function PlasmicButton__RenderFunc(props: {
           data-plasmic-override={overrides.startIconContainer}
           className={classNames(
             "plasmic_default__all",
-            "plasmic_default__div",
             "Button__startIconContainer__men7Z",
             {
               Button__startIconContainercolor_blue__men7Z7OS1A: hasVariant(
@@ -449,7 +449,6 @@ function PlasmicButton__RenderFunc(props: {
               <CheckSvgIcon
                 className={classNames(
                   "plasmic_default__all",
-                  "plasmic_default__svg",
                   "Button__svg__s6Xxe"
                 )}
                 role={"img"}
@@ -519,7 +518,6 @@ function PlasmicButton__RenderFunc(props: {
         data-plasmic-override={overrides.contentContainer}
         className={classNames(
           "plasmic_default__all",
-          "plasmic_default__div",
           "Button__contentContainer__sXXwU",
           {
             Button__contentContainer___focusVisibleWithin__sXXwUcjR25:
@@ -650,7 +648,6 @@ function PlasmicButton__RenderFunc(props: {
           data-plasmic-override={overrides.endIconContainer}
           className={classNames(
             "plasmic_default__all",
-            "plasmic_default__div",
             "Button__endIconContainer___3CzAx",
             {
               Button__endIconContainercolor_white___3CzAx5R3VM: hasVariant(
@@ -676,7 +673,6 @@ function PlasmicButton__RenderFunc(props: {
               <IconIcon
                 className={classNames(
                   "plasmic_default__all",
-                  "plasmic_default__svg",
                   "Button__svg__liJa"
                 )}
                 role={"img"}

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicDynamicPage.tsx

@@ -175,7 +175,6 @@ function PlasmicDynamicPage__RenderFunc(props: {
           data-plasmic-for-node={forNode}
           className={classNames(
             "plasmic_default__all",
-            "plasmic_default__div",
             "root_reset_47tFXWjN2C4NyHFGGpaYQ3",
             "plasmic_default_styles",
             "plasmic_mixins",
@@ -188,7 +187,6 @@ function PlasmicDynamicPage__RenderFunc(props: {
             data-plasmic-override={overrides.section}
             className={classNames(
               "plasmic_default__all",
-              "plasmic_default__section",
               "DynamicPage__section__mbqxB"
             )}
           >
@@ -198,6 +196,7 @@ function PlasmicDynamicPage__RenderFunc(props: {
               className={classNames(
                 "plasmic_default__all",
                 "plasmic_default__h1",
+                "plasmic_default__h1__47tFX",
                 "__wab_text",
                 "DynamicPage__h1__uyAe1"
               )}

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicHomepage.tsx

@@ -179,7 +179,6 @@ function PlasmicHomepage__RenderFunc(props: {
           data-plasmic-for-node={forNode}
           className={classNames(
             "plasmic_default__all",
-            "plasmic_default__div",
             "root_reset_47tFXWjN2C4NyHFGGpaYQ3",
             "plasmic_default_styles",
             "plasmic_mixins",
@@ -192,7 +191,6 @@ function PlasmicHomepage__RenderFunc(props: {
             data-plasmic-override={overrides.section}
             className={classNames(
               "plasmic_default__all",
-              "plasmic_default__section",
               "Homepage__section__pXQ"
             )}
           >
@@ -202,6 +200,7 @@ function PlasmicHomepage__RenderFunc(props: {
               className={classNames(
                 "plasmic_default__all",
                 "plasmic_default__h1",
+                "plasmic_default__h1__47tFX",
                 "__wab_text",
                 "Homepage__h1__equfk"
               )}
@@ -213,7 +212,6 @@ function PlasmicHomepage__RenderFunc(props: {
               data-plasmic-override={overrides.text}
               className={classNames(
                 "plasmic_default__all",
-                "plasmic_default__div",
                 "__wab_text",
                 "Homepage__text__aC4Gm"
               )}
@@ -226,7 +224,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Therefore, please avoid changing this project."}
@@ -240,7 +240,9 @@ function PlasmicHomepage__RenderFunc(props: {
                     }
                   </React.Fragment>
                   <span
-                    className={"plasmic_default__all plasmic_default__span"}
+                    className={
+                      "plasmic_default__all plasmic_default__span plasmic_default__span__47tFX"
+                    }
                     style={{ fontWeight: 700 }}
                   >
                     {"Code"}

package/cpa-out/tanstack-codegen-ts/src/components/plasmic/create_plasmic_app/PlasmicStyleTokensProvider.tsx

@@ -9,6 +9,8 @@ import { createUseStyleTokens } from "@plasmicapp/react-web";
 
 import { _useGlobalVariants } from "./plasmic"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectModule
 
+import "./plasmic.css"; // plasmic-import: 47tFXWjN2C4NyHFGGpaYQ3/projectcss
+
 const data = {
   base: `${"plasmic_tokens_47tFXWjN2C4NyHFGGpaYQ3"}`,
   varianted: []

package/cpa-out/tanstack-codegen-ts/src/router.tsx

@@ -4,7 +4,6 @@ import { routeTree } from './routeTree.gen'
 export function getRouter() {
   const router = createTanStackRouter({
     routeTree,
-
     scrollRestoration: true,
     defaultPreload: 'intent',
     defaultPreloadStaleTime: 0,

package/cpa-out/tanstack-codegen-ts/tsconfig.json

@@ -4,7 +4,6 @@
     "target": "ES2022",
     "jsx": "react-jsx",
     "module": "ESNext",
-    "baseUrl": ".",
     "paths": {
       "#/*": ["./src/*"],
       "@/*": ["./src/*"]

package/cpa-out/tanstack-codegen-ts/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite'
 import { devtools } from '@tanstack/devtools-vite'
-import tsconfigPaths from 'vite-tsconfig-paths'
 
 import { tanstackRouter } from '@tanstack/router-plugin/vite'
 
@@ -17,9 +16,9 @@ const config = defineConfig({
       "@plasmicapp/react-web",
     ],
   },
+  resolve: { tsconfigPaths: true },
   plugins: [
     devtools(),
-    tsconfigPaths({ projects: ['./tsconfig.json'] }),
     tailwindcss(),
     tanstackRouter({ target: 'react', autoCodeSplitting: true }),
     viteReact(),

package/dist/nextjs/nextjs.js

@@ -22,10 +22,11 @@ const file_utils_1 = require("../utils/file-utils");
 const lang_utils_1 = require("../utils/lang-utils");
 const npm_utils_1 = require("../utils/npm-utils");
 const layout_1 = require("./templates/app-codegen/layout");
+const plasmic_init_client_1 = require("./templates/app-codegen/plasmic-init-client");
 const catchall_page_1 = require("./templates/app-loader/catchall-page");
 const plasmic_host_1 = require("./templates/app-loader/plasmic-host");
 const plasmic_init_1 = require("./templates/app-loader/plasmic-init");
-const plasmic_init_client_1 = require("./templates/app-loader/plasmic-init-client");
+const plasmic_init_client_2 = require("./templates/app-loader/plasmic-init-client");
 const app_1 = require("./templates/pages-codegen/app");
 const plasmic_host_2 = require("./templates/pages-codegen/plasmic-host");
 const catchall_page_2 = require("./templates/pages-loader/catchall-page");
@@ -97,7 +98,7 @@ function generateFilesAppDir(args) {
             // ./plasmic-init.ts
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init.${jsOrTs}`), (0, plasmic_init_1.makePlasmicInit_app_loader)(projectId, (0, lang_utils_1.ensure)(projectApiToken, "Missing projectApiToken")));
             // ./plasmic-init-client.ts
-            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_loader)(jsOrTs));
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_2.makePlasmicInitClient_app_loader)(jsOrTs));
             // ./app/plasmic-host/page.tsx
             yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_1.makePlasmicHostPage_app_loader)());
@@ -106,8 +107,12 @@ function generateFilesAppDir(args) {
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "[[...catchall]]", `page.${jsOrTs}x`), (0, catchall_page_1.makeCatchallPage_app_loader)(jsOrTs));
         }
         else {
+            // Replace starter layout. Removes app/layout.js in JS projects before writing layout.jsx.
+            (0, file_utils_1.deleteGlob)(path_1.default.join(projectPath, "app", "layout.*"));
             // ./app/layout.tsx
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", `layout.${jsOrTs}x`), (0, layout_1.makeLayout_app_codegen)(jsOrTs));
+            // ./plasmic-init-client.tsx
+            yield fs_1.promises.writeFile(path_1.default.join(projectPath, `plasmic-init-client.${jsOrTs}x`), (0, plasmic_init_client_1.makePlasmicInitClient_app_codegen)(jsOrTs));
             // ./app/plasmic-host/page.tsx
             yield fs_1.promises.mkdir(path_1.default.join(projectPath, "app", "plasmic-host"));
             yield fs_1.promises.writeFile(path_1.default.join(projectPath, "app", "plasmic-host", `page.${jsOrTs}x`), (0, plasmic_host_2.makePlasmicHostPage_pages_codegen)() // plasmic-host page contents are the same as the pages router

package/dist/nextjs/templates/app-codegen/layout.js

@@ -4,8 +4,7 @@ exports.makeLayout_app_codegen = void 0;
 const file_utils_1 = require("../../../utils/file-utils");
 function makeLayout_app_codegen(jsOrTs) {
     return `import '@/app/globals.css'
-import { PlasmicRootProvider } from "@plasmicapp/react-web";
-import Link from "next/link";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
 
 export default function RootLayout({
   children,
@@ -15,9 +14,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <PlasmicRootProvider Link={Link}>
+        <ClientPlasmicRootProvider>
           {children}
-        </PlasmicRootProvider>
+        </ClientPlasmicRootProvider>
       </body>
     </html>
   );

package/dist/nextjs/templates/app-codegen/plasmic-init-client.d.ts

@@ -0,0 +1,2 @@
+import { JsOrTs } from "../../../utils/types";
+export declare function makePlasmicInitClient_app_codegen(jsOrTs: JsOrTs): string;

package/dist/nextjs/templates/app-codegen/plasmic-init-client.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makePlasmicInitClient_app_codegen = void 0;
+const file_utils_1 = require("../../../utils/file-utils");
+function makePlasmicInitClient_app_codegen(jsOrTs) {
+    return `"use client";
+
+${(0, file_utils_1.ifTs)(jsOrTs, 'import type * as React from "react";\n')}import { PlasmicRootProvider } from "@plasmicapp/react-web";
+import Link from "next/link";
+
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes Next's Link to PlasmicRootProvider.
+ *
+ * Props passed from a Server Component to a Client Component must be serializable.
+ * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
+ */
+export function ClientPlasmicRootProvider(
+  props${(0, file_utils_1.ifTs)(jsOrTs, ': Omit<React.ComponentProps<typeof PlasmicRootProvider>, "Link">')}
+) {
+  return <PlasmicRootProvider Link={Link} {...props} />;
+}
+`;
+}
+exports.makePlasmicInitClient_app_codegen = makePlasmicInitClient_app_codegen;

package/dist/nextjs/templates/app-loader/plasmic-init-client.js

@@ -18,48 +18,10 @@ import { PLASMIC } from "@/plasmic-init";
 // PLASMIC.registerComponent(...);
 
 /**
- * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ * ClientPlasmicRootProvider is a Client Component that passes the loader to PlasmicRootProvider.
  *
- * Why? Props passed from Server to Client Components must be serializable.
+ * Props passed from a Server Component to a Client Component must be serializable.
  * https://nextjs.org/docs/app/getting-started/server-and-client-components#passing-data-from-server-to-client-components
- * However, PlasmicRootProvider requires a loader, but the loader is NOT serializable.
- *
- * In a Server Component like app/<your-path>/path.tsx, rendering the following would not work:
- *
- * \`\`\`tsx
- * import { PLASMIC } from "@/plasmic-init";
- * import { PlasmicRootProvider } from "plasmicapp/loader-nextjs";
- * export default function MyPage() {
- *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
- *   return (
- *     <PlasmicRootProvider
- *       loader={PLASMIC} // ERROR: loader is not serializable
- *       prefetchedData={prefetchedData}
- *     >
- *       {yourContent()}
- *     </PlasmicRootProvider>;
- *   );
- * }
- * \`\`\`
- *
- * Therefore, we define ClientPlasmicRootProvider as a Client Component (this file is marked "use client").
- * ClientPlasmicRootProvider wraps the PlasmicRootProvider and passes in the loader for you,
- * while allowing your Server Component to pass in prefetched data and other serializable props:
- *
- * \`\`\`tsx
- * import { PLASMIC } from "@/plasmic-init";
- * import { ClientPlasmicRootProvider } from "@/plasmic-init-client"; // changed
- * export default function MyPage() {
- *   const prefetchedData = await PLASMIC.fetchComponentData("YourPage");
- *   return (
- *     <ClientPlasmicRootProvider // don't pass in loader
- *       prefetchedData={prefetchedData}
- *     >
- *       {yourContent()}
- *     </ClientPlasmicRootProvider>;
- *   );
- * }
- * \`\`\`
  */
 export function ClientPlasmicRootProvider(
   props${(0, file_utils_1.ifTs)(jsOrTs, ': Omit<React.ComponentProps<typeof PlasmicRootProvider>, "loader">')}

package/dist/nextjs/templates/app-loader/plasmic-init.js

@@ -27,11 +27,6 @@ export const PLASMIC = initPlasmicLoader({
 // Register custom functions here so they are available during SSR.
 // See https://docs.plasmic.app/learn/registering-custom-functions/
 //
-// IMPORTANT for app-router projects: any custom function used by a server
-// query must be registered here, which runs on the server.  Registrations in
-// plasmic-init-client.tsx are only available in the browser and will cause
-// a runtime error if referenced by a server query during SSR.
-//
 // PLASMIC.registerFunction(...);
 `;
 }