create-next-pro-cli 0.1.0

package/templates/Projects/default/src/app/[locale]/(public)/register/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { signIn } from "next-auth/react";
+import BackButton from "@/ui/_global/BackButton";
+
+export default function RegisterPage() {
+  const t = useTranslations("register");
+  return (
+    <main className="py-8 px-4 max-w-md mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <BackButton />
+      </div>
+      <p className="text-muted mb-6">{t("description")}</p>
+      <button
+        onClick={() => signIn()}
+        className="w-full py-2 px-4 rounded bg-blue-600 text-white font-semibold hover:bg-blue-700 transition"
+      >
+        {t("register_with_google")}
+      </button>
+    </main>
+  );
+}

package/templates/Projects/default/src/app/[locale]/(user)/dashboard/error.tsx

@@ -0,0 +1,38 @@
+// app/[locale]/error.tsx
+"use client"; // Error boundaries must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
+// This page is used to handle errors in the application
+// You can customize this page to display a user-friendly error message
+// or redirect to a different page if needed
+// This is part of the Next.js app directory structure and will be automatically used by Next.js
+// when an error occurs in the application
+// Make sure to handle errors gracefully to improve user experience
+// You can also log errors or send them to an error tracking service

package/templates/Projects/default/src/app/[locale]/(user)/dashboard/loading.tsx

@@ -0,0 +1,17 @@
+// app/[locale]/dashboard/loading.tsx
+"use client";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col flex-1 items-center justify-center">
+      <p className="text-gray-500">Loading dashboard...</p>
+    </div>
+  );
+}
+// This component is used to show a loading state while the dashboard is being prepared
+// You can customize it with a spinner, skeletons, or any loading UI you prefer
+// It will be displayed when the dashboard is loading, for example during data fetching or component rendering
+// This is useful for providing feedback to users that something is happening in the background
+// You can also use this to implement a more complex loading state with animations or placeholders
+// Make sure to keep it lightweight to avoid blocking the main thread
+// This component is part of the Next.js app directory structure and will be automatically used by Next.js

package/templates/Projects/default/src/app/[locale]/(user)/dashboard/page.tsx

@@ -0,0 +1,12 @@
+import Dashboard from "@/ui/dashboard/page";
+
+export default function DashboardPage() {
+  return <Dashboard />;
+}
+// This page is the main entry point for the dashboard
+// It uses the `useTranslations` hook to fetch localized strings
+// The `t` function is used to get the translated strings for the dashboard
+// You can add more components or logic here to build your dashboard
+// This is part of the Next.js app directory structure
+// It will be automatically rendered when the user navigates to the dashboard
+// Make sure to define the translations in your locale files

package/templates/Projects/default/src/app/[locale]/(user)/layout.tsx

@@ -0,0 +1,12 @@
+// app/[locale]/(user)/layout.tsx
+
+import UserNav from "@/ui/_global/UserNav";
+import LocaleSwitcher from "@/ui/_global/LocaleSwitcher";
+
+export default function UserLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

package/templates/Projects/default/src/app/[locale]/(user)/settings/loading.tsx

@@ -0,0 +1,17 @@
+// app/[locale]/dashboard/loading.tsx
+"use client";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col flex-1 items-center justify-center">
+      <p className="text-gray-500">Loading user info...</p>
+    </div>
+  );
+}
+// This component is used to show a loading state while the dashboard is being prepared
+// You can customize it with a spinner, skeletons, or any loading UI you prefer
+// It will be displayed when the dashboard is loading, for example during data fetching or component rendering
+// This is useful for providing feedback to users that something is happening in the background
+// You can also use this to implement a more complex loading state with animations or placeholders
+// Make sure to keep it lightweight to avoid blocking the main thread
+// This component is part of the Next.js app directory structure and will be automatically used by Next.js

package/templates/Projects/default/src/app/[locale]/(user)/settings/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { useTranslations } from "next-intl";
+
+export default function UserInfoPage() {
+  const t = useTranslations("settings");
+  return (
+    <main className="py-8 px-4 max-w-3xl mx-auto">
+      <h1 className="text-2xl font-bold">{t("title")}</h1>
+      <p className="text-muted mt-2">{t("description")}</p>
+    </main>
+  );
+}

