feat: generate static pages in next recipe

packages/create-puck-app/scripts/generate.js

@@ -26,7 +26,7 @@ const run = async () => {
     return;
   }
 
-  // Compile handlebars templates
+  // Copy recipe files
   const recipeFiles = glob.sync(`**/*`, {
     cwd: recipePath,
     nodir: true,

recipes/next/app/[...puckPath]/client.tsx

@@ -1,32 +1,9 @@
 "use client";
 
 import type { Data } from "@measured/puck";
-import { Puck, Render } from "@measured/puck";
+import { Render } from "@measured/puck";
 import config from "../../puck.config";
 
-export function Client({
-  path,
-  data,
-  isEdit,
-}: {
-  path: string;
-  data: Data;
-  isEdit: boolean;
-}) {
-  if (isEdit) {
-    return (
-      <Puck
-        config={config}
-        data={data}
-        onPublish={async (data: Data) => {
-          await fetch("/api/puck", {
-            method: "post",
-            body: JSON.stringify({ data, path }),
-          });
-        }}
-      />
-    );
-  }
-
+export function Client({ data }: { data: Data }) {
   return <Render config={config} data={data} />;
 }

recipes/next/app/[...puckPath]/page.tsx

@@ -1,49 +1,33 @@
 import { Client } from "./client";
 import { notFound } from "next/navigation";
-import resolvePuckPath from "./resolve-puck-path";
 import { Metadata } from "next";
-import { Data } from "@measured/puck";
-import fs from "fs";
-
-// Replace with call to your database
-const getPage = (path: string) => {
-  const allData: Record<string, Data> | null = fs.existsSync("database.json")
-    ? JSON.parse(fs.readFileSync("database.json", "utf-8"))
-    : null;
-
-  return allData ? allData[path] : null;
-};
+import { getPage } from "../../lib/get-page";
 
 export async function generateMetadata({
-  params,
+  params: { puckPath = [] },
 }: {
   params: { puckPath: string[] };
 }): Promise<Metadata> {
-  const { isEdit, path } = resolvePuckPath(params.puckPath);
-
-  if (isEdit) {
-    return {
-      title: "Puck: " + path,
-    };
-  }
+  const path = `/${puckPath.join("/")}`;
 
   return {
     title: getPage(path)?.root.title,
   };
 }
 
 export default async function Page({
-  params,
+  params: { puckPath = [] },
 }: {
   params: { puckPath: string[] };
 }) {
-  const { isEdit, path } = resolvePuckPath(params.puckPath);
-
+  const path = `/${puckPath.join("/")}`;
   const data = getPage(path);
 
-  if (!data && !isEdit) {
+  if (!data) {
     return notFound();
   }
 
-  return <Client isEdit={isEdit} path={path} data={data} />;
+  return <Client data={data} />;
 }
+
+export const dynamic = "force-static";

recipes/next/app/puck/[...puckPath]/client.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { Data } from "@measured/puck";
+import { Puck } from "@measured/puck";
+import config from "../../../puck.config";
+
+export function Client({ path, data }: { path: string; data: Data }) {
+  return (
+    <Puck
+      config={config}
+      data={data}
+      onPublish={async (data: Data) => {
+        await fetch("/puck/api", {
+          method: "post",
+          body: JSON.stringify({ data, path }),
+        });
+      }}
+    />
+  );
+}

recipes/next/app/puck/[...puckPath]/page.tsx

@@ -0,0 +1,26 @@
+import { Client } from "./client";
+import { Metadata } from "next";
+import { getPage } from "../../../lib/get-page";
+
+export async function generateMetadata({
+  params: { puckPath = [] },
+}: {
+  params: { puckPath: string[] };
+}): Promise<Metadata> {
+  const path = `/${puckPath.join("/")}`;
+
+  return {
+    title: "Puck: " + path,
+  };
+}
+
+export default async function Page({
+  params: { puckPath = [] },
+}: {
+  params: { puckPath: string[] };
+}) {
+  const path = `/${puckPath.join("/")}`;
+  const data = getPage(path);
+
+  return <Client path={path} data={data} />;
+}

recipes/next/app/puck/page.tsx

@@ -0,0 +1 @@
+export { default, generateMetadata } from "./[...puckPath]/page";

recipes/next/lib/get-page.ts

@@ -0,0 +1,11 @@
+import { Data } from "@measured/puck";
+import fs from "fs";
+
+// Replace with call to your database
+export const getPage = (path: string) => {
+  const allData: Record<string, Data> | null = fs.existsSync("database.json")
+    ? JSON.parse(fs.readFileSync("database.json", "utf-8"))
+    : null;
+
+  return allData ? allData[path] : null;
+};

recipes/next/middleware.ts

@@ -0,0 +1,27 @@
+import { NextResponse } from "next/server";
+
+import type { NextRequest } from "next/server";
+
+export async function middleware(req: NextRequest) {
+  const res = NextResponse.next();
+
+  if (req.method === "GET") {
+    // Rewrite routes that match "/[...puckPath]/edit" to "/puck/[...puckPath]"
+    if (req.nextUrl.pathname.endsWith("/edit")) {
+      const pathWithoutEdit = req.nextUrl.pathname.slice(
+        0,
+        req.nextUrl.pathname.length - 5
+      );
+      const pathWithEditPrefix = `/puck${pathWithoutEdit}`;
+
+      return NextResponse.rewrite(new URL(pathWithEditPrefix, req.url));
+    }
+
+    // Disable "/puck/[...puckPath]"
+    if (req.nextUrl.pathname.startsWith("/puck")) {
+      return NextResponse.redirect(new URL("/", req.url));
+    }
+  }
+
+  return res;
+}