Native build steps (Expo):

# After installing dependencies, prebuild native projects
cd apps/expo
npx expo prebuild

# iOS only
cd ios && pod install && cd ..

Android linking is handled automatically by the Expo Gradle plugin; no manual step required.

Project setup

1. Clone / copy source into your repo root. If you already have a monorepo, merge pnpm-workspace.yaml, turbo.json, and the root package.json scripts manually.

2. Install dependencies:

   pnpm install
   

3. Configure environment variables. Copy the example and fill in real values:

   cp .env.example .env
   

   Required variables (minimum):

   DATABASE_URL=postgresql://...
   BETTER_AUTH_SECRET=<random-32-char-string>
   BETTER_AUTH_URL=http://localhost:3000
   AUTH_DISCORD_ID=...
   AUTH_DISCORD_SECRET=...
   NEXT_PUBLIC_API_URL=http://localhost:3000
   

4. Push the database schema:

   pnpm db:push
   

5. Generate the Better Auth schema (must run before first auth usage):

   pnpm --filter @acme/auth generate
   

   This outputs packages/db/src/auth-schema.ts containing Drizzle tables for sessions, users, and accounts.

6. Wire TypeScript paths. Each app extends a base tsconfig from tooling/typescript/. Add to your app's tsconfig.json:

   {
     "extends": "../../tooling/typescript/base.json",
     "compilerOptions": {
       "paths": {
         "@acme/*": ["../../packages/*/src"]
       }
     }
   }
   

7. Start all apps:

   pnpm dev
   

Public API

initAuth

import { initAuth } from "@acme/auth";

function initAuth<TExtraPlugins extends BetterAuthPlugin[] = []>(options: {
  baseUrl: string;
  productionUrl: string;
  secret: string | undefined;
  discordClientId: string;
  discordClientSecret: string;
  extraPlugins?: TExtraPlugins;
}): Auth;

Call once at the server boundary (Next.js route handler, TanStack Start server function) to create a fully configured Better Auth instance with Discord OAuth, Expo support, and an oAuthProxy plugin for redirect handling. The returned Auth object exposes auth.handler for mounting under /api/auth.

appRouter / AppRouter

import { appRouter, type AppRouter } from "@acme/api";
import { createTRPCContext } from "@acme/api";

appRouter is the root tRPC v11 router. Mount it in Next.js via fetchRequestHandler or in TanStack Start via a server function. AppRouter is the type used to create typed clients on every consumer. createTRPCContext builds the context object (session, db) expected by every procedure.

RouterInputs / RouterOutputs

import type { RouterInputs, RouterOutputs } from "@acme/api";

type AllPostsOutput = RouterOutputs["post"]["all"];   // Post[]
type CreatePostInput = RouterInputs["post"]["create"]; // { title: string; content: string }

Inference helpers derived via inferRouterInputs / inferRouterOutputs from @trpc/server. Use them to type component props, form state, and query results without duplicating schema definitions.

Working examples

Scenario - Mounting the tRPC handler in Next.js

