npm - create-plasmic-app - Versions diffs - 0.0.134 → 0.0.135 - Mend

create-plasmic-app 0.0.134 → 0.0.135

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/cpa-out/nextjs-app-loader-js/app/[[...catchall]]/page.jsx ADDED Viewed

@@ -0,0 +1,80 @@
+import { PLASMIC } from "@/plasmic-init";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { notFound } from "next/navigation";
+// Use revalidate if you want incremental static regeneration
+export const revalidate = 60;
+export async function generateStaticParams() {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+export async function generateMetadata(
+  { params },
+  parent
+) {
+  const { componentData } = await getPlasmicData(params);
+  if (!componentData) {
+    return parent;
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+  return { ...(await parent), ...metadata };
+}
+export default async function PlasmicLoaderPage({
+  params,
+}) {
+  const { pagePath, componentData } = await getPlasmicData(params);
+  if (!componentData) {
+    notFound();
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
+  return (
+    <ClientPlasmicRootProvider
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
+      pageParams={pageMeta.params}
+      pageRoute={pageMeta.path}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </ClientPlasmicRootProvider>
+  );
+}
+async function getPlasmicData(
+  params
+) {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? `/${catchall.join("/")}` : "/";
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
+}

package/cpa-out/nextjs-app-loader-js/app/layout.js ADDED Viewed

@@ -0,0 +1,28 @@
+import localFont from "next/font/local";
+import "./globals.css";
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/cpa-out/nextjs-app-loader-js/app/plasmic-host/page.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
+import "@/plasmic-init-client";
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}

package/cpa-out/nextjs-app-loader-js/plasmic-init-client.jsx ADDED Viewed

@@ -0,0 +1,65 @@
+"use client";
+import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs";
+import { PLASMIC } from "@/plasmic-init";
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+// PLASMIC.registerComponent(...);
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ *
+ * Why? Props passed from Server to Client Components 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
+) {
+  return (
+    <PlasmicRootProvider loader={PLASMIC} {...props}></PlasmicRootProvider>
+  );
+}

package/cpa-out/nextjs-app-loader-js/plasmic-init.js CHANGED Viewed

@@ -1,4 +1,5 @@
-import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -13,13 +14,7 @@ export const PLASMIC = initPlasmicLoader({
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-});
-// You can register any code components that you want to use here; see
-// https://docs.plasmic.app/learn/code-components-ref/
-// And configure your Plasmic project to use the host url pointing at
-// the /plasmic-host page of your nextjs app (for example,
-// http://localhost:3000/plasmic-host).  See
-// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
-// PLASMIC.registerComponent(...);
+  // Needed for Next.js app router support.
+  nextNavigation: NextNavigation,
+});

package/cpa-out/nextjs-app-loader-ts/app/[[...catchall]]/page.tsx ADDED Viewed

