@thinhnguyencth1204/nextcli 0.6.1 → 0.8.0

package/templates/next-base/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/next-base/next.config.ts

@@ -1,5 +1,4 @@
 import type { NextConfig } from "next";
-import createNextIntlPlugin from "next-intl/plugin";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -12,6 +11,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-const withNextIntl = createNextIntlPlugin("./src/i18n/request.ts");
-
-export default withNextIntl(nextConfig);
+export default nextConfig;

package/templates/next-base/nextcli.json

@@ -1,8 +1,8 @@
 {
   "cli": "__NEXTCLI_VERSION__",
   "defaultLocale": "vi",
-  "locales": ["vi"],
-  "namespaces": ["common", "auth", "example"],
+  "locales": [],
+  "namespaces": [],
   "modules": [],
-  "features": ["example"]
+  "features": []
 }

package/templates/next-base/package.json

@@ -7,15 +7,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint .",
-    "postinstall": "prisma generate",
-    "db:generate": "prisma generate",
-    "db:migrate": "prisma migrate dev",
-    "db:studio": "prisma studio"
+    "lint": "eslint ."
   },
   "dependencies": {
-    "@prisma/client": "^7.8.0",
-    "@prisma/adapter-pg": "^7.8.0",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -27,25 +21,18 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@supabase/supabase-js": "^2.44.2",
-    "@tanstack/react-form": "^1.0.3",
-    "@tanstack/react-query": "^5.56.2",
-    "@tanstack/react-query-devtools": "^5.56.2",
-    "@tanstack/react-table": "^8.20.5",
-    "@dnd-kit/core": "^6.3.1",
-    "axios": "^1.7.7",
-    "better-auth": "^1.6.11",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "date-fns": "^3.6.0",
+    "@lexical/history": "^0.45.0",
+    "@lexical/react": "^0.45.0",
+    "@lexical/rich-text": "^0.45.0",
+    "@lexical/utils": "^0.45.0",
+    "lexical": "^0.45.0",
     "lucide-react": "^0.525.0",
     "next": "^16.1.6",
-    "next-intl": "^4.13.0",
     "next-themes": "^0.4.6",
-    "nuqs": "^2.8.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "pg": "^8.16.3",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.3",
     "tw-animate-css": "^1.3.0",
@@ -53,13 +40,11 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
-    "dotenv": "^17.4.2",
     "@types/node": "^22.7.4",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "eslint": "^9.11.1",
     "eslint-config-next": "^16.1.6",
-    "prisma": "^7.8.0",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.6.2"
   }

package/templates/next-base/src/app/blog-demo/page.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { BlogRichTextDemo } from "@/components/rich-text/examples/blog-rich-text-demo";
+
+export const dynamic = "force-dynamic";
+
+export default function BlogDemoPage() {
+  return <BlogRichTextDemo />;
+}

package/templates/next-base/src/app/globals.css

@@ -109,3 +109,60 @@
     @apply bg-background text-foreground antialiased;
   }
 }
+
+/* Lexical rich text */
+.lexical-content-editable {
+  position: relative;
+}
+
+.lexical-paragraph {
+  @apply mb-2;
+}
+
+.lexical-text-bold {
+  @apply font-bold;
+}
+
+.lexical-text-italic {
+  @apply italic;
+}
+
+.lexical-text-underline {
+  @apply underline;
+}
+
+.lexical-text-strikethrough {
+  @apply line-through;
+}
+
+.lexical-text-underline-strikethrough {
+  @apply underline line-through;
+}
+
+.lexical-text-code {
+  @apply bg-muted rounded px-1 font-mono text-[0.9em];
+}
+
+.lexical-heading-h1 {
+  @apply mb-3 text-3xl font-bold;
+}
+
+.lexical-heading-h2 {
+  @apply mb-2 text-2xl font-semibold;
+}
+
+.lexical-heading-h3 {
+  @apply mb-2 text-xl font-semibold;
+}
+
+.lexical-quote {
+  @apply border-muted-foreground mb-2 border-l-4 pl-4 italic;
+}
+
+.lexical-image-element {
+  @apply my-2 block;
+}
+
+.lexical-renderer .lexical-content-editable {
+  min-height: auto;
+}

