@thinhnguyencth1204/nextcli 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thinhnguyencth1204/nextcli",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CLI scaffolder for outsourced Next.js projects",
   "type": "module",
   "bin": {

package/templates/next-base/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utils/cn",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/templates/next-base/messages/vi/auth.json

@@ -0,0 +1,28 @@
+{
+  "signInPage": {
+    "title": "Đăng nhập",
+    "description": "Dùng email và mật khẩu để truy cập hệ thống."
+  },
+  "signInForm": {
+    "email": "Email",
+    "password": "Mật khẩu",
+    "emailPlaceholder": "ban@example.com",
+    "passwordPlaceholder": "********",
+    "submit": "Đăng nhập",
+    "submitting": "Đang đăng nhập...",
+    "invalidInput": "Vui lòng nhập email và mật khẩu hợp lệ.",
+    "missingAccessToken": "Không tìm thấy access token.",
+    "success": "Đăng nhập thành công.",
+    "failed": "Đăng nhập thất bại."
+  },
+  "account": {
+    "title": "Tài khoản",
+    "loading": "Đang tải thông tin tài khoản...",
+    "noSession": "Chưa có phiên đăng nhập hoạt động.",
+    "userId": "Mã người dùng",
+    "email": "Email",
+    "name": "Tên",
+    "na": "N/A",
+    "goToSignIn": "Đi tới trang đăng nhập"
+  }
+}

package/templates/next-base/messages/vi/common.json

@@ -0,0 +1,34 @@
+{
+  "appName": "__PROJECT_NAME__",
+  "sidebar": {
+    "groupGeneral": "Tổng quan",
+    "dashboard": "Bảng điều khiển",
+    "example": "Ví dụ",
+    "account": "Tài khoản"
+  },
+  "header": {
+    "themeLight": "Sáng",
+    "themeDark": "Tối",
+    "themeSystem": "Theo hệ thống",
+    "toggleTheme": "Chuyển giao diện"
+  },
+  "userMenu": {
+    "title": "Tài khoản",
+    "anonymousName": "Người dùng",
+    "anonymousEmail": "user@example.com",
+    "appearance": "Giao diện",
+    "logout": "Đăng xuất"
+  },
+  "locale": {
+    "label": "Ngôn ngữ",
+    "vi": "Tiếng Việt",
+    "en": "English",
+    "ja": "日本語",
+    "ko": "한국어"
+  },
+  "table": {
+    "noResults": "Không có dữ liệu.",
+    "previous": "Trước",
+    "next": "Sau"
+  }
+}

package/templates/next-base/messages/vi/example.json

@@ -0,0 +1,10 @@
+{
+  "page": {
+    "title": "Ví dụ"
+  },
+  "table": {
+    "name": "Tên",
+    "description": "Mô tả",
+    "loading": "Đang tải dữ liệu ví dụ..."
+  }
+}

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

@@ -1,7 +1,17 @@
 import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const rootDir = path.dirname(fileURLToPath(import.meta.url));
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
+  turbopack: {
+    root: rootDir,
+  },
 };
 
-export default nextConfig;
+const withNextIntl = createNextIntlPlugin("./src/i18n/request.ts");
+
+export default withNextIntl(nextConfig);

package/templates/next-base/nextcli.json

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

package/templates/next-base/package.json

@@ -8,30 +8,50 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint .",
+    "postinstall": "prisma generate",
     "db:generate": "prisma generate",
     "db:migrate": "prisma migrate dev",
     "db:studio": "prisma studio"
   },
   "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",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@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",
+    "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",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.11",
     "dotenv": "^17.4.2",
     "@types/node": "^22.7.4",
     "@types/react": "^19.0.0",
@@ -39,7 +59,7 @@
     "eslint": "^9.11.1",
     "eslint-config-next": "^16.1.6",
     "prisma": "^7.8.0",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.6.2"
   }
 }

package/templates/next-base/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/next-base/src/app/(auth)/layout.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export default function AuthLayout({ children }: { children: ReactNode }) {
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-muted px-4 py-8">
+      <div className="w-full max-w-md">{children}</div>
+    </main>
+  );
+}

package/templates/next-base/src/app/(auth)/sign-in/page.tsx

@@ -1,10 +1,13 @@
+import { useTranslations } from "next-intl";
 import { SignInForm } from "@/features/auth/components/sign-in-form";
 
 export default function SignInPage() {
+  const t = useTranslations("auth.signInPage");
+
   return (
-    <main style={{ padding: 24 }}>
-      <h1>Sign in</h1>
-      <p>Use your email and password to get access.</p>
+    <main className="space-y-3">
+      <h1 className="text-2xl font-semibold">{t("title")}</h1>
+      <p className="text-sm text-muted-foreground">{t("description")}</p>
       <SignInForm />
     </main>
   );

package/templates/next-base/src/app/(dashboard)/account/page.tsx

@@ -1,14 +1,18 @@
 import Link from "next/link";
+import { useTranslations } from "next-intl";
 import { AccountPanel } from "@/features/auth/components/account-panel";
+import { Button } from "@/components/ui/button";
 
 export default function AccountPage() {
+  const t = useTranslations("auth.account");
+
   return (
-    <main style={{ padding: 24 }}>
-      <h1>Account</h1>
+    <main className="space-y-4">
+      <h1 className="text-2xl font-semibold">{t("title")}</h1>
       <AccountPanel />
-      <p style={{ marginTop: 16 }}>
-        <Link href="/sign-in">Go to sign in</Link>
-      </p>
+      <Button asChild variant="outline">
+        <Link href="/sign-in">{t("goToSignIn")}</Link>
+      </Button>
     </main>
   );
 }

package/templates/next-base/src/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,17 @@
+import { useTranslations } from "next-intl";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function DashboardPage() {
+  const t = useTranslations("common.sidebar");
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t("dashboard")}</CardTitle>
+      </CardHeader>
+      <CardContent className="text-sm text-muted-foreground">
+        Starter dashboard page. Add your own widgets and metrics here.
+      </CardContent>
+    </Card>
+  );
+}