@@ -0,0 +1,85 @@
+import { PLASMIC } from "@/plasmic-init";
+import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { ComponentRenderData,PlasmicComponent } from "@plasmicapp/loader-nextjs";
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
+// Use revalidate if you want incremental static regeneration
+export const revalidate = 60;
+interface Params {
+      catchall: string[] | undefined;
+    }
+export async function generateStaticParams(): Promise<Params[]> {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+interface LoaderPageProps {
+      params: Promise<Params>;
+    }
+export async function generateMetadata(
+  { params }: LoaderPageProps,
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const { componentData } = await getPlasmicData(params);
+  if (!componentData) {
+    return parent as Promise<Metadata>;
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+  return { ...(await parent), ...metadata };
+}
+export default async function PlasmicLoaderPage({
+  params,
+}: LoaderPageProps) {
+  const { pagePath, componentData } = await getPlasmicData(params);
+  if (!componentData) {
+    notFound();
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
+  return (
+    <ClientPlasmicRootProvider
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
+      pageParams={pageMeta.params}
+      pageRoute={pageMeta.path}
+    >
+      <PlasmicComponent component={pageMeta.displayName} />
+    </ClientPlasmicRootProvider>
+  );
+}
+async function getPlasmicData(
+  params: Promise<Params>
+): Promise<{ pagePath: string; componentData?: ComponentRenderData }> {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? `/${catchall.join("/")}` : "/";
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
+}

package/cpa-out/nextjs-app-loader-ts/app/layout.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+      </body>
+    </html>
+  );
+}

package/cpa-out/nextjs-app-loader-ts/app/plasmic-host/page.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+import { PlasmicCanvasHost } from "@plasmicapp/loader-nextjs";
+import "@/plasmic-init-client";
+export default function PlasmicHost() {
+  return <PlasmicCanvasHost />;
+}

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

@@ -0,0 +1,65 @@
+"use client";
+import { PlasmicRootProvider } from "@plasmicapp/loader-nextjs";
+import { PLASMIC } from "@/plasmic-init";
+// You can register any code components that you want to use here; see
+// https://docs.plasmic.app/learn/code-components-ref/
+// And configure your Plasmic project to use the host url pointing at
+// the /plasmic-host page of your nextjs app (for example,
+// http://localhost:3000/plasmic-host).  See
+// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
+// PLASMIC.registerComponent(...);
+/**
+ * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
+ *
+ * Why? Props passed from Server to Client Components 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">
+) {
+  return (
+    <PlasmicRootProvider loader={PLASMIC} {...props}></PlasmicRootProvider>
+  );
+}

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

@@ -1,4 +1,5 @@
-import { initPlasmicLoader } from "@plasmicapp/loader-nextjs";
+import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -13,13 +14,7 @@ export const PLASMIC = initPlasmicLoader({
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
-});
-// You can register any code components that you want to use here; see
-// https://docs.plasmic.app/learn/code-components-ref/
-// And configure your Plasmic project to use the host url pointing at
-// the /plasmic-host page of your nextjs app (for example,
-// http://localhost:3000/plasmic-host).  See
-// https://docs.plasmic.app/learn/app-hosting/#set-a-plasmic-project-to-use-your-app-host
-// PLASMIC.registerComponent(...);
+  // Needed for Next.js app router support.
+  nextNavigation: NextNavigation,
+});

package/cpa-out/nextjs-app-loader-ts/tsconfig.json CHANGED Viewed

@@ -12,10 +12,15 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }

package/dist/index.js CHANGED Viewed

@@ -251,8 +251,6 @@ function run() {
                 };
             }
         }
-        // Get the projectId
-        console.log();
         const projectInput = yield maybePrompt({
             name: "projectId",
             message: `If you don't have a project yet, create one by going to https://studio.plasmic.app/starters/blank

package/dist/nextjs/templates/app-loader/catchall-page.js CHANGED Viewed

@@ -3,65 +3,90 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeCatchallPage_app_loader = void 0;
 const file_utils_1 = require("../../../utils/file-utils");
 function makeCatchallPage_app_loader(jsOrTs) {
-    return `import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { notFound } from "next/navigation";
-import { PLASMIC } from "@/plasmic-init";
+    return `import { PLASMIC } from "@/plasmic-init";
 import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { ${(0, file_utils_1.ifTs)(jsOrTs, `ComponentRenderData,`)}PlasmicComponent } from "@plasmicapp/loader-nextjs";${(0, file_utils_1.ifTs)(jsOrTs, `
+import { Metadata, ResolvingMetadata } from "next";`)}
+import { notFound } from "next/navigation";
 // Use revalidate if you want incremental static regeneration
 export const revalidate = 60;
+${(0, file_utils_1.ifTs)(jsOrTs, `interface Params {
+      catchall: string[] | undefined;
+    }`)}
+export async function generateStaticParams()${(0, file_utils_1.ifTs)(jsOrTs, ": Promise<Params[]>")} {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+${(0, file_utils_1.ifTs)(jsOrTs, `interface LoaderPageProps {
+      params: Promise<Params>;
+    }`)}
+export async function generateMetadata(
+  { params }${(0, file_utils_1.ifTs)(jsOrTs, `: LoaderPageProps`)},
+  parent${(0, file_utils_1.ifTs)(jsOrTs, `: ResolvingMetadata`)}
+)${(0, file_utils_1.ifTs)(jsOrTs, `: Promise<Metadata>`)} {
+  const { componentData } = await getPlasmicData(params);
+  if (!componentData) {
+    return parent${(0, file_utils_1.ifTs)(jsOrTs, ` as Promise<Metadata>`)};
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+  return { ...(await parent), ...metadata };
+}
 export default async function PlasmicLoaderPage({
   params,
-  searchParams,
-}${(0, file_utils_1.ifTs)(jsOrTs, `: {
-  params?: { catchall: string[] | undefined };
-  searchParams?: Record<string, string | string[]>;
-}`)}) {
-  const plasmicComponentData = await fetchPlasmicComponentData(params?.catchall);
-  if (!plasmicComponentData) {
-    notFound();
-  }
+}${(0, file_utils_1.ifTs)(jsOrTs, `: LoaderPageProps`)}) {
+  const { pagePath, componentData } = await getPlasmicData(params);
-  const { prefetchedData } = plasmicComponentData;
-  if (prefetchedData.entryCompMetas.length === 0) {
+  if (!componentData) {
     notFound();
   }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
-  const pageMeta = prefetchedData.entryCompMetas[0];
   return (
     <ClientPlasmicRootProvider
-      prefetchedData={prefetchedData}
-      pageRoute={pageMeta.path}
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
       pageParams={pageMeta.params}
-      pageQuery={searchParams}
+      pageRoute={pageMeta.path}
     >
-      <PlasmicComponent
-        component={pageMeta.displayName}
-      />
+      <PlasmicComponent component={pageMeta.displayName} />
     </ClientPlasmicRootProvider>
   );
 }
-async function fetchPlasmicComponentData(catchall${(0, file_utils_1.ifTs)(jsOrTs, ": string[] | undefined")}) {
-  const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
-  const prefetchedData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!prefetchedData) {
-    notFound();
-  }
+async function getPlasmicData(
+  params${(0, file_utils_1.ifTs)(jsOrTs, ": Promise<Params>")}
+)${(0, file_utils_1.ifTs)(jsOrTs, ": Promise<{ pagePath: string; componentData?: ComponentRenderData }>")} {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? \`/\${catchall.join("/")}\` : "/";
-  return { prefetchedData };
-}
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
-export async function generateStaticParams() {
-  const pageModules = await PLASMIC.fetchPages();
-  return pageModules.map((mod) => {
-    const catchall =
-      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
-    return {
-      catchall,
-    };
-  });
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
 }
 `;
 }

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

@@ -21,7 +21,7 @@ import { PLASMIC } from "@/plasmic-init";
  * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
  *
  * Why? Props passed from Server to Client Components must be serializable.
- * https://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization
+ * 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:

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.makePlasmicInit_app_loader = void 0;
 function makePlasmicInit_app_loader(projectId, projectApiToken) {
     return `import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -17,6 +18,9 @@ export const PLASMIC = initPlasmicLoader({
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
+  // Needed for Next.js app router support.
+  nextNavigation: NextNavigation,
 });
 `;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-plasmic-app",
-  "version": "0.0.134",
+  "version": "0.0.135",
   "description": "Create Plasmic-powered React apps",
   "main": "./dist/lib.js",
   "types": "./dist/lib.d.ts",
@@ -47,5 +47,5 @@
     "validate-npm-package-name": "^3.0.0",
     "yargs": "^16.2.0"
   },
-  "gitHead": "d429f0c262533e0bcc1e2a18675c4e6277580ac6"
+  "gitHead": "7bdae76d262e9a939b16d46be2b806ae68b374ca"
 }

package/src/index.ts CHANGED Viewed

@@ -244,8 +244,6 @@ async function run(): Promise<void> {
     }
   }
-  // Get the projectId
-  console.log();
   const projectInput = await maybePrompt<string>({
     name: "projectId",
     message: `If you don't have a project yet, create one by going to https://studio.plasmic.app/starters/blank

package/src/nextjs/templates/app-loader/catchall-page.ts CHANGED Viewed

@@ -2,71 +2,108 @@ import { ifTs } from "../../../utils/file-utils";
 import { JsOrTs } from "../../../utils/types";
 export function makeCatchallPage_app_loader(jsOrTs: JsOrTs): string {
-  return `import { PlasmicComponent } from "@plasmicapp/loader-nextjs";
-import { notFound } from "next/navigation";
-import { PLASMIC } from "@/plasmic-init";
+  return `import { PLASMIC } from "@/plasmic-init";
 import { ClientPlasmicRootProvider } from "@/plasmic-init-client";
+import { ${ifTs(
+    jsOrTs,
+    `ComponentRenderData,`
+  )}PlasmicComponent } from "@plasmicapp/loader-nextjs";${ifTs(
+    jsOrTs,
+    `
+import { Metadata, ResolvingMetadata } from "next";`
+  )}
+import { notFound } from "next/navigation";
 // Use revalidate if you want incremental static regeneration
 export const revalidate = 60;
+${ifTs(
+  jsOrTs,
+  `interface Params {
+      catchall: string[] | undefined;
+    }`
+)}
+export async function generateStaticParams()${ifTs(
+    jsOrTs,
+    ": Promise<Params[]>"
+  )} {
+  const pageModules = await PLASMIC.fetchPages();
+  return pageModules.map((mod) => {
+    const catchall =
+      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
+    return {
+      catchall,
+    };
+  });
+}
+${ifTs(
+  jsOrTs,
+  `interface LoaderPageProps {
+      params: Promise<Params>;
+    }`
+)}
+export async function generateMetadata(
+  { params }${ifTs(jsOrTs, `: LoaderPageProps`)},
+  parent${ifTs(jsOrTs, `: ResolvingMetadata`)}
+)${ifTs(jsOrTs, `: Promise<Metadata>`)} {
+  const { componentData } = await getPlasmicData(params);
+  if (!componentData) {
+    return parent${ifTs(jsOrTs, ` as Promise<Metadata>`)};
+  }
+  const pageMeta = componentData.entryCompMetas[0];
+  const metadata = await PLASMIC.unstable__generateMetadata(componentData, {
+    params: pageMeta.params ?? {},
+    query: {},
+  });
+  return { ...(await parent), ...metadata };
+}
 export default async function PlasmicLoaderPage({
   params,
-  searchParams,
-}${ifTs(
-    jsOrTs,
-    `: {
-  params?: { catchall: string[] | undefined };
-  searchParams?: Record<string, string | string[]>;
-}`
-  )}) {
-  const plasmicComponentData = await fetchPlasmicComponentData(params?.catchall);
-  if (!plasmicComponentData) {
-    notFound();
-  }
+}${ifTs(jsOrTs, `: LoaderPageProps`)}) {
+  const { pagePath, componentData } = await getPlasmicData(params);
-  const { prefetchedData } = plasmicComponentData;
-  if (prefetchedData.entryCompMetas.length === 0) {
+  if (!componentData) {
     notFound();
   }
+  const pageMeta = componentData.entryCompMetas[0];
+  const prefetchedQueryData = await PLASMIC.unstable__getServerQueriesData(
+    componentData,
+    {
+      pagePath,
+      params: pageMeta.params,
+      query: {},
+    }
+  );
-  const pageMeta = prefetchedData.entryCompMetas[0];
   return (
     <ClientPlasmicRootProvider
-      prefetchedData={prefetchedData}
-      pageRoute={pageMeta.path}
+      prefetchedData={componentData}
+      prefetchedQueryData={prefetchedQueryData}
       pageParams={pageMeta.params}
-      pageQuery={searchParams}
+      pageRoute={pageMeta.path}
     >
-      <PlasmicComponent
-        component={pageMeta.displayName}
-      />
+      <PlasmicComponent component={pageMeta.displayName} />
     </ClientPlasmicRootProvider>
   );
 }
-async function fetchPlasmicComponentData(catchall${ifTs(
+async function getPlasmicData(
+  params${ifTs(jsOrTs, ": Promise<Params>")}
+)${ifTs(
     jsOrTs,
-    ": string[] | undefined"
-  )}) {
-  const plasmicPath = "/" + (catchall ? catchall.join("/") : "");
-  const prefetchedData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!prefetchedData) {
-    notFound();
-  }
+    ": Promise<{ pagePath: string; componentData?: ComponentRenderData }>"
+  )} {
+  const catchall = (await params).catchall;
+  const pagePath = catchall ? \`/\${catchall.join("/")}\` : "/";
-  return { prefetchedData };
-}
+  const componentData = await PLASMIC.maybeFetchComponentData(pagePath);
-export async function generateStaticParams() {
-  const pageModules = await PLASMIC.fetchPages();
-  return pageModules.map((mod) => {
-    const catchall =
-      mod.path === "/" ? undefined : mod.path.substring(1).split("/");
-    return {
-      catchall,
-    };
-  });
+  if (!componentData || componentData.entryCompMetas.length === 0) {
+    return { pagePath };
+  }
+  return { pagePath, componentData };
 }
 `;
 }

package/src/nextjs/templates/app-loader/plasmic-init-client.ts CHANGED Viewed

@@ -20,7 +20,7 @@ import { PLASMIC } from "@/plasmic-init";
  * ClientPlasmicRootProvider is a Client Component that passes in the loader for you.
  *
  * Why? Props passed from Server to Client Components must be serializable.
- * https://beta.nextjs.org/docs/rendering/server-and-client-components#passing-props-from-server-to-client-components-serialization
+ * 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:

package/src/nextjs/templates/app-loader/plasmic-init.ts CHANGED Viewed

@@ -3,6 +3,7 @@ export function makePlasmicInit_app_loader(
   projectApiToken: string
 ): string {
   return `import { initPlasmicLoader } from "@plasmicapp/loader-nextjs/react-server-conditional";
+import * as NextNavigation from "next/navigation";
 export const PLASMIC = initPlasmicLoader({
   projects: [
@@ -17,6 +18,9 @@ export const PLASMIC = initPlasmicLoader({
   // project, allowing you to see your designs without publishing.  Please
   // only use this for development, as this is significantly slower.
   preview: false,
+  // Needed for Next.js app router support.
+  nextNavigation: NextNavigation,
 });
 `;
 }

package/cpa-out/nextjs-app-loader-js/pages/[[...catchall]].jsx DELETED Viewed

@@ -1,68 +0,0 @@
-import * as React from "react";
-import {
-  PlasmicComponent,
-  extractPlasmicQueryData,
-  ComponentRenderData,
-  PlasmicRootProvider,
-} from "@plasmicapp/loader-nextjs";
-import Error from "next/error";
-import { useRouter } from "next/router";
-import { PLASMIC } from "@/plasmic-init";
-export default function PlasmicLoaderPage(props) {
-  const { plasmicData, queryCache } = props;
-  const router = useRouter();
-  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
-    return <Error statusCode={404} />;
-  }
-  const pageMeta = plasmicData.entryCompMetas[0];
-  return (
-    <PlasmicRootProvider
-      loader={PLASMIC}
-      prefetchedData={plasmicData}
-      prefetchedQueryData={queryCache}
-      pageRoute={pageMeta.path}
-      pageParams={pageMeta.params}
-      pageQuery={router.query}
-    >
-      <PlasmicComponent component={pageMeta.displayName} />
-    </PlasmicRootProvider>
-  );
-}
-export const getStaticProps = async (context) => {
-  const { catchall } = context.params ?? {};
-  const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? `/${catchall.join('/')}` : '/';
-  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!plasmicData) {
-    // non-Plasmic catch-all
-    return { props: {} };
-  }
-  const pageMeta = plasmicData.entryCompMetas[0];
-  // Cache the necessary data fetched for the page
-  const queryCache = await extractPlasmicQueryData(
-    <PlasmicRootProvider
-      loader={PLASMIC}
-      prefetchedData={plasmicData}
-      pageRoute={pageMeta.path}
-      pageParams={pageMeta.params}
-    >
-      <PlasmicComponent component={pageMeta.displayName} />
-    </PlasmicRootProvider>
-  );
-  // Use revalidate if you want incremental static regeneration
-  return { props: { plasmicData, queryCache }, revalidate: 60 };
-}
-export const getStaticPaths = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        catchall: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: "blocking",
-  };
-}

package/cpa-out/nextjs-app-loader-js/pages/api/hello.js DELETED Viewed

@@ -1,5 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-export default function handler(req, res) {
-  res.status(200).json({ name: "John Doe" });
-}

package/cpa-out/nextjs-app-loader-js/pages/plasmic-host.jsx DELETED Viewed

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
-import { PLASMIC } from '@/plasmic-init';
-export default function PlasmicHost() {
-  return PLASMIC && <PlasmicCanvasHost />;
-}

package/cpa-out/nextjs-app-loader-ts/pages/[[...catchall]].tsx DELETED Viewed

@@ -1,72 +0,0 @@
-import * as React from "react";
-import {
-  PlasmicComponent,
-  extractPlasmicQueryData,
-  ComponentRenderData,
-  PlasmicRootProvider,
-} from "@plasmicapp/loader-nextjs";
-import type { GetStaticPaths, GetStaticProps } from "next";
-import Error from "next/error";
-import { useRouter } from "next/router";
-import { PLASMIC } from "@/plasmic-init";
-export default function PlasmicLoaderPage(props: {
-  plasmicData?: ComponentRenderData;
-  queryCache?: Record<string, unknown>;
-}) {
-  const { plasmicData, queryCache } = props;
-  const router = useRouter();
-  if (!plasmicData || plasmicData.entryCompMetas.length === 0) {
-    return <Error statusCode={404} />;
-  }
-  const pageMeta = plasmicData.entryCompMetas[0];
-  return (
-    <PlasmicRootProvider
-      loader={PLASMIC}
-      prefetchedData={plasmicData}
-      prefetchedQueryData={queryCache}
-      pageRoute={pageMeta.path}
-      pageParams={pageMeta.params}
-      pageQuery={router.query}
-    >
-      <PlasmicComponent component={pageMeta.displayName} />
-    </PlasmicRootProvider>
-  );
-}
-export const getStaticProps: GetStaticProps = async (context) => {
-  const { catchall } = context.params ?? {};
-  const plasmicPath = typeof catchall === 'string' ? catchall : Array.isArray(catchall) ? `/${catchall.join('/')}` : '/';
-  const plasmicData = await PLASMIC.maybeFetchComponentData(plasmicPath);
-  if (!plasmicData) {
-    // non-Plasmic catch-all
-    return { props: {} };
-  }
-  const pageMeta = plasmicData.entryCompMetas[0];
-  // Cache the necessary data fetched for the page
-  const queryCache = await extractPlasmicQueryData(
-    <PlasmicRootProvider
-      loader={PLASMIC}
-      prefetchedData={plasmicData}
-      pageRoute={pageMeta.path}
-      pageParams={pageMeta.params}
-    >
-      <PlasmicComponent component={pageMeta.displayName} />
-    </PlasmicRootProvider>
-  );
-  // Use revalidate if you want incremental static regeneration
-  return { props: { plasmicData, queryCache }, revalidate: 60 };
-}
-export const getStaticPaths: GetStaticPaths = async () => {
-  const pageModules = await PLASMIC.fetchPages();
-  return {
-    paths: pageModules.map((mod) => ({
-      params: {
-        catchall: mod.path.substring(1).split("/"),
-      },
-    })),
-    fallback: "blocking",
-  };
-}

package/cpa-out/nextjs-app-loader-ts/pages/api/hello.ts DELETED Viewed

@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-type Data = {
-  name: string;
-};
-export default function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<Data>,
-) {
-  res.status(200).json({ name: "John Doe" });
-}

package/cpa-out/nextjs-app-loader-ts/pages/plasmic-host.tsx DELETED Viewed

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { PlasmicCanvasHost } from '@plasmicapp/loader-nextjs';
-import { PLASMIC } from '@/plasmic-init';
-export default function PlasmicHost() {
-  return PLASMIC && <PlasmicCanvasHost />;
-}