package/templates/Projects/default/src/app/[locale]/(user)/user_info/loading.tsx

@@ -0,0 +1,17 @@
+// app/[locale]/dashboard/loading.tsx
+"use client";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col flex-1 items-center justify-center">
+      <p className="text-gray-500">Loading user info...</p>
+    </div>
+  );
+}
+// This component is used to show a loading state while the dashboard is being prepared
+// You can customize it with a spinner, skeletons, or any loading UI you prefer
+// It will be displayed when the dashboard is loading, for example during data fetching or component rendering
+// This is useful for providing feedback to users that something is happening in the background
+// You can also use this to implement a more complex loading state with animations or placeholders
+// Make sure to keep it lightweight to avoid blocking the main thread
+// This component is part of the Next.js app directory structure and will be automatically used by Next.js

package/templates/Projects/default/src/app/[locale]/(user)/user_info/page.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { useTranslations } from "next-intl";
+
+export default function UserInfoPage() {
+  const t = useTranslations("user_info");
+  return (
+    <main className="py-8 px-4 max-w-3xl mx-auto">
+      <h1 className="text-2xl font-bold">{t("title")}</h1>
+      <p className="text-muted mt-2">{t("description")}</p>
+    </main>
+  );
+}

package/templates/Projects/default/src/app/[locale]/layout.tsx

@@ -0,0 +1,32 @@
+// app/[locale]/layout.tsx
+import { setRequestLocale } from "next-intl/server";
+import { NextIntlClientProvider, hasLocale, Locale } from "next-intl";
+import React from "react";
+import "@/app/styles/globals.css"; // Import global styles
+import GlobalHeader from "@/ui/_global/GlobalHeader";
+import GlobalMain from "@/ui/_global/GlobalMain";
+import { isConnected } from "@/lib/auth/isConnected";
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  const isConnectedValue = await isConnected();
+
+  return (
+    <html lang={locale}>
+      <body>
+        <NextIntlClientProvider>
+          <GlobalHeader isConnected={isConnectedValue} />
+          <GlobalMain>{children}</GlobalMain>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  );
+}

package/templates/Projects/default/src/app/[locale]/loading.tsx

@@ -0,0 +1,17 @@
+// app/[locale]/dashboard/loading.tsx
+"use client";
+
+export default function Loading() {
+  return (
+    <div className="flex flex-col flex-1 items-center justify-center">
+      <p className="text-gray-500">Loading ROOT...</p>
+    </div>
+  );
+}
+// This component is used to show a loading state while the dashboard is being prepared
+// You can customize it with a spinner, skeletons, or any loading UI you prefer
+// It will be displayed when the dashboard is loading, for example during data fetching or component rendering
+// This is useful for providing feedback to users that something is happening in the background
+// You can also use this to implement a more complex loading state with animations or placeholders
+// Make sure to keep it lightweight to avoid blocking the main thread
+// This component is part of the Next.js app directory structure and will be automatically used by Next.js

package/templates/Projects/default/src/app/[locale]/not-found.tsx

@@ -0,0 +1,22 @@
+// app/[locale]/not-found.tsx
+import { Link } from "@/lib/i18n/navigation";
+
+export default function NotFound() {
+  return (
+    <div>
+      <h2>Not Found</h2>
+      <p>Could not find requested resource</p>
+      <Link href="/">Return Home</Link>
+    </div>
+  );
+}
+// This page is used to handle 404 errors in the application
+// You can customize this page to display a user-friendly error message
+// or redirect to a different page if needed
+// This is part of the Next.js app directory structure and will be automatically used by Next.js
+// when a requested page is not found
+// Make sure to handle 404 errors gracefully to improve user experience
+// You can also log errors or send them to an error tracking service
+// This component can be styled with CSS or Tailwind CSS to match your application's design
+// You can also add additional links or actions for the user to take, such as searching or navigating to other parts of the site
+// This component is lightweight and does not block the main thread

package/templates/Projects/default/src/app/[locale]/page.tsx