package/templates/next-base/src/app/layout.tsx

@@ -1,10 +1,7 @@
 import type { Metadata } from "next";
 import { Be_Vietnam_Pro } from "next/font/google";
-import { getLocale, getMessages } from "next-intl/server";
-import { NextIntlClientProvider } from "next-intl";
 import { Toaster } from "sonner";
 import type { ReactNode } from "react";
-import { QueryProvider } from "@/components/providers/query-provider";
 import { ThemeProvider } from "@/components/providers/theme-provider";
 import { branding } from "@/config/branding";
 import "@/app/globals.css";
@@ -19,23 +16,18 @@ export const metadata: Metadata = {
   description: branding.description,
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: Readonly<{
   children: ReactNode;
 }>) {
-  const locale = await getLocale();
-  const messages = await getMessages();
-
   return (
-    <html lang={locale} suppressHydrationWarning>
+    <html lang="vi" suppressHydrationWarning>
       <body className={beVietnamPro.className}>
-        <NextIntlClientProvider locale={locale} messages={messages}>
-          <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
-            <QueryProvider>{children}</QueryProvider>
-            <Toaster richColors position="top-right" />
-          </ThemeProvider>
-        </NextIntlClientProvider>
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+          {children}
+          <Toaster richColors position="top-right" />
+        </ThemeProvider>
       </body>
     </html>
   );

package/templates/next-base/src/app/page.tsx

@@ -1,5 +1,28 @@
-import { redirect } from "next/navigation";
+import Link from "next/link";
+import { branding } from "@/config/branding";
+import { Button } from "@/components/ui/button";
 
 export default function HomePage() {
-  redirect("/dashboard");
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center gap-6 p-8 text-center">
+      <h1 className="text-3xl font-semibold tracking-tight">
+        {branding.projectName}
+      </h1>
+      <p className="text-muted-foreground max-w-md text-sm">
+        {branding.description}
+      </p>
+      <p className="text-muted-foreground max-w-lg text-sm">
+        This project was scaffolded with NexTCLI. Add optional modules with{" "}
+        <code className="bg-muted rounded px-1.5 py-0.5 text-xs">
+          nextcli add module
+        </code>{" "}
+        to enable database, auth, dashboard, and more.
+      </p>
+      <Button asChild variant="outline">
+        <Link href="https://github.com/thinhnguyencth1204/NexTCLI">
+          NexTCLI docs
+        </Link>
+      </Button>
+    </main>
+  );
 }

