feat: upgrade next recipe to v15.1

measuredco · Dec 16, 2024 · 8ef51c5 · 8ef51c5
1 parent 3b71493
commit 8ef51c5
Show file tree

Hide file tree

Showing 13 changed files with 67 additions and 50 deletions.
diff --git a/apps/demo/app/[...puckPath]/client.tsx b/apps/demo/app/[...puckPath]/client.tsx
@@ -4,13 +4,23 @@ import { Button, Puck, Render } from "@/core";
 import headingAnalyzer from "@/plugin-heading-analyzer/src/HeadingAnalyzer";
 import config from "../../config";
 import { useDemoData } from "../../lib/use-demo-data";
+import { useEffect, useState } from "react";
+import dynamic from "next/dynamic";
 
 export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
   const { data, resolvedData, key } = useDemoData({
     path,
     isEdit,
   });
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return null;
+
   if (isEdit) {
     return (
       <div>

diff --git a/apps/demo/app/[...puckPath]/page.tsx b/apps/demo/app/[...puckPath]/page.tsx
@@ -1,17 +1,13 @@
-import dynamic from "next/dynamic";
 import resolvePuckPath from "../../lib/resolve-puck-path";
 import { Metadata } from "next";
-
-const Client = dynamic(() => import("./client"), {
-  ssr: false,
-});
-
+import Client from "./client";
 export async function generateMetadata({
   params,
 }: {
-  params: { framework: string; uuid: string; puckPath: string[] };
+  params: Promise<{ framework: string; uuid: string; puckPath: string[] }>;
 }): Promise<Metadata> {
-  const { isEdit, path } = resolvePuckPath(params.puckPath);
+  const { puckPath } = await params;
+  const { isEdit, path } = resolvePuckPath(puckPath);
 
   if (isEdit) {
     return {
@@ -27,9 +23,10 @@ export async function generateMetadata({
 export default async function Page({
   params,
 }: {
-  params: { framework: string; uuid: string; puckPath: string[] };
+  params: Promise<{ framework: string; uuid: string; puckPath: string[] }>;
 }) {
-  const { isEdit, path } = resolvePuckPath(params.puckPath);
+  const { puckPath } = await params;
+  const { isEdit, path } = resolvePuckPath(puckPath);
 
   return <Client isEdit={isEdit} path={path} />;
 }
diff --git a/apps/demo/app/custom-ui/[...puckPath]/client.tsx b/apps/demo/app/custom-ui/[...puckPath]/client.tsx
@@ -355,6 +355,14 @@ export function Client({ path, isEdit }: { path: string; isEdit: boolean }) {
     },
   };
 
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return null;
+
   if (isEdit) {
     return (
       <Puck<UserConfig>

diff --git a/apps/demo/app/custom-ui/[...puckPath]/page.tsx b/apps/demo/app/custom-ui/[...puckPath]/page.tsx
@@ -1,17 +1,14 @@
-import dynamic from "next/dynamic";
 import resolvePuckPath from "../../../lib/resolve-puck-path";
 import { Metadata } from "next";
-
-const Client = dynamic(() => import("./client"), {
-  ssr: false,
-});
+import Client from "./client";
 
 export async function generateMetadata({
   params,
 }: {
-  params: { framework: string; uuid: string; puckPath: string[] };
+  params: Promise<{ framework: string; uuid: string; puckPath: string[] }>;
 }): Promise<Metadata> {
-  const { isEdit, path } = resolvePuckPath(params.puckPath);
+  const { puckPath } = await params;
+  const { isEdit, path } = resolvePuckPath(puckPath);
 
   if (isEdit) {
     return {
@@ -27,9 +24,10 @@ export async function generateMetadata({
 export default async function Page({
   params,
 }: {
-  params: { framework: string; uuid: string; puckPath: string[] };
+  params: Promise<{ framework: string; uuid: string; puckPath: string[] }>;
 }) {
-  const { isEdit, path } = resolvePuckPath(params.puckPath);
+  const { puckPath } = await params;
+  const { isEdit, path } = resolvePuckPath(puckPath);
 
   return <Client isEdit={isEdit} path={path} />;
 }
diff --git a/apps/demo/config/root.tsx b/apps/demo/config/root.tsx
@@ -11,28 +11,28 @@ function Root({ children, puck }: RootProps) {
       {children}
       <Footer>
         <Footer.List title="Section">
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
         </Footer.List>
         <Footer.List title="Section">
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
         </Footer.List>
         <Footer.List title="Section">
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
         </Footer.List>
         <Footer.List title="Section">
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
-          <Footer.Link href="">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
+          <Footer.Link href="#">Label</Footer.Link>
         </Footer.List>
       </Footer>
     </>

diff --git a/apps/demo/next-env.d.ts b/apps/demo/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "lucide-react": "^0.298.0",
-    "next": "^14.2.11",
+    "next": "^15.1.0",
     "rc-footer": "^0.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/package.json b/package.json
@@ -34,6 +34,6 @@
   ],
   "version": "0.16.2",
   "engines": {
-    "node": ">=18"
+    "node": ">=18.18"
   }
 }
diff --git a/packages/create-puck-app/templates/next/package.json.hbs b/packages/create-puck-app/templates/next/package.json.hbs
@@ -11,7 +11,7 @@
   "dependencies": {
     "@measured/puck": "{{puckVersion}}",
     "classnames": "^2.3.2",
-    "next": "^14.2.11",
+    "next": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/recipes/next/app/[...puckPath]/page.tsx b/recipes/next/app/[...puckPath]/page.tsx
@@ -16,10 +16,11 @@ import { Metadata } from "next";
 import { getPage } from "../../lib/get-page";
 
 export async function generateMetadata({
-  params: { puckPath = [] },
+  params,
 }: {
-  params: { puckPath: string[] };
+  params: Promise<{ puckPath: string[] }>;
 }): Promise<Metadata> {
+  const { puckPath = [] } = await params;
   const path = `/${puckPath.join("/")}`;
 
   return {
@@ -28,10 +29,11 @@ export async function generateMetadata({
 }
 
 export default async function Page({
-  params: { puckPath = [] },
+  params,
 }: {
-  params: { puckPath: string[] };
+  params: Promise<{ puckPath: string[] }>;
 }) {
+  const { puckPath = [] } = await params;
   const path = `/${puckPath.join("/")}`;
   const data = getPage(path);
 

diff --git a/recipes/next/app/puck/[...puckPath]/page.tsx b/recipes/next/app/puck/[...puckPath]/page.tsx
@@ -17,10 +17,11 @@ import { Metadata } from "next";
 import { getPage } from "../../../lib/get-page";
 
 export async function generateMetadata({
-  params: { puckPath = [] },
+  params,
 }: {
-  params: { puckPath: string[] };
+  params: Promise<{ puckPath: string[] }>;
 }): Promise<Metadata> {
+  const { puckPath = [] } = await params;
   const path = `/${puckPath.join("/")}`;
 
   return {
@@ -29,10 +30,11 @@ export async function generateMetadata({
 }
 
 export default async function Page({
-  params: { puckPath = [] },
+  params,
 }: {
-  params: { puckPath: string[] };
+  params: Promise<{ puckPath: string[] }>;
 }) {
+  const { puckPath = [] } = await params;
   const path = `/${puckPath.join("/")}`;
   const data = getPage(path);
 

diff --git a/recipes/next/next-env.d.ts b/recipes/next/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/recipes/next/package.json b/recipes/next/package.json
@@ -3,15 +3,15 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@measured/puck": "*",
     "classnames": "^2.3.2",
-    "next": "^14.2.11",
+    "next": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },