@sanvika/ui 0.1.4 → 0.2.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@sanvika/ui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "private": false,
-  "description": "Sanvika Production — shared UI component library for 50+ projects. Pure JS, CSS Modules, props-driven.",
+  "description": "Sanvika Production — shared UI component library for 50+ projects (pure JS, CSS Modules, props-driven) + cloud-driven Navbar/Theme presets via ui.sanvikaproduction.com",
   "author": "Shyam Bharteey <shyam@sanvikaproduction.com>",
   "license": "MIT",
   "repository": {
@@ -19,49 +19,31 @@
     "classified-ads"
   ],
   "main": "./src/index.js",
+  "module": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
     "./icons": "./src/components/icons/index.js",
-    "./styles": "./src/styles/index.css"
+    "./styles": "./src/styles/index.css",
+    "./server": "./src/server/index.js"
   },
   "files": [
-    "src/components",
-    "src/context",
-    "src/styles",
-    "src/index.js",
-    "!src/**/*.stories.jsx",
-    "!src/**/*.stories.js"
+    "dist",
+    "src"
   ],
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "prepublishOnly": "echo 'Publishing @sanvika/ui...'"
-  },
-  "dependencies": {
-    "mongoose": "^9.4.1"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "core-js-pure",
-      "esbuild"
-    ]
-  },
   "devDependencies": {
-    "@storybook/nextjs": "^10.3.2",
-    "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "^9",
-    "eslint-config-next": "16.2.2",
-    "next": "16.2.2",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "storybook": "^10.3.2"
+    "@babel/core": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@rollup/plugin-babel": "^7.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "rollup": "^4.60.1",
+    "rollup-plugin-postcss": "^4.0.2"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "build:lib": "rollup -c rollup.config.js"
   }
-}
+}

package/src/components/buttons/Button.stories.jsx

@@ -0,0 +1,110 @@
+// src/components/buttons/Button.stories.jsx
+import Button from "./Button";
+
+/** @type {import('@storybook/react').Meta<typeof Button>} */
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    intent: {
+      control: "select",
+      options: ["primary", "secondary", "danger", "success"],
+    },
+    appearance: {
+      control: "select",
+      options: ["solid", "outline", "ghost"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+    disabled: { control: "boolean" },
+    fullWidth: { control: "boolean" },
+  },
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    text: "Get started",
+    intent: "primary",
+    appearance: "solid",
+    size: "md",
+  },
+};
+
+export const Secondary = {
+  args: { text: "Learn more", intent: "secondary" },
+};
+
+export const Danger = {
+  args: { text: "Delete", intent: "danger" },
+};
+
+export const Success = {
+  args: { text: "Confirm", intent: "success" },
+};
+
+export const Outline = {
+  args: { text: "Outline button", appearance: "outline" },
+};
+
+export const Ghost = {
+  args: { text: "Ghost button", appearance: "ghost" },
+};
+
+export const Small = {
+  args: { text: "Small", size: "sm" },
+};
+
+export const Large = {
+  args: { text: "Large", size: "lg" },
+};
+
+export const WithIcon = {
+  args: {
+    text: "Download",
+    icon: <span>⬇</span>,
+    intent: "primary",
+  },
+};
+
+export const WithBadge = {
+  args: {
+    text: "Notifications",
+    badge: 5,
+    intent: "secondary",
+  },
+};
+
+export const Disabled = {
+  args: { text: "Disabled", disabled: true },
+};
+
+export const AsLink = {
+  args: { text: "Visit site", href: "#", intent: "primary" },
+};
+
+export const AllIntents = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      {["primary", "secondary", "danger", "success"].map((intent) => (
+        <Button key={intent} intent={intent} text={intent} />
+      ))}
+    </div>
+  ),
+};
+
+export const AllAppearances = {
+  render: () => (
+    <div style={{ display: "flex", gap: "12px", flexWrap: "wrap" }}>
+      {["solid", "outline", "ghost"].map((appearance) => (
+        <Button key={appearance} appearance={appearance} text={appearance} />
+      ))}
+    </div>
+  ),
+};

package/src/components/buttons/FavoriteHeartButton.stories.jsx

@@ -0,0 +1,48 @@
+// src/components/buttons/FavoriteHeartButton.stories.jsx
+"use client";
+import { useState } from "react";
+import FavoriteHeartButton from "./FavoriteHeartButton";
+
+const meta = {
+  title: "Components/Buttons/FavoriteHeartButton",
+  component: FavoriteHeartButton,
+  parameters: { layout: "centered" },
+  argTypes: {
+    isFavorited: { control: "boolean" },
+    disabled: { control: "boolean" },
+    isOwner: { control: "boolean" },
+  },
+};
+
+export default meta;
+
+const FavDemo = ({ initial = false }) => {
+  const [fav, setFav] = useState(initial);
+  return (
+    <FavoriteHeartButton
+      isFavorited={fav}
+      onClick={() => setFav((v) => !v)}
+    />
+  );
+};
+
+export const NotFavorited = {
+  render: () => <FavDemo initial={false} />,
+};
+
+export const Favorited = {
+  render: () => <FavDemo initial={true} />,
+};
+
+export const Disabled = {
+  args: { isFavorited: false, disabled: true, onClick: () => {} },
+};
+
+export const HiddenForOwner = {
+  args: { isFavorited: false, isOwner: true, onClick: () => {} },
+  parameters: {
+    docs: {
+      description: { story: "Returns null when isOwner=true — nothing renders." },
+    },
+  },
+};

package/src/components/buttons/ScrollButton.stories.jsx

@@ -0,0 +1,21 @@
+// src/components/buttons/ScrollButton.stories.jsx
+import ScrollButton from "./ScrollButton";
+
+const meta = {
+  title: "Components/Buttons/ScrollButton",
+  component: ScrollButton,
+  parameters: { layout: "centered" },
+  argTypes: {
+    direction: { control: "select", options: ["up", "down"] },
+  },
+};
+
+export default meta;
+
+export const Up = {
+  args: { direction: "up", onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }) },
+};
+
+export const Down = {
+  args: { direction: "down", onClick: () => window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }) },
+};

package/src/components/buttons/ThreeDotButton.stories.jsx

@@ -0,0 +1,14 @@
+// src/components/buttons/ThreeDotButton.stories.jsx
+import ThreeDotButton from "./ThreeDotButton";
+
+const meta = {
+  title: "Components/Buttons/ThreeDotButton",
+  component: ThreeDotButton,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+
+export const Default = {
+  args: { onClick: () => alert("Menu opened"), ariaLabel: "More options" },
+};

package/src/components/common/Section.stories.jsx

@@ -0,0 +1,64 @@
+// src/components/common/Section.stories.jsx
+import Section from "./Section";
+import Button from "../buttons/Button.jsx";
+
+/** @type {import('@storybook/react').Meta<typeof Section>} */
+const meta = {
+  title: "Layout/Section",
+  component: Section,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "alternate", "card"],
+    },
+    padding: {
+      control: "select",
+      options: ["default", "tight", "flush"],
+    },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  args: {
+    title: "Section Title",
+    subtitle: "An optional subtitle providing more context about this section.",
+    children: (
+      <p style={{ textAlign: "center", color: "var(--secondary-text-color)" }}>
+        Section content goes here.
+      </p>
+    ),
+  },
+};
+
+export const Alternate = {
+  args: {
+    ...Default.args,
+    variant: "alternate",
+  },
+};
+
+export const Card = {
+  args: {
+    ...Default.args,
+    variant: "card",
+  },
+};
+
+export const WithCTA = {
+  args: {
+    title: "Ready to get started?",
+    subtitle: "Join thousands of creators building on Sanvika.",
+    children: (
+      <div style={{ display: "flex", justifyContent: "center", gap: "12px" }}>
+        <Button intent="primary">Get started</Button>
+        <Button intent="secondary" appearance="outline">
+          Learn more
+        </Button>
+      </div>
+    ),
+    variant: "alternate",
+  },
+};

package/src/components/layout/Footer.stories.jsx

@@ -0,0 +1,28 @@
+// src/components/layout/Footer.stories.jsx
+import Footer from "./Footer";
+
+const meta = {
+  title: "Layout/Footer",
+  component: Footer,
+  parameters: { layout: "fullscreen" },
+};
+
+export default meta;
+
+export const Default = {};
+
+export const CustomLinks = {
+  args: {
+    legalLinks: [
+      { href: "/about", label: "About" },
+      { href: "/privacy", label: "Privacy" },
+      { href: "/terms", label: "Terms" },
+    ],
+    trustText: "D-U-N-S® Verified · My Company",
+  },
+};
+
+export const NoSocialLinks = {
+  args: { socialLinks: [] },
+};
+

package/src/components/layout/Navbar.stories.jsx

@@ -0,0 +1,42 @@
+// src/components/layout/Navbar.stories.jsx
+import Navbar from "./Navbar";
+
+const NAV_LINKS = [
+  { href: "/", label: "Home" },
+  { href: "/about", label: "About" },
+  { href: "/listings", label: "Listings" },
+  { href: "/contact", label: "Contact" },
+];
+
+const meta = {
+  title: "Layout/Navbar",
+  component: Navbar,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    logoText: { control: "text" },
+    activePath: { control: "text" },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  args: { navLinks: NAV_LINKS, activePath: "/", logoText: "Sanvika" },
+};
+
+export const ActiveAbout = {
+  args: { navLinks: NAV_LINKS, activePath: "/about", logoText: "Sanvika" },
+};
+
+export const CustomLogo = {
+  args: { navLinks: NAV_LINKS, activePath: "/", logoText: "MyApp" },
+};
+
+export const FewLinks = {
+  args: {
+    navLinks: [{ href: "/", label: "Home" }, { href: "/contact", label: "Contact" }],
+    activePath: "/",
+    logoText: "Sanvika",
+  },
+};
+

package/src/components/modals/Modal.stories.jsx

@@ -0,0 +1,93 @@
+// src/components/modals/Modal.stories.jsx
+"use client";
+import { useState } from "react";
+import Modal from "./Modal";
+
+const meta = {
+  title: "Components/Modal",
+  component: Modal,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+
+// Interactive wrapper since Modal needs open/close state
+const ModalDemo = ({ buttonLabel = "Open Modal", children }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        onClick={() => setOpen(true)}
+        style={{
+          padding: "8px 20px",
+          background: "var(--primary-color, #0984e3)",
+          color: "#fff",
+          border: "none",
+          borderRadius: "6px",
+          cursor: "pointer",
+        }}
+      >
+        {buttonLabel}
+      </button>
+      <Modal isOpen={open} onClose={() => setOpen(false)}>
+        {children}
+        <button
+          onClick={() => setOpen(false)}
+          style={{
+            position: "absolute",
+            top: 12,
+            right: 12,
+            background: "transparent",
+            border: "none",
+            fontSize: 20,
+            cursor: "pointer",
+            color: "var(--secondary-text-color)",
+          }}
+          aria-label="Close modal"
+        >
+          ✖
+        </button>
+      </Modal>
+    </>
+  );
+};
+
+export const Default = {
+  render: () => (
+    <ModalDemo buttonLabel="Open Modal">
+      <h2 style={{ margin: "0 0 12px", color: "var(--heading-color)" }}>Modal Title</h2>
+      <p style={{ color: "var(--text-color)" }}>
+        This is modal content. Click the ✖ button or press ESC to close. Clicking outside also closes.
+      </p>
+    </ModalDemo>
+  ),
+};
+
+export const WithForm = {
+  render: () => (
+    <ModalDemo buttonLabel="Open Form Modal">
+      <h2 style={{ margin: "0 0 16px", color: "var(--heading-color)" }}>Confirm Action</h2>
+      <p style={{ marginBottom: 20, color: "var(--secondary-text-color)" }}>
+        Are you sure you want to delete this item?
+      </p>
+      <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+        <button
+          style={{ padding: "8px 16px", background: "var(--secondary-color)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          Cancel
+        </button>
+        <button
+          style={{ padding: "8px 16px", background: "var(--error-color, #dc3545)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          Delete
+        </button>
+      </div>
+      <button
+        style={{ position: "absolute", top: 12, right: 12, background: "transparent", border: "none", fontSize: 20, cursor: "pointer", color: "var(--secondary-text-color)" }}
+        aria-label="Close"
+      >
+        ✖
+      </button>
+    </ModalDemo>
+  ),
+};

package/src/components/progressBar/ProgressBar.stories.jsx

@@ -0,0 +1,67 @@
+// src/components/progressBar/ProgressBar.stories.jsx
+"use client";
+import { useState } from "react";
+import ProgressBar from "./ProgressBar";
+
+const meta = {
+  title: "Components/ProgressBar",
+  component: ProgressBar,
+  parameters: { layout: "padded" },
+  argTypes: {
+    progress: { control: { type: "range", min: 0, max: 100, step: 1 } },
+    height: { control: { type: "range", min: 2, max: 24, step: 1 } },
+    animate: { control: "boolean" },
+    showLabel: { control: "boolean" },
+    labelPosition: { control: "select", options: ["top", "bottom"] },
+  },
+};
+
+export default meta;
+
+export const Default = {
+  args: { progress: 60, height: 6, animate: true },
+};
+
+export const WithLabel = {
+  args: { progress: 75, height: 8, showLabel: true, labelPosition: "top" },
+};
+
+export const Thick = {
+  args: { progress: 45, height: 16, showLabel: true },
+};
+
+export const Complete = {
+  args: { progress: 100, height: 6, showLabel: true },
+};
+
+export const NoAnimation = {
+  args: { progress: 50, animate: false, height: 6 },
+};
+
+// Interactive story with increment button
+const ProgressBarInteractive = () => {
+  const [val, setVal] = useState(0);
+  return (
+    <div style={{ width: 360, display: "flex", flexDirection: "column", gap: 16 }}>
+      <ProgressBar progress={val} height={8} showLabel animate />
+      <div style={{ display: "flex", gap: 8 }}>
+        <button
+          onClick={() => setVal((v) => Math.min(100, v + 10))}
+          style={{ padding: "6px 16px", background: "var(--primary-color, #007bff)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          +10
+        </button>
+        <button
+          onClick={() => setVal(0)}
+          style={{ padding: "6px 16px", background: "var(--secondary-color, #6c757d)", color: "#fff", border: "none", borderRadius: 6, cursor: "pointer" }}
+        >
+          Reset
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export const Interactive = {
+  render: () => <ProgressBarInteractive />,
+};

package/src/index.js

@@ -28,3 +28,6 @@ export * from "./components/icons/index.js";
 
 // ─── Theme Context ────────────────────────────────────────────────────────────
 export { ThemeProvider, useTheme } from "./context/ThemeContext.jsx";
+
+// ─── Page Layout ─────────────────────────────────────────────────────────────
+export { default as Layout } from "./layouts/Layout.jsx";

package/src/layouts/Layout.jsx

@@ -0,0 +1,24 @@
+// src/layouts/Layout.jsx
+import Navbar from "../components/layout/Navbar";
+import Footer from "../components/layout/Footer";
+import styles from "../styles/components/layouts/Layout.module.css";
+
+/**
+ * Root page layout — wraps every page with Navbar + Footer.
+ * The navbar is fixed; content area has a top margin to compensate.
+ */
+const Layout = ({ children }) => {
+  return (
+    <div className={styles.wrapper}>
+      <Navbar />
+      <div className={styles.content}>
+        <main className={styles.main}>{children}</main>
+      </div>
+      <div className={styles.footerWrapper}>
+        <Footer />
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

package/src/server/index.js

@@ -0,0 +1,159 @@
+// @sanvika/ui/server v0.2.0
+// HTTP client for ui.sanvikaproduction.com — cloud-driven Navbar configs and Theme presets.
+// Env vars: UI_URL, UI_CLIENT_SECRET (or pass via constructor).
+
+const DEFAULT_TIMEOUT_MS = 8000;
+
+function _readEnv(key) {
+  try {
+    return (typeof process !== "undefined" && process.env?.[key]) || null;
+  } catch {
+    return null;
+  }
+}
+
+export class SanvikaUI {
+  #url;
+  #secret;
+
+  constructor({ url, secret } = {}) {
+    const finalUrl = url || _readEnv("UI_URL");
+    const finalSecret = secret || _readEnv("UI_CLIENT_SECRET");
+    if (!finalUrl || !finalSecret) {
+      throw new Error("@sanvika/ui/server: UI_URL and UI_CLIENT_SECRET are required");
+    }
+    this.#url = finalUrl.replace(/\/$/, "");
+    this.#secret = finalSecret;
+  }
+
+  get baseUrl() {
+    return this.#url;
+  }
+
+  async #request(path, { method = "POST", body, query } = {}) {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), DEFAULT_TIMEOUT_MS);
+
+    const qs = query ? "?" + new URLSearchParams(query).toString() : "";
+    const init = {
+      method,
+      headers: { "x-client-secret": this.#secret },
+      signal: controller.signal,
+    };
+    if (body !== undefined) {
+      init.headers["Content-Type"] = "application/json";
+      init.body = JSON.stringify(body);
+    }
+
+    try {
+      const res = await fetch(`${this.#url}${path}${qs}`, init);
+      const json = await res.json().catch(() => ({}));
+      if (!res.ok || !json.success) {
+        return { success: false, status: res.status, error: json?.error || `HTTP_${res.status}` };
+      }
+      return { success: true, ...json };
+    } catch (err) {
+      return { success: false, error: err.name === "AbortError" ? "TIMEOUT" : err.message };
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+
+  /** Fetch latest published navbar config (default name = "default"). */
+  async getNavbarConfig({ name = "default", version } = {}) {
+    const query = {};
+    if (version !== undefined) query.version = String(version);
+    return this.#request(`/api/v1/navbar/${encodeURIComponent(name)}`, {
+      method: "GET",
+      query: Object.keys(query).length ? query : undefined,
+    });
+  }
+
+  /** Save (creates new version) a navbar config. */
+  async saveNavbarConfig({ name = "default", items, cta, logoUrl, activeThemePreset, status = "published" } = {}) {
+    if (!Array.isArray(items)) throw new Error("saveNavbarConfig: items[] is required");
+    return this.#request("/api/v1/navbar", {
+      body: { name, items, cta, logoUrl, activeThemePreset, status },
+    });
+  }
+
+  /** List latest navbar configs across names. */
+  async listNavbarConfigs() {
+    return this.#request("/api/v1/navbar", { method: "GET" });
+  }
+
+  /** Soft-delete all versions of a navbar config name. */
+  async deleteNavbarConfig(name) {
+    if (!name) throw new Error("deleteNavbarConfig: name is required");
+    return this.#request(`/api/v1/navbar/${encodeURIComponent(name)}`, { method: "DELETE" });
+  }
+
+  /** Fetch a single theme preset by name. */
+  async getThemePreset({ name } = {}) {
+    if (!name) throw new Error("getThemePreset: name is required");
+    return this.#request(`/api/v1/theme/${encodeURIComponent(name)}`, { method: "GET" });
+  }
+
+  /** Upsert a theme preset by name. */
+  async saveThemePreset({ name, mode = "light", palette = {}, fontFamily, radius, extras, status = "published" } = {}) {
+    if (!name) throw new Error("saveThemePreset: name is required");
+    return this.#request("/api/v1/theme", {
+      body: { name, mode, palette, fontFamily, radius, extras, status },
+    });
+  }
+
+  /** List theme presets. */
+  async listThemePresets() {
+    return this.#request("/api/v1/theme", { method: "GET" });
+  }
+
+  /** Soft-delete a theme preset. */
+  async deleteThemePreset(name) {
+    if (!name) throw new Error("deleteThemePreset: name is required");
+    return this.#request(`/api/v1/theme/${encodeURIComponent(name)}`, { method: "DELETE" });
+  }
+}
+
+export function createUiClient(opts = {}) {
+  return new SanvikaUI(opts);
+}
+
+let _instance = null;
+function _getInstance() {
+  if (!_instance) _instance = new SanvikaUI();
+  return _instance;
+}
+
+export async function getNavbarConfig(opts = {}) {
+  return _getInstance().getNavbarConfig(opts);
+}
+
+export async function saveNavbarConfig(input) {
+  return _getInstance().saveNavbarConfig(input);
+}
+
+export async function listNavbarConfigs() {
+  return _getInstance().listNavbarConfigs();
+}
+
+export async function deleteNavbarConfig(name) {
+  return _getInstance().deleteNavbarConfig(name);
+}
+
+export async function getThemePreset(opts) {
+  return _getInstance().getThemePreset(opts);
+}
+
+export async function saveThemePreset(input) {
+  return _getInstance().saveThemePreset(input);
+}
+
+export async function listThemePresets() {
+  return _getInstance().listThemePresets();
+}
+
+export async function deleteThemePreset(name) {
+  return _getInstance().deleteThemePreset(name);
+}
+
+export default createUiClient;

package/README.md

@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.