initial commit

.env

@@ -0,0 +1,2 @@
+# https://www.builder.io/c/docs/using-your-api-key
+NEXT_PUBLIC_BUILDER_API_KEY=7048f6fbf6304deda7ff0a605fab8516

next.config.mjs

@@ -1,4 +1,6 @@
+import BuilderDevTools from "@builder.io/dev-tools/next";
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = BuilderDevTools()({});
 
 export default nextConfig;

package.json

@@ -9,19 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@builder.io/dev-tools": "^0.2.22",
+    "@builder.io/react": "^3.2.5",
+    "@builder.io/sdk": "^2.2.2",
+    "next": "14.1.1",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.1.1"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.1"
+    "typescript": "^5"
   }
 }

src/app/[...page]/page.tsx

@@ -0,0 +1,33 @@
+import { builder } from "@builder.io/sdk";
+import { RenderBuilderContent } from "../../components/builder";
+
+// Builder Public API Key set in .env file
+builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
+
+interface PageProps {
+  params: {
+    page: string[];
+  };
+}
+
+export default async function Page(props: PageProps) {
+  const builderModelName = "page";
+
+  const content = await builder
+    // Get the page content from Builder with the specified options
+    .get(builderModelName, {
+      userAttributes: {
+        // Use the page path specified in the URL to fetch the content
+        urlPath: "/" + (props?.params?.page?.join("/") || ""),
+      },
+    })
+    // Convert the result to a promise
+    .toPromise();
+
+  return (
+    <>
+      {/* Render the Builder page */}
+      <RenderBuilderContent content={content} model={builderModelName} />
+    </>
+  );
+}

src/builder-registry.ts

@@ -0,0 +1,15 @@
+"use client";
+import { builder, Builder } from "@builder.io/react";
+import Counter from "./components/Counter/Counter";
+
+builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
+
+Builder.registerComponent(Counter, {
+  name: "Counter",
+  inputs: [
+    {
+      name: "initialCount",
+      type: "number",
+    },
+  ],
+});

src/components/Counter/Counter.tsx

@@ -0,0 +1,33 @@
+"use client";
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+interface CounterProps {
+  initialCount?: number;
+}
+
+function Counter({ initialCount = 99 }: CounterProps) {
+  const [count, setCount] = useState(initialCount);
+
+  const increment = () => {
+    setCount((prevCount) => prevCount + 1);
+  };
+
+  const decrement = () => {
+    setCount((prevCount) => prevCount - 1);
+  };
+
+  return (
+    <div className={styles.counter}>
+      <button className={styles.btn} onClick={decrement}>
+        -
+      </button>
+      <span className={styles.count}>{count}</span>
+      <button className={styles.btn} onClick={increment}>
+        +
+      </button>
+    </div>
+  );
+}
+
+export default Counter;

src/components/Counter/styles.module.css

@@ -0,0 +1,28 @@
+.counter {
+  margin: 32px auto;
+  display: flex;
+  width: 100%;
+  max-width: 190px;
+}
+
+.btn {
+  width: 42px;
+  font-size: 32px;
+  font-weight: bold;
+  background-color: #1c6bd1;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.btn:hover {
+  opacity: 0.8;
+}
+
+.count {
+  flex: 1;
+  font-size: 42px;
+  text-align: center;
+}

src/components/builder.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { ComponentProps } from "react";
+import { BuilderComponent, useIsPreviewing } from "@builder.io/react";
+import { BuilderContent, builder } from "@builder.io/sdk";
+import DefaultErrorPage from "next/error";
+import "../builder-registry";
+
+type BuilderPageProps = ComponentProps<typeof BuilderComponent>;
+
+// Builder Public API Key set in .env file
+builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
+
+export function RenderBuilderContent({ content, model }: BuilderPageProps) {
+  // Call the useIsPreviewing hook to determine if
+  // the page is being previewed in Builder
+  const isPreviewing = useIsPreviewing();
+  // If "content" has a value or the page is being previewed in Builder,
+  // render the BuilderComponent with the specified content and model props.
+  if (content || isPreviewing) {
+    return <BuilderComponent content={content} model={model} />;
+  }
+  // If the "content" is falsy and the page is
+  // not being previewed in Builder, render the
+  // DefaultErrorPage with a 404.
+  return <DefaultErrorPage statusCode={404} />;
+}