Trying to setup monorepo

.env.example

@@ -8,13 +8,3 @@
 # DATABASE_URL=mysql://USERNAME:[email protected]/DATABASE_NAME?ssl={"rejectUnauthorized":true}
 
 # @see https://next-auth.js.org/configuration/options#nextauth_url
-AUTH_URL='http://localhost:3000'
-
-# You can generate the secret via 'openssl rand -base64 32' on Unix
-# @see https://next-auth.js.org/configuration/options#secret
-AUTH_SECRET='supersecret'
-
-# Preconfigured Discord OAuth provider, works out-of-the-box
-# @see https://next-auth.js.org/providers/discord
-AUTH_DISCORD_ID=''
-AUTH_DISCORD_SECRET=''

apps/nextjs/next.config.mjs

@@ -1,15 +1,65 @@
 // Importing env files here to validate on build
 import "./src/env.mjs";
-import "@acme/auth/env.mjs";
+
+import path from "path";
+import { URL } from "url";
+import { withPayload } from "@payloadcms/next-payload";
 
 /** @type {import("next").NextConfig} */
 const config = {
   reactStrictMode: true,
   /** Enables hot reloading for local packages without a build step */
-  transpilePackages: ["@acme/api", "@acme/auth", "@acme/db"],
+  transpilePackages: ["@acme/api", "@acme/db"],
   /** We already do linting and typechecking as separate tasks in CI */
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
 };
 
-export default config;
+const __dirname = new URL(".", import.meta.url).pathname;
+
+export default withPayload(config, {
+  // The second argument to `withPayload`
+  // allows you to specify paths to your Payload dependencies
+  // and configure the admin route to your Payload CMS.
+
+  // Point to your Payload config (Required)
+  configPath: path.resolve(__dirname, "./src/payload/payload.config.ts"),
+
+  // Point to custom Payload CSS (optional)
+  // cssPath: path.resolve(__dirname, "./css/my-custom-payload-styles.css"),
+
+  // Point to your exported, initialized Payload instance (optional, default shown below`)
+  payloadPath: path.resolve(process.cwd(), "./src/payload/payloadClient.ts"),
+
+  // Set a custom Payload admin route (optional, default is `/admin`)
+  // NOTE: Read the "Set a custom admin route" section in the payload/next-payload README.
+  adminRoute: "/admin",
+});
+
+// next.config.js
+// const path = require("path");
+// const { withPayload } = require("@payloadcms/next-payload");
+
+// module.exports = withPayload(
+//   {
+//     // your Next config here
+//   },
+//   {
+//     // The second argument to `withPayload`
+//     // allows you to specify paths to your Payload dependencies
+//     // and configure the admin route to your Payload CMS.
+
+//     // Point to your Payload config (Required)
+//     configPath: path.resolve(__dirname, "./payload/payload.config.ts"),
+
+//     // Point to custom Payload CSS (optional)
+//     cssPath: path.resolve(__dirname, "./css/my-custom-payload-styles.css"),
+
+//     // Point to your exported, initialized Payload instance (optional, default shown below`)
+//     payloadPath: path.resolve(process.cwd(), "./payload/payloadClient.ts"),
+
+//     // Set a custom Payload admin route (optional, default is `/admin`)
+//     // NOTE: Read the "Set a custom admin route" section in the payload/next-payload README.
+//     adminRoute: "/admin",
+//   }
+// );

apps/nextjs/package.json