package/templates/next-base/src/components/rich-text/adapters/textarea-field.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/utils/cn";
+import type { TextareaEditorContent } from "../types";
+
+export type TextareaFieldAdapterProps = {
+  value: TextareaEditorContent | null;
+  onChange: (value: TextareaEditorContent) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  readOnly?: boolean;
+  error?: string;
+  className?: string;
+  id?: string;
+  name?: string;
+};
+
+export function TextareaFieldAdapter({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  readOnly,
+  error,
+  className,
+  id,
+  name,
+}: TextareaFieldAdapterProps) {
+  return (
+    <div className={cn("space-y-1", className)}>
+      <Textarea
+        id={id}
+        name={name}
+        value={value ?? ""}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        aria-invalid={Boolean(error)}
+        className={cn(error && "border-destructive")}
+      />
+      {error ? (
+        <p className="text-destructive text-xs" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/templates/next-base/src/components/rich-text/client-only.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+
+type ClientOnlyProps = {
+  children: ReactNode;
+  fallback?: ReactNode;
+};
+
+/** Renders children only after mount — required for Lexical (no SSR). */
+export function ClientOnly({ children, fallback = null }: ClientOnlyProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return fallback;
+  }
+
+  return children;
+}

package/templates/next-base/src/components/rich-text/editor-field.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { cn } from "@/utils/cn";
+import type { EditorFieldProps, LexicalEditorContent } from "./types";
+import { isLexicalContent } from "./types";
+import { TextareaFieldAdapter } from "./adapters/textarea-field";
+import { LexicalRichTextEditor } from "./lexical/rich-text-editor";
+
+export function EditorField({
+  variant = "lexical",
+  value,
+  onChange,
+  onImagesRemoved,
+  placeholder,
+  disabled,
+  readOnly,
+  error,
+  className,
+  id,
+  name,
+}: EditorFieldProps) {
+  if (variant === "textarea") {
+    const stringValue = isLexicalContent(value) ? "" : (value ?? "");
+
+    return (
+      <TextareaFieldAdapter
+        id={id}
+        name={name}
+        value={stringValue}
+        onChange={onChange}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        error={error}
+        className={className}
+      />
+    );
+  }
+
+  const lexicalValue: LexicalEditorContent | null = isLexicalContent(value)
+    ? value
+    : null;
+
+  return (
+    <div className={cn("space-y-1", className)}>
+      <LexicalRichTextEditor
+        id={id}
+        value={lexicalValue}
+        onChange={onChange}
+        onImagesRemoved={onImagesRemoved}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+      />
+      {error ? (
+        <p className="text-destructive text-xs" role="alert">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/templates/next-base/src/components/rich-text/examples/blog-rich-text-demo.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  EditorField,
+  RichTextRenderer,
+  createEmptyLexicalContent,
+  isLexicalContent,
+  type EditorContent,
+  type EditorVariant,
+  type LexicalEditorContent,
+} from "@/components/rich-text";
+import {
+  syncRemovedRichTextImages,
+  defaultRemoveManagedImage,
+  isSupabaseManagedImageUrl,
+  parseSupabaseStorageUrl,
+  type RemoveManagedImageFn,
+} from "@/lib/rich-text";
+
+type BlogPost = {
+  id: string;
+  title: string;
+  content: LexicalEditorContent;
+};
+
+/** Swap with `removeSupabaseManagedImage` when the supabase module is installed. */
+const removeManagedImage: RemoveManagedImageFn = defaultRemoveManagedImage;
+
+export function BlogRichTextDemo() {
+  const [variant, setVariant] = useState<EditorVariant>("lexical");
+  const [title, setTitle] = useState("");
+  const [draft, setDraft] = useState<EditorContent | null>(
+    createEmptyLexicalContent(),
+  );
+  const [posts, setPosts] = useState<BlogPost[]>([]);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [previousContent, setPreviousContent] =
+    useState<LexicalEditorContent | null>(null);
+  const [editorKey, setEditorKey] = useState("new");
+
+  const handleImagesRemoved = useCallback((removedUrls: string[]) => {
+    void Promise.all(
+      removedUrls.map(async (url) => {
+        if (!isSupabaseManagedImageUrl(url)) {
+          return;
+        }
+
+        const ref = parseSupabaseStorageUrl(url);
+        if (!ref) {
+          return;
+        }
+
+        await removeManagedImage(url, ref);
+      }),
+    );
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!title.trim() || !isLexicalContent(draft)) {
+      return;
+    }
+
+    if (editingId && previousContent) {
+      await syncRemovedRichTextImages(previousContent, draft, {
+        removeManagedImage,
+      });
+    }
+
+    if (editingId) {
+      setPosts((current) =>
+        current.map((post) =>
+          post.id === editingId
+            ? { ...post, title: title.trim(), content: draft }
+            : post,
+        ),
+      );
+    } else {
+      setPosts((current) => [
+        {
+          id: crypto.randomUUID(),
+          title: title.trim(),
+          content: draft,
+        },
+        ...current,
+      ]);
+    }
+
+    setTitle("");
+    setDraft(createEmptyLexicalContent());
+    setPreviousContent(null);
+    setEditingId(null);
+    setEditorKey(`new-${Date.now()}`);
+  }, [draft, editingId, previousContent, title]);
+
+  const startEdit = useCallback((post: BlogPost) => {
+    setEditingId(post.id);
+    setTitle(post.title);
+    setDraft(post.content);
+    setPreviousContent(post.content);
+    setEditorKey(post.id);
+  }, []);
+
+  const resetForm = useCallback(() => {
+    setEditingId(null);
+    setTitle("");
+    setDraft(createEmptyLexicalContent());
+    setPreviousContent(null);
+    setEditorKey(`new-${Date.now()}`);
+  }, []);
+
+  return (
+    <div className="mx-auto flex w-full max-w-3xl flex-col gap-6 p-6">
+      <div>
+        <h1 className="text-2xl font-semibold tracking-tight">
+          Blog rich text demo
+        </h1>
+        <p className="text-muted-foreground mt-1 text-sm">
+          Toggle between native textarea and Lexical. Lexical content is stored
+          as JSON for API persistence. When the Supabase module is installed,
+          removed Supabase image URLs are deleted from storage.
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{editingId ? "Edit post" : "Create post"}</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="editor-variant">Editor type</Label>
+            <Select
+              value={variant}
+              onValueChange={(value) => setVariant(value as EditorVariant)}
+            >
+              <SelectTrigger id="editor-variant" className="w-48">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="lexical">Lexical (rich text)</SelectItem>
+                <SelectItem value="textarea">Textarea (plain)</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="post-title">Title</Label>
+            <Input
+              id="post-title"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              placeholder="Post title"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>Content</Label>
+            <EditorField
+              key={editorKey}
+              variant={variant}
+              value={draft}
+              onChange={setDraft}
+              onImagesRemoved={handleImagesRemoved}
+              placeholder="Write your post..."
+            />
+          </div>
+
+          <div className="flex gap-2">
+            <Button type="button" onClick={() => void handleSave()}>
+              {editingId ? "Update post" : "Save post"}
+            </Button>
+            {editingId ? (
+              <Button type="button" variant="outline" onClick={resetForm}>
+                Cancel
+              </Button>
+            ) : null}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-4">
+        {posts.length === 0 ? (
+          <p className="text-muted-foreground text-sm">No posts yet.</p>
+        ) : (
+          posts.map((post) => (
+            <Card key={post.id}>
+              <CardHeader className="flex flex-row items-center justify-between gap-4">
+                <CardTitle className="text-lg">{post.title}</CardTitle>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => startEdit(post)}
+                >
+                  Edit
+                </Button>
+              </CardHeader>
+              <CardContent>
+                <RichTextRenderer content={post.content} />
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/templates/next-base/src/components/rich-text/index.ts

@@ -0,0 +1,11 @@
+export type { EditorFieldProps, EditorVariant, EditorContent } from "./types";
+export {
+  createEmptyLexicalContent,
+  isLexicalContent,
+  type LexicalEditorContent,
+  type TextareaEditorContent,
+} from "./types";
+export { EditorField } from "./editor-field";
+export { RichTextRenderer } from "./rich-text-renderer";
+export { LexicalRichTextEditor } from "./lexical/rich-text-editor";
+export { TextareaFieldAdapter } from "./adapters/textarea-field";

package/templates/next-base/src/components/rich-text/lexical/extension.ts

@@ -0,0 +1,37 @@
+import { defineExtension, configExtension } from "lexical";
+import { HistoryExtension } from "@lexical/history";
+import { RichTextExtension } from "@lexical/rich-text";
+import { ReactExtension } from "@lexical/react/ReactExtension";
+import { ImageNode } from "./nodes/image-node";
+import { richTextTheme } from "./theme";
+
+/** Stable module-scoped extension graph (Lexical migration best practice). */
+export const richTextEditorExtension = defineExtension({
+  name: "@nextcli/rich-text-editor",
+  namespace: "NextCLIRichText",
+  dependencies: [
+    RichTextExtension,
+    HistoryExtension,
+    configExtension(ReactExtension, { contentEditable: null }),
+  ],
+  nodes: [ImageNode],
+  theme: richTextTheme,
+});
+
+/** Read-only extension shares nodes/theme with the editor for identical rendering. */
+export const richTextReadOnlyExtension = defineExtension({
+  name: "@nextcli/rich-text-readonly",
+  namespace: "NextCLIRichTextReadOnly",
+  dependencies: [
+    RichTextExtension,
+    configExtension(ReactExtension, { contentEditable: null }),
+  ],
+  nodes: [ImageNode],
+  theme: richTextTheme,
+  register(editor) {
+    editor.setEditable(false);
+    return () => {
+      editor.setEditable(true);
+    };
+  },
+});