@@ -0,0 +1,116 @@
+import React from "react";
+import Image from "next/image";
+import HomePage from "@/app/[locale]/(public)/_home/page";
+import DashboardPage from "@/app/[locale]/(user)/dashboard/page";
+import PublicNav from "@/ui/_global/PublicNav";
+import UserNav from "@/ui/_global/UserNav";
+import LocaleSwitcher from "@/ui/_global/LocaleSwitcher";
+import { cookies } from "next/headers";
+import { verify } from "jsonwebtoken";
+
+export default async function FallbackPage() {
+  let isConnected = false;
+  const cookieStore = await cookies();
+  const appToken = cookieStore.get("app_token")?.value;
+  if (appToken) {
+    try {
+      verify(appToken, process.env.APP_JWT_SECRET!);
+      isConnected = true;
+    } catch {
+      isConnected = false;
+    }
+  }
+
+  return (
+    <HomePage />
+    /*     <main className="min-h-screen bg-neutral-50 font-sans text-gray-900">
+      <header className="sticky top-0 z-30 w-full border-b bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 shadow-sm">
+        <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+          <div className="flex items-center gap-3">
+            <Image
+              src="/cnp-logo.svg"
+              alt="Logo"
+              width={63}
+              height={63}
+              className="mr-2"
+            />
+            <span className="text-lg font-semibold tracking-tight select-none">
+              Create Next Pro
+            </span>
+          </div>
+          <nav className="flex items-center gap-4">
+            {isConnected ? <UserNav /> : <PublicNav />}
+            <LocaleSwitcher />
+          </nav>
+        </div>
+      </header>
+
+      <section className="mx-auto w-full max-w-3xl py-16 px-6">
+        {isConnected ? <DashboardPage /> : <HomePage />}
+      </section>
+    </main> */
+  );
+}
+
+// Design inspiré de nextjs.org avec Tailwind CSS.
+
+// import React from "react";
+// import HomePage from "@/app/[locale]/(public)/_home/page";
+// import DashboardPage from "@/app/[locale]/(user)/dashboard/page";
+// import PublicNav from "@/ui/_global/PublicNav";
+// import UserNav from "@/ui/_global/UserNav";
+// import LocaleSwitcher from "@/ui/_global/LocaleSwitcher";
+
+// export default async function FallbackPage({
+//   params,
+// }: {
+//   params: Promise<{ locale: string }>;
+// }) {
+//   // TODO: Remplacer par la logique réelle d'authentification (next-auth)
+//   const isConnected = false;
+//   const { locale } = await params;
+
+//   return (
+//     <main className="min-h-screen bg-neutral-50 font-sans text-gray-900">
+//       {/* Header sticky façon nextjs.org */}
+//       <header className="sticky top-0 z-30 w-full border-b bg-white/80 backdrop-blur supports-[backdrop-filter]:bg-white/60 shadow-sm">
+//         <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+//           <div className="flex items-center gap-3">
+//             {/* Logo Next.js SVG */}
+//             <svg
+//               width="32"
+//               height="32"
+//               viewBox="0 0 32 32"
+//               fill="none"
+//               xmlns="http://www.w3.org/2000/svg"
+//               className="mr-2"
+//             >
+//               <rect width="32" height="32" rx="16" fill="#000" />
+//               <path
+//                 d="M16.018 29.917c7.66 0 13.899-6.238 13.899-13.899 0-7.66-6.239-13.899-13.899-13.899-7.66 0-13.899 6.239-13.899 13.899 0 7.661 6.239 13.899 13.899 13.899Z"
+//                 fill="#fff"
+//               />
+//               <path
+//                 d="M23.635 22.295 12.7 10.36h-1.68v11.28h1.44v-9.12l10.08 10.08 1.095-1.095ZM19.36 21.64h1.44V10.36h-1.44v11.28Z"
+//                 fill="#000"
+//               />
+//             </svg>
+//             <span className="text-lg font-semibold tracking-tight select-none">
+//               Create Next Pro
+//             </span>
+//           </div>
+//           <nav className="flex items-center gap-4">
+//             {isConnected ? <UserNav /> : <PublicNav />}
+//             <LocaleSwitcher />
+//           </nav>
+//         </div>
+//       </header>
+//       {/* Main content */}
+//       <section className="mx-auto w-full max-w-3xl py-16 px-6">
+//         {isConnected ? <DashboardPage /> : <HomePage />}
+//       </section>
+//     </main>
+//   );
+// }
+
+// // Design inspiré de nextjs.org avec Tailwind CSS.