@@ -14,8 +14,16 @@
   },
   "dependencies": {
     "@acme/api": "workspace:^0.1.0",
-    "@acme/auth": "workspace:^0.1.0",
     "@acme/db": "workspace:^0.1.0",
+    "@payloadcms/bundler-webpack": "^1.0.5",
+    "@payloadcms/db-mongodb": "^1.0.8",
+    "@payloadcms/db-postgres": "^0.1.13",
+    "@payloadcms/next-payload": "^0.1.9",
+    "@payloadcms/plugin-cloud": "^2.2.6",
+    "@payloadcms/plugin-cloud-storage": "^1.1.1",
+    "@payloadcms/plugin-seo": "^1.0.15",
+    "@payloadcms/richtext-lexical": "^0.1.17",
+    "@payloadcms/richtext-slate": "^1.1.0",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-devtools": "^5.8.1",
@@ -25,6 +33,8 @@
     "@trpc/react-query": "next",
     "@trpc/server": "next",
     "next": "^14.0.2",
+    "payload": "^2.1.1",
+    "payload-admin-bar": "^1.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "superjson": "2.2.0",

apps/nextjs/src/app/(payload)/admin/page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+import Root from "payload/dist/admin/Root";
+
+const PayloadAdmin = () => {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <div
+      className="
+    bg-orange-400-100 flex
+    min-h-screen
+    flex-col
+    text-gray-900
+  "
+    />
+  );
+  return <Root />;
+};
+
+export default PayloadAdmin;

apps/nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -1,7 +1,6 @@
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
 import { appRouter, createTRPCContext } from "@acme/api";
-import { auth } from "@acme/auth";
 
 export const runtime = "edge";
 
@@ -24,19 +23,19 @@ export function OPTIONS() {
   return response;
 }
 
-const handler = auth(async (req) => {
+const handler = async (req) => {
   const response = await fetchRequestHandler({
     endpoint: "/api/trpc",
     router: appRouter,
     req,
-    createContext: () => createTRPCContext({ auth: req.auth, req }),
+    createContext: () => createTRPCContext({ req }),
     onError({ error, path }) {
       console.error(`>>> tRPC Error on '${path}'`, error);
     },
   });
 
   setCorsHeaders(response);
   return response;
-});
+};
 
 export { handler as GET, handler as POST };

apps/nextjs/src/app/page.tsx

@@ -1,38 +1,58 @@
 import { Suspense } from "react";
 
-import { AuthShowcase } from "./_components/auth-showcase";
-import {
-  CreatePostForm,
-  PostCardSkeleton,
-  PostList,
-} from "./_components/posts";
-
 export const runtime = "edge";
 
 export default function HomePage() {
   return (
-    <main className="flex h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container mt-12 flex flex-col items-center justify-center gap-4 py-8">
-        <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
-          Create <span className="text-pink-400">T3</span> Turbo
+    // Create me a landing page just to showcase my mobile app and qr codes and links to playstore and appstore
+    <div className="flex min-h-screen flex-col items-center justify-center py-2">
+      <main className="flex flex-1 flex-col items-center justify-center px-20 text-center">
+        <h1 className="text-6xl font-bold">
+          Welcome to <a href="https://nextjs.org">My App</a>
         </h1>
-        <AuthShowcase />
 
-        <CreatePostForm />
-        <div className="h-[40vh] w-full max-w-2xl overflow-y-scroll">
-          <Suspense
-            fallback={
-              <div className="flex w-full flex-col gap-4">
-                <PostCardSkeleton />
-                <PostCardSkeleton />
-                <PostCardSkeleton />
-              </div>
-            }
+        <div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full">
+          <a
+            href="https://nextjs.org/docs"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Documentation &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Find in-depth information about Next.js features and API.
+            </p>
+          </a>
+
+          <a
+            href="https://nextjs.org/learn"
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Learn &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Learn about Next.js in an interactive course with quizzes!
+            </p>
+          </a>
+
+          <a
+            href=""
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
+          >
+            <h3 className="text-2xl font-bold">Examples &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Discover and deploy boilerplate example Next.js projects.
+            </p>
+          </a>
+
+          <a
+            href=""
+            className="mt-6 w-96 rounded-xl border p-6 text-left hover:text-blue-600 focus:text-blue-600"
           >
-            <PostList />
-          </Suspense>
+            <h3 className="text-2xl font-bold">Deploy &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Instantly deploy your Next.js site to a public URL with Vercel.
+            </p>
+          </a>
         </div>
-      </div>
-    </main>
+      </main>
+    </div>
   );
 }

apps/nextjs/src/env.mjs

@@ -14,7 +14,7 @@ export const env = createEnv({
    * built with invalid env vars.
    */
   server: {
-    DATABASE_URL: z.string().url(),
+    // DATABASE_URL: z.string().url(),
   },
   /**
    * Specify your client-side environment variables schema here.