Add an API route that forwards all /api/trpc/* requests to the router.

// apps/nextjs/src/app/api/trpc/[trpc]/route.ts
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter, createTRPCContext } from "@acme/api";

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ req }),
  });

export { handler as GET, handler as POST };

Scenario - Querying posts in the Expo app

Use the pre-wired trpc client from ~/utils/api with TanStack Query hooks, exactly as done in the Expo index screen.

// apps/expo/src/app/index.tsx (excerpt)
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import type { RouterOutputs } from "~/utils/api";
import { trpc } from "~/utils/api";

function PostList() {
  const queryClient = useQueryClient();

  const { data: posts } = useQuery(trpc.post.all.queryOptions());

  const { mutate: deletePost } = useMutation(
    trpc.post.delete.mutationOptions({
      async onSuccess() {
        await queryClient.invalidateQueries(trpc.post.all.queryFilter());
      },
    }),
  );

  return posts?.map((post: RouterOutputs["post"]["all"][number]) => (
    <PostCard key={post.id} post={post} onDelete={() => deletePost({ id: post.id })} />
  ));
}

Scenario - Initializing auth in a Next.js API route

// apps/nextjs/src/auth/index.ts
import { initAuth } from "@acme/auth";
import { env } from "~/env";

export const auth = initAuth({
  baseUrl: env.BETTER_AUTH_URL,
  productionUrl: env.NEXT_PUBLIC_APP_URL,
  secret: env.BETTER_AUTH_SECRET,
  discordClientId: env.AUTH_DISCORD_ID,
  discordClientSecret: env.AUTH_DISCORD_SECRET,
});

export type { Session } from "@acme/auth";

// apps/nextjs/src/app/api/auth/[...all]/route.ts
import { auth } from "~/auth";

export const GET = auth.handler;
export const POST = auth.handler;

Scenario - Prefetching in TanStack Start loader

// apps/tanstack-start/src/routes/index.tsx (excerpt)
import { createFileRoute } from "@tanstack/react-router";
import { useTRPC } from "~/lib/trpc";

export const Route = createFileRoute("/")({
  loader: ({ context }) => {
    const { trpc, queryClient } = context;
    void queryClient.prefetchQuery(trpc.post.all.queryOptions());
  },
  component: RouteComponent,
});

function RouteComponent() {
  const trpc = useTRPC();
  // useSuspenseQuery picks up the prefetched data
  return null;
}

File walkthrough

• .github/ - GitHub Actions CI pipeline running lint, typecheck, and build with pnpm caching; Renovate auto-update config.
• .vscode/ - Workspace-level editor settings enabling ESLint and Prettier on save; Expo debugger launch config.
• apps/expo/ - Expo Router entry point (index.ts re-exports expo-router/entry); screen components use NativeWind classes and TanStack Query hooks wired to the shared tRPC client.
• apps/nextjs/ - Next.js 15 App Router project; mounts tRPC under /api/trpc and Better Auth under /api/auth.
• apps/tanstack-start/ - TanStack Start project; uses file-based routing with server-side tRPC prefetching in loaders.
• packages/api/ - Defines and exports appRouter, createTRPCContext, RouterInputs, and RouterOutputs; the single source of truth for all procedures.
• packages/auth/ - Exports initAuth factory and Session / Auth types; encapsulates Better Auth configuration so each app only passes env-specific values.
• packages/db/ - Drizzle schema, migration runner, and Supabase-compatible client; consumed by packages/api and packages/auth.
• packages/ui/ - Shared shadcn-ui components (Button, Input, Field, toast) used in Next.js and TanStack Start.
• tooling/ - Shared ESLint presets, Prettier config, Tailwind theme, and TypeScript base configs extended by every workspace package.
• turbo.json - Declares task pipeline (build, dev, lint, typecheck) with correct dependency ordering.
• pnpm-workspace.yaml - Declares apps/*, packages/*, and tooling/* as workspace members.

Common pitfalls and fixes

• @acme package name collisions - find-and-replace every occurrence of @acme with your org scope before running pnpm install; mismatched names cause silent resolution failures.
• Missing Better Auth schema - forgetting pnpm --filter @acme/auth generate before db:push results in missing tables at runtime; always generate before migrating.
• Expo prebuild required for native modules - better-auth/expo and NativeWind v5 require a native build; running npx expo start without expo prebuild will throw module-not-found errors.
• DATABASE_URL must be a pooler URL on Supabase - direct connections time out on edge runtimes; use the ?pgbouncer=true&connection_limit=1 pooler URL.
• BETTER_AUTH_URL vs productionUrl - baseUrl drives cookie domain in development; productionUrl drives OAuth redirect URIs. Setting them to the same value in production breaks local dev flows.
• TanStack Start is RC - the @tanstack/start package has no stable release yet; pin the exact version from apps/tanstack-start/package.json and do not allow Renovate to auto-bump it.

Vibe-coding prompt template

I have the create-t3-turbo monorepo source under `source/` and a usage guide
at `USAGE.md`. The upstream starter is `create-t3-turbo` (https://github.com/t3-oss/create-t3-turbo).

My existing project is: [describe your project - e.g. "a Next.js 15 app with a
separate React Native app, currently using REST APIs"].

Please help me integrate this source step by step:

1. Read `USAGE.md` fully before writing any code.
2. Identify which apps I should keep (Next.js, TanStack Start, or Expo) and
   which I can delete.
3. Rename all `@acme` references to my org scope `@<my-scope>`.
4. Wire the `packages/api`, `packages/auth`, and `packages/db` into my project,
   merging any existing schema with `source/packages/db/src/schema.ts`.
5. Mount the tRPC handler and Better Auth handler in my chosen web app.
6. Add the Expo tRPC client (`source/apps/expo/src/utils/api.tsx`) to my
   React Native app.
7. Set up all required environment variables listed in `USAGE.md`.
8. Run `pnpm --filter @acme/auth generate` and `pnpm db:push` and confirm the
   migration output.
9. Show me a working `PostList` component using `RouterOutputs` from
   `@<my-scope>/api`.

Use only exports documented in `USAGE.md`. Do not invent new APIs.

License and credit

This starter is released under the MIT License. See source/LICENSE for the full text. Upstream repository: https://github.com/t3-oss/create-t3-turbo.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.

Turborepo High-Performance Monorepo Build System

Automation, Utilities & Developer Tools

무료