package/templates/Projects/default/src/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,81 @@
+import { sign } from "jsonwebtoken";
+import NextAuth from "next-auth";
+//import { authOptions } from "@/auth.config";
+import type {
+  NextAuthOptions,
+  Session,
+  User,
+  Account,
+  Profile,
+} from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+import type { JWT } from "next-auth/jwt";
+import { getToken } from "next-auth/jwt";
+import { NextRequest, NextResponse } from "next/server";
+
+const authOptions: NextAuthOptions = {
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID!,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
+    }),
+  ],
+  callbacks: {
+    async jwt({ token, user }: { token: JWT; user?: User }) {
+      if (user) {
+        token.id = user.id;
+        token.email = user.email;
+        token.name = user.name;
+      }
+      console.log("JWT Callback:", token);
+      // On ne met rien dans le token NextAuth
+      // Le token JWT applicatif est géré dans le middleware
+      // et dans le callback de la route d'authentification
+      // pour éviter de le stocker dans la session NextAuth
+      // et de le renvoyer au client.
+      // Il est uniquement utilisé côté serveur pour vérifier l'authentification.
+      // On peut ajouter des données supplémentaires si nécessaire
+      // mais pour l'instant, on garde le token minimaliste.
+      // Exemple d'ajout de données :
+      // token.customData = "some data";
+      return token;
+    },
+    async session({ session, token }: { session: Session; token: JWT }) {
+      // On ne met rien dans la session NextAuth
+      return session;
+    },
+    async signIn({
+      user,
+      account,
+      profile,
+      email,
+      credentials,
+    }: {
+      user: User;
+      account: Account | null;
+      profile?: Profile;
+      email?: string | { verificationRequest?: boolean };
+      credentials?: Record<string, unknown>;
+    }) {
+      return true;
+    },
+    async redirect({ url, baseUrl }: { url: string; baseUrl: string }) {
+      // Après login, redirige vers l'endpoint qui pose le cookie JWT applicatif
+      // console.log("Before Redirect Callback :", { url: url, baseUrl: baseUrl });
+      const customCallbackRoute = "/api/auth/post-login";
+      /*  if (url.startsWith(baseUrl)) {
+        console.log("Redirecting to post-login endpoint");
+        return "/api/auth/post-login";
+      } */
+      // console.log("Redirecting to base URL + customCallbackRoute");
+      return baseUrl + customCallbackRoute;
+    },
+  },
+  // Ajoute ici d'autres options/callbacks si besoin
+};
+
+// Suppression de customJwtCookie : la pose du cookie se fait dans /api/auth/post-login
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

package/templates/Projects/default/src/app/api/auth/post-login/route.ts

@@ -0,0 +1,27 @@
+import { getToken } from "next-auth/jwt";
+import { sign } from "jsonwebtoken";
+import { NextResponse, NextRequest } from "next/server";
+import { redirect } from "@/lib/i18n/navigation";
+// import { NextURL } from "next/dist/server/web/next-url";
+
+export async function GET(req: NextRequest) {
+  const token = await getToken({ req, secret: process.env.NEXTAUTH_SECRET });
+  if (token) {
+    const appJwt = sign(
+      { id: token.id, email: token.email, name: token.name },
+      process.env.APP_JWT_SECRET!,
+      { expiresIn: "7d" }
+    );
+    const res = NextResponse.redirect(req.nextUrl.origin + "/");
+    res.cookies.set("app_token", appJwt, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "strict",
+      path: "/",
+      maxAge: 60 * 60 * 24 * 7,
+    });
+    return res;
+  }
+  // Si pas de token, redirige vers login
+  return redirect({ href: "/login", locale: "en" });
+}

