({});
diff --git a/src/app/_trpc/serverClient.ts b/src/app/_trpc/serverClient.ts
new file mode 100644
index 0000000..f202362
--- /dev/null
+++ b/src/app/_trpc/serverClient.ts
@@ -0,0 +1,14 @@
+import { httpBatchLink } from "@trpc/client";
+
+import { appRouter } from "~/server";
+
+export const serverClient = appRouter.createCaller({
+ links: [
+ httpBatchLink({
+ url:
+ process.env.NODE_ENV === "development"
+ ? `${process.env.DEV_URL}/api/trpc`
+ : `${process.env.PROD_URL}/api/trpc`,
+ }),
+ ],
+});
diff --git a/src/app/api/trpc/[trpc]/route.ts b/src/app/api/trpc/[trpc]/route.ts
new file mode 100644
index 0000000..d727e6f
--- /dev/null
+++ b/src/app/api/trpc/[trpc]/route.ts
@@ -0,0 +1,19 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
+
+import { appRouter } from "~/server";
+
+const handler = (req: Request) =>
+ fetchRequestHandler({
+ endpoint: "/api/trpc",
+ req,
+ router: appRouter,
+ createContext: () => ({}),
+ });
+
+export {
+ handler as GET,
+ handler as POST,
+ handler as PATCH,
+ handler as PUT,
+ handler as DELETE,
+};
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..4570eb8
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..352b294
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,30 @@
+import "./globals.css";
+import type { Metadata } from "next";
+import { Poppins } from "next/font/google";
+
+import Provider from "./_trpc/Provider";
+
+const poppins = Poppins({
+ subsets: ["latin"],
+ weight: ["300", "500", "700", "900"],
+ preload: true,
+});
+
+export const metadata: Metadata = {
+ title: "NextJS 13 + tRPC Boilerplate",
+ description: "My boilerplate using NextJS 13, tRPC, Tanstack, and Prisma",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..fb93b62
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,12 @@
+import ClientComponent from "~/components/ClientComponent";
+import ServerComponent from "~/components/ServerComponent";
+
+export default function Home() {
+ return (
+
+ Welcome to Magaaazine.
+
+
+
+ );
+}
diff --git a/src/components/ClientComponent.tsx b/src/components/ClientComponent.tsx
new file mode 100644
index 0000000..3354bca
--- /dev/null
+++ b/src/components/ClientComponent.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { trpc } from "~/app/_trpc/client";
+
+export default function ClientComponent() {
+ const { data, isLoading } = trpc.getMessage.useQuery();
+
+ return (
+
+
{isLoading ? "Loading..." : data}
+
+ );
+}
diff --git a/src/components/ServerComponent.tsx b/src/components/ServerComponent.tsx
new file mode 100644
index 0000000..08e0386
--- /dev/null
+++ b/src/components/ServerComponent.tsx
@@ -0,0 +1,11 @@
+import { serverClient } from "~/app/_trpc/serverClient";
+
+export default async function ServerComponent() {
+ const getMessage = await serverClient.getMessage();
+
+ return (
+
+
{getMessage}
+
+ );
+}
diff --git a/src/config/Prisma.ts b/src/config/Prisma.ts
new file mode 100644
index 0000000..556ec97
--- /dev/null
+++ b/src/config/Prisma.ts
@@ -0,0 +1,19 @@
+import { PrismaClient } from "@prisma/client";
+
+declare global {
+ namespace NodeJS {
+ interface Global {}
+ }
+}
+
+interface CustomNodeJsGlobal extends NodeJS.Global {
+ prisma: PrismaClient;
+}
+
+declare const global: CustomNodeJsGlobal;
+
+const prisma = global.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV === "development") global.prisma = prisma;
+
+export default prisma;
diff --git a/src/server/index.ts b/src/server/index.ts
new file mode 100644
index 0000000..fe3fc2b
--- /dev/null
+++ b/src/server/index.ts
@@ -0,0 +1,12 @@
+// import prisma from "~/config/Prisma";
+// import z from "zod";
+
+import { publicProcedure, router } from "./trpc";
+
+export const appRouter = router({
+ getMessage: publicProcedure.query(async () => {
+ return "tRPC API IS READY...";
+ }),
+});
+
+export type AppRouter = typeof appRouter;
diff --git a/src/server/trpc.ts b/src/server/trpc.ts
new file mode 100644
index 0000000..be3ed16
--- /dev/null
+++ b/src/server/trpc.ts
@@ -0,0 +1,6 @@
+import { initTRPC } from "@trpc/server";
+
+const t = initTRPC.create();
+
+export const router = t.router;
+export const publicProcedure = t.procedure;
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..1af3b8f
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,20 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+ content: [
+ './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+ './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
+ theme: {
+ extend: {
+ backgroundImage: {
+ 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+ 'gradient-conic':
+ 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+ },
+ },
+ },
+ plugins: [],
+}
+export default config
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e798b24
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "es5",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "~/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}