DEV Community: Dhavalkurkutiya

Stop manually setting up tRPC in Next.js — use this CLI instead

Dhavalkurkutiya — Sun, 08 Mar 2026 05:42:14 +0000

Stop manually setting up tRPC in Next.js — use this CLI instead

Every time I start a new Next.js project with tRPC, I do the same thing.

Open docs. Copy files. Install packages. Forget to wrap layout.tsx. Get the QueryClient error. Fix it. Repeat next project.

I got tired of it. So I built a CLI.

npx create-trpc-setup

The Problem

Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. Every project needs:

Install @trpc/server, @trpc/client, @trpc/tanstack-react-query, @tanstack/react-query, zod, server-only
Create trpc/init.ts with context and procedures
Create trpc/query-client.ts with SSR-safe QueryClient
Create trpc/client.tsx with TRPCReactProvider
Create trpc/server.tsx with HydrateClient and prefetch
Create app/api/trpc/[trpc]/route.ts
Manually update layout.tsx to wrap <body> with TRPCReactProvider

Miss any step → error. Every. Single. Project.

The Solution

npx create-trpc-setup

Run this inside any existing Next.js project. Everything happens automatically.

What gets auto-detected:

Package manager — npm, pnpm, yarn, or bun
Path alias — reads tsconfig.json for @/*, ~/*, or any custom alias
Auth provider — detects Clerk or NextAuth, configures context automatically
Folder structure — src/ or root layout

Files Generated

trpc/
├── init.ts              ← context, baseProcedure, protectedProcedure, Zod error formatter
├── query-client.ts      ← SSR-safe QueryClient
├── client.tsx           ← TRPCReactProvider + useTRPC hook
├── server.tsx           ← prefetch, HydrateClient
└── routers/
    └── _app.ts          ← starter router with health + greet (Zod validation)

app/api/trpc/[trpc]/
└── route.ts             ← API handler with real headers + dev error logging

app/trpc-status/         ← styled test page (delete after confirming ✅)

layout.tsx — auto-patched

Before:

<body>
  {children}
  <Toaster />
</body>

After:

<body>
  <TRPCReactProvider>
    {children}
    <Toaster />
  </TRPCReactProvider>
</body>

No backup files. No extra clutter. Just the import added + body wrapped.

Why Not create-t3-app?

create-t3-app is great — but it only works for new projects.

create-trpc-setup works with projects you've already started.

Feature	create-t3-app	create-trpc-setup
New projects	✅	✅
Existing projects	❌	✅
Auto-patches layout.tsx	❌	✅
Clerk / NextAuth detection	❌	✅
tsconfig path alias detection	❌	✅
tRPC v11 + RSC ready	✅	✅

Using tRPC After Setup

Server Component — prefetch data:

// app/page.tsx
import { HydrateClient, prefetch, trpc } from "@/trpc/server";
import { MyClient } from "./my-client";

export default function Page() {
  prefetch(trpc.greet.queryOptions({ name: "World" }));
  return (
    <HydrateClient>
      <MyClient />
    </HydrateClient>
  );
}

Client Component — use data:

// my-client.tsx
"use client";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTRPC } from "@/trpc/client";

export function MyClient() {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.greet.queryOptions({ name: "World" }));
  return <div>{data.message}</div>;
}

protectedProcedure — Already Included

The generated init.ts includes a protectedProcedure that automatically throws UNAUTHORIZED:

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED", message: "Sign in required" });
  }
  return next({ ctx: { ...ctx, userId: ctx.userId } });
});

Use it directly in any router:

getProfile: protectedProcedure.query(({ ctx }) => {
  return { userId: ctx.userId }; // guaranteed non-null ✅
}),

Zod Error Formatter — Also Included

Clean field-level errors on the client:

error?.data?.zodError?.fieldErrors?.title // ["Title is required"]

Try It

npx create-trpc-setup

📦 npm: https://www.npmjs.com/package/create-trpc-setup
🐙 GitHub: https://github.com/Dhavalkurkutiya/create-trpc-setup

If this saved you time, drop a ⭐ on GitHub — it helps others find it!

Stop manually setting up tRPC in Next.js — use this CLI instead

Dhavalkurkutiya — Sat, 07 Mar 2026 06:28:23 +0000

Every time I start a new Next.js project with tRPC, I do the same thing.

Open docs. Copy files. Install packages. Forget to wrap layout.tsx. Get the QueryClient error. Fix it. Repeat next project.

I got tired of it. So I built a CLI.

npx create-trpc-setup

The Problem

Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. You need:

Install @trpc/server, @trpc/client, @trpc/tanstack-react-query, @tanstack/react-query, zod, server-only...
Create trpc/init.ts with context and procedures
Create trpc/query-client.ts with SSR-safe QueryClient
Create trpc/client.tsx with TRPCReactProvider
Create trpc/server.tsx with HydrateClient and prefetch
Create app/api/trpc/[trpc]/route.ts
Update layout.tsx to wrap children with TRPCReactProvider

Miss any step → error. Every new project.

The Solution

npx create-trpc-setup

Run this inside any existing Next.js project. Everything happens automatically.

What gets detected automatically:

Package manager — npm, pnpm, yarn, or bun
Path alias — reads tsconfig.json for @/*, ~/*, or any custom alias
Auth provider — detects Clerk or NextAuth and configures context
Folder structure — src/ or root layout

What gets generated:

trpc/
├── init.ts         ← context, baseProcedure, protectedProcedure, Zod error formatter
├── query-client.ts ← SSR-safe QueryClient
├── client.tsx      ← TRPCReactProvider + useTRPC hook
├── server.tsx      ← prefetch, HydrateClient, caller
└── routers/
    └── _app.ts     ← health + greet procedures with Zod

app/api/trpc/[trpc]/route.ts   ← API handler with real headers
app/trpc-status/               ← test page (delete after confirming)

layout.tsx — auto-patched:

Before:

<body>
  {children}
  <Toaster />
</body>

After:

<body>
  <TRPCReactProvider>
    {children}
    <Toaster />
  </TRPCReactProvider>
</body>

Using tRPC After Setup

Server Component — prefetch data:

// app/page.tsx
import { HydrateClient, prefetch, trpc } from "@/trpc/server";
import { MyClient } from "./my-client";

export default function Page() {
  prefetch(trpc.greet.queryOptions({ name: "World" }));
  return (
    <HydrateClient>
      <MyClient />
    </HydrateClient>
  );
}

Client Component — use data:

// my-client.tsx
"use client";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTRPC } from "@/trpc/client";

export function MyClient() {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.greet.queryOptions({ name: "World" }));
  return <div>{data.message}</div>;
}

Why Not create-t3-app?

create-t3-app is great — but it only works for new projects.

create-trpc-setup works with existing projects. Already have a Next.js app with Clerk, Shadcn, and custom providers? No problem. Run the command, everything gets added without touching your existing code.

protectedProcedure — Already Included

The generated init.ts includes a protectedProcedure that automatically throws UNAUTHORIZED:

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({ ctx: { ...ctx, userId: ctx.userId } });
});

Use it in any router:

getProfile: protectedProcedure.query(({ ctx }) => {
  return { userId: ctx.userId }; // guaranteed non-null
}),

Try It

npx create-trpc-setup

📦 npm: npmjs.com/package/create-trpc-setup
🐙 GitHub: github.com/Dhavalkurkutiya/create-trpc-setup

If it saved you time, drop a ⭐ on GitHub and share it with your team.

Setting up tRPC v11 in Next.js Now Takes Just One Command

Dhavalkurkutiya — Wed, 04 Mar 2026 08:54:45 +0000

I Built a CLI That Sets Up tRPC v11 in Next.js With One Command

Every time I started a new Next.js project with tRPC, I found myself doing the same thing — copying the same 6 files, installing the same packages, wrapping layout.tsx with the same provider.

So I automated it.

The Problem

Setting up tRPC v11 with Next.js App Router is not hard — but it's tedious. You need to:

Install @trpc/server, @trpc/client, @trpc/tanstack-react-query, @tanstack/react-query, zod, superjson, server-only...
Create trpc/init.ts with the right context
Create trpc/query-client.ts with SSR-safe QueryClient
Create trpc/client.tsx with TRPCReactProvider and useTRPC
Create trpc/server.tsx with HydrateClient, prefetch, caller
Create app/api/trpc/[trpc]/route.ts
Manually update layout.tsx to wrap children with TRPCReactProvider

That's a lot of boilerplate before you write a single procedure.

The Solution

npx create-trpc-setup

One command. That's it.

Here's what happens automatically:

1. Dependency install — detects your package manager (npm, pnpm, yarn, bun) and installs everything needed.

2. File generation — creates all 6 required tRPC files with the correct structure for Next.js App Router and React Server Components.

3. Layout auto-patch — reads your existing layout.tsx, adds the import, and wraps your <body> contents with <TRPCReactProvider>. Your existing providers (Clerk, Toaster, etc.) stay untouched.

4. Test page — creates a /trpc-test page so you can immediately verify your setup is working. Delete it after confirming.

What Gets Generated

trpc/
├── init.ts              ← context, baseProcedure, createTRPCRouter
├── query-client.ts      ← SSR-safe QueryClient factory
├── client.tsx           ← TRPCReactProvider + useTRPC hook
├── server.tsx           ← prefetch, HydrateClient, caller
└── routers/
    └── _app.ts          ← your app router

app/api/trpc/[trpc]/
└── route.ts             ← API route handler

How to Use tRPC After Setup

Server Component — prefetch data:

import { HydrateClient, prefetch, trpc } from "@/trpc/server";
import { MyClient } from "./my-client";

export default function Page() {
  prefetch(trpc.health.queryOptions());
  return (
    <HydrateClient>
      <MyClient />
    </HydrateClient>
  );
}

Client Component — consume data:

"use client";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTRPC } from "@/trpc/client";

export function MyClient() {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.health.queryOptions());
  return <div>{data.status}</div>;
}

Layout Auto-Patch

This was the trickiest part to build. The CLI reads your existing layout.tsx, finds the <body> tag, detects the indentation style, and wraps the inner content — keeping your existing providers and components exactly where they are.

Before:

<ClerkProvider>
  <html lang="en">
    <body className="...">
      {children}
      <Toaster />
    </body>
  </html>
</ClerkProvider>

After:

<ClerkProvider>
  <html lang="en">
    <body className="...">
      <TRPCReactProvider>
        {children}
        <Toaster />
      </TRPCReactProvider>
    </body>
  </html>
</ClerkProvider>

A .backup file is saved before any changes so you can always restore.

Try It

npx create-trpc-setup

📦 npm: npmjs.com/package/create-trpc-setup
🐙 GitHub: github.com/Dhavalkurkutiya/create-trpc-setup

If it saved you time, star the repo ⭐ and share it with someone who uses Next.js + tRPC.

Understanding JavaScript Global Context Execution

Dhavalkurkutiya — Fri, 21 Jun 2024 04:14:42 +0000

When diving into JavaScript, one of the fundamental concepts to grasp is the "global context" of code execution. This term might sound complex, but it's essential for understanding how JavaScript operates, especially in web development. Let's break it down.

What is the Global Context?

In JavaScript, the global context refers to the default environment where your code runs. When the JavaScript engine starts executing code, it begins in this global context. This is true whether you're running your script in a browser or on a server with Node.js.

The Global Object

Every global context has a global object. In browsers, this global object is window. In Node.js, it's global. This global object provides access to all global variables and functions. For example, when you declare a variable without using var, let, or const, it automatically becomes a property of the global object.

var foo = "bar"; // This is global
console.log(window.foo); // "bar" in browsers
console.log(global.foo); // "bar" in Node.js

Execution Contexts and the Call Stack

Understanding execution contexts and the call stack is crucial for grasping the global context. When your JavaScript code runs, the engine creates an execution context. The first execution context created is the global execution context. Here's what happens in detail:

Creation Phase: Before any code is executed, the global execution context is created. During this phase, the JavaScript engine sets up the global object, the this keyword, and initializes the scope chain.
Execution Phase: In this phase, the JavaScript engine executes the code line by line. Functions are called, and variables are assigned values.

The this Keyword

In the global context, this refers to the global object. This behavior can be a source of confusion, especially for developers coming from other programming languages.

console.log(this); // In the browser, this will log the window object

However, within a function (non-strict mode), this can behave differently. It's important to note that how this is set depends on how the function is called.

Strict Mode

JavaScript's strict mode changes the behavior of the global context. When strict mode is enabled (by adding "use strict"; at the top of your script or function), the global context behaves more predictably. For instance, this in the global context will be undefined instead of referring to the global object.

"use strict";
console.log(this); // undefined

Global Variables and Scope

Variables declared outside of any function or block are considered global variables. They are accessible from anywhere in your code, which can be both a blessing and a curse. Overusing global variables can lead to code that is difficult to maintain and debug due to potential name collisions and unintended modifications.

Best Practices

Avoid Global Variables: Encapsulate your code within functions or modules to minimize the use of global variables. This reduces the risk of name collisions and unintended side effects.Use
Strict Mode: Enabling strict mode helps catch common coding errors and prevents the use of certain problematic language features.

3.Understand Hoisting: JavaScript hoists variable and function declarations to the top of their containing scope. Understanding this behavior is crucial to avoid unexpected results.

Use ES6 Modules: With ES6, you can use import and export statements to create modular code. This helps in keeping your global scope clean.

Conclusion

The global context in JavaScript is the foundation upon which all code execution begins. Understanding how it works, along with the role of the global object and the this keyword, is essential for writing efficient and bug-free JavaScript code. By adhering to best practices, you can manage the global context effectively and avoid common pitfalls.Grasping the global context might seem daunting at first, but with practice and careful coding, you'll find it to be a powerful aspect of JavaScript. Happy coding!

Java programming structure

Dhavalkurkutiya — Sun, 25 Sep 2022 05:17:51 +0000

Java Programming Structure

A java programming structure consists 6 major section:

Document Section
Package Statement
Important Statement
Interface Statement
Class Defination and ,
Main Method Definition inside main class [ESSENTIAL]

1. Document Section 📑

This section includes to comments to tell tha program's purpose, it improves readability of tha program.

2. Package Statement 😍

A Package Statement allowed to includes statement that provides a package declaration.

3. Important Statement 🧑‍💻

In C or C++ if we require to include some external libraries in our program then we use "include" statement, similar java using "import" statement we can use external libraries in our program, it includes statements used for referring classes and interfaces that are declared in other packages.

4. Interface Statement 💫

In Java language, an interface can be defined as a contract between objects on how to communicate with eachother, this is similar to class but only includes constants, method declaration, allowed to declare interface.

5 . Class Defination 🧑‍💼

It describes information about user defines classes present in the program, this Section allowed to user able to declared other user defined class above ther main method class.

6. Main Method Definition inside class 🤗

Java Program Execution starts form main method, it Consists main method definition inside class.

🧑‍💻 Basic java program 🧑‍💻

class Main{
  public static void main (String[] args) {
    System.out.println("Hello World");
  }
}

👇 Check out 👇

❤️ Instagram : https://www.instagram.com/_mr.dhaval_io
👥 Facebook : https://m.facebook.com/dhaval.kurkutiya.3
🐦 Twitter : https://www.twitter.com/dhaval87950061