package/templates/next-base/src/app/(dashboard)/example/page.tsx

@@ -1,9 +1,12 @@
+import { useTranslations } from "next-intl";
 import { ExampleTable } from "@/example/components/example-table";
 
 export default function ExamplePage() {
+  const t = useTranslations("example.page");
+
   return (
-    <main style={{ padding: 24 }}>
-      <h1>Example</h1>
+    <main className="space-y-4">
+      <h1 className="text-2xl font-semibold">{t("title")}</h1>
       <ExampleTable />
     </main>
   );

package/templates/next-base/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { DashboardLayout } from "@/components/layout/private/dashboard-layout";
+
+export default function DashboardRouteLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return <DashboardLayout>{children}</DashboardLayout>;
+}

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

@@ -0,0 +1,107 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+  }
+}

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

@@ -1,27 +1,37 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+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 "@/app/styles.css";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import "@/app/globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const beVietnamPro = Be_Vietnam_Pro({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "__PROJECT_NAME__",
   description: "Outsource-ready Next.js scaffolded by NexTCLI",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: ReactNode;
 }>) {
+  const locale = await getLocale();
+  const messages = await getMessages();
+
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <QueryProvider>{children}</QueryProvider>
-        <Toaster richColors position="top-right" />
+    <html lang={locale} 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>
       </body>
     </html>
   );

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

@@ -1,21 +1,5 @@
-import Link from "next/link";
+import { redirect } from "next/navigation";
 
 export default function HomePage() {
-  return (
-    <main style={{ padding: 24 }}>
-      <h1>NexTCLI Base Template</h1>
-      <p>Ship outsource projects faster with standardized architecture.</p>
-      <ul style={{ display: "grid", gap: 8 }}>
-        <li>
-          <Link href="/example">Go to example dashboard page</Link>
-        </li>
-        <li>
-          <Link href="/sign-in">Go to sign-in page</Link>
-        </li>
-        <li>
-          <Link href="/account">Go to account page</Link>
-        </li>
-      </ul>
-    </main>
-  );
+  redirect("/dashboard");
 }

package/templates/next-base/src/components/layout/private/app-sidebar.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import {
+  useSidebar,
+  Sidebar,
+  SidebarHeader,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { NavSidebar } from "@/components/layout/private/nav-sidebar";
+import { cn } from "@/utils/cn";
+
+export function AppSidebar() {
+  const { state, isMobile } = useSidebar();
+  const t = useTranslations("common");
+  const isCollapsed = state === "collapsed";
+
+  return (
+    <Sidebar collapsible="offcanvas">
+      {!isMobile && (
+        <div className="absolute -right-4 top-20 z-10">
+          <SidebarTrigger
+            className={cn(
+              "h-8 w-4 rounded-l-none border border-border bg-background p-0 hover:bg-accent",
+            )}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="h-4 w-4" />
+            ) : (
+              <ChevronLeft className="h-4 w-4" />
+            )}
+          </SidebarTrigger>
+        </div>
+      )}
+      <SidebarHeader className="p-3">
+        <Link href="/" className="font-semibold">
+          {t("appName")}
+        </Link>
+      </SidebarHeader>
+      <NavSidebar />
+    </Sidebar>
+  );
+}

package/templates/next-base/src/components/layout/private/dashboard-layout.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useTranslations } from "next-intl";
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { AppSidebar } from "@/components/layout/private/app-sidebar";
+import { NavUser } from "@/components/layout/private/nav-user";
+import { useIsMobile } from "@/hooks/use-mobile";
+
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const { theme, setTheme } = useTheme();
+  const isMobile = useIsMobile();
+  const t = useTranslations("common.header");
+
+  return (
+    <SidebarProvider>
+      <div className="flex h-screen w-full flex-col">
+        <header className="flex h-14 items-center justify-between border-b bg-card px-4">
+          <div className="flex items-center gap-2">
+            {isMobile && <SidebarTrigger />}
+            <p className="font-semibold">__PROJECT_NAME__</p>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+              title={t("toggleTheme")}
+            >
+              {theme === "dark" ? (
+                <Sun className="h-5 w-5" />
+              ) : (
+                <Moon className="h-5 w-5" />
+              )}
+            </Button>
+            <NavUser />
+          </div>
+        </header>
+
+        <div className="flex flex-1 overflow-hidden">
+          <AppSidebar />
+          <ScrollArea className="flex-1">
+            <main className="p-4 md:p-6">{children}</main>
+          </ScrollArea>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
+}

package/templates/next-base/src/components/layout/private/locale-switcher.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useLocale, useTranslations } from "next-intl";
+import { locales, type AppLocale } from "@/i18n/config";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+export function LocaleSwitcher() {
+  const locale = useLocale() as AppLocale;
+  const router = useRouter();
+  const t = useTranslations("common.locale");
+
+  if (locales.length <= 1) {
+    return null;
+  }
+
+  const setLocale = (nextLocale: string) => {
+    document.cookie = `NEXT_LOCALE=${nextLocale}; path=/; max-age=31536000`;
+    router.refresh();
+  };
+
+  return (
+    <div className="space-y-2">
+      <p className="text-xs font-medium text-muted-foreground">{t("label")}</p>
+      <Select value={locale} onValueChange={setLocale}>
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {locales.map((item) => (
+            <SelectItem key={item} value={item}>
+              {t(item)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}