package/templates/Projects/default/src/app/api/me/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest, NextResponse } from "next/server";
+import { verify } from "jsonwebtoken";
+
+export async function GET(req: NextRequest) {
+  const cookie = req.cookies.get("app_token")?.value;
+  if (!cookie) {
+    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+  }
+  try {
+    const user = verify(cookie, process.env.APP_JWT_SECRET!);
+    return NextResponse.json({ user });
+  } catch {
+    return NextResponse.json({ error: "Invalid token" }, { status: 401 });
+  }
+}

package/templates/Projects/default/src/app/layout.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+// Since we have a `not-found.tsx` page on the root, a layout file
+// is required, even if it's just passing children through.
+export default function RootLayout({ children }: Props) {
+  return children;
+}

package/templates/Projects/default/src/app/not-found.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import Error from "next/error";
+
+// This page renders when a route like `/unknown.txt` is requested.
+// In this case, the layout at `app/[locale]/layout.tsx` receives
+// an invalid value as the `[locale]` param and calls `notFound()`.
+
+export default function GlobalNotFound() {
+  return (
+    <html lang="en">
+      <body>
+        <Error statusCode={404} />;
+      </body>
+    </html>
+  );
+}

package/templates/Projects/default/src/app/page.tsx

@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+// This page only renders when the app is built statically (output: 'export')
+export default function RootPage() {
+  redirect("/en");
+}

package/templates/Projects/default/src/app/sitemap.ts

@@ -0,0 +1,27 @@
+import { MetadataRoute } from "next";
+import { Locale } from "next-intl";
+import { host } from "@/config";
+import { routing } from "@/lib/i18n/routing";
+import { getPathname } from "@/lib/i18n/navigation";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [...getEntries("/"), ...getEntries("/pathnames")];
+}
+
+type Href = Parameters<typeof getPathname>[0]["href"];
+
+function getEntries(href: Href) {
+  return routing.locales.map((locale) => ({
+    url: getUrl(href, locale),
+    alternates: {
+      languages: Object.fromEntries(
+        routing.locales.map((cur) => [cur, getUrl(href, cur)])
+      ),
+    },
+  }));
+}
+
+function getUrl(href: Href, locale: Locale) {
+  const pathname = getPathname({ locale, href });
+  return host + pathname;
+}

package/templates/Projects/default/src/app/styles/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

package/templates/Projects/default/src/app/ui/dashboard/MainDashboard.tsx

@@ -0,0 +1,21 @@
+import { useTranslations } from "next-intl";
+import BackButton from "@/ui/_global/BackButton";
+import WelcomeCard from "@/ui/dashboard/WelcomeCard";
+import StatsCard from "@/ui/dashboard/StatsCard";
+
+export default function DashboardPage() {
+  const t = useTranslations("dashboard");
+  return (
+    <main className="py-8 px-4 max-w-3xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
+        <BackButton />
+      </div>
+      <p className="text-muted mb-8">{t("description")}</p>
+      <section className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <WelcomeCard t={t} />
+        <StatsCard t={t} />
+      </section>
+    </main>
+  );
+}

package/templates/Projects/default/src/app/ui/dashboard/StatsCard.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function StatsCard({ t }: { t: (key: string) => string }) {
+  return (
+    <div className="rounded border bg-white p-6 shadow-sm">
+      <h2 className="text-lg font-semibold mb-2">Statistiques</h2>
+      <ul className="text-sm text-gray-600 space-y-1">
+        <li>• {t("widgets.stats.views")}: 123</li>
+        <li>• {t("widgets.stats.likes")}: 45</li>
+        <li>• {t("widgets.stats.comments")}: 7</li>
+      </ul>
+    </div>
+  );
+}

package/templates/Projects/default/src/app/ui/dashboard/WelcomeCard.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function WelcomeCard({ t }: { t: (key: string) => string }) {
+  return (
+    <div className="rounded border bg-white p-6 shadow-sm">
+      <h2 className="text-lg font-semibold mb-2">{t("widgets.welcome")}</h2>
+      <p className="text-gray-600">{t("widgets.description")}</p>
+    </div>
+  );
+}

package/templates/Projects/default/src/config.ts

@@ -0,0 +1,4 @@
+export const port = process.env.PORT || 3000;
+export const host = process.env.PROJECT_PRODUCTION_URL
+  ? `https://${process.env.PROJECT_PRODUCTION_URL}`
+  : `http://localhost:${port}`;