& {
+ getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type AppPropsWithLayout = AppProps & {
+ Component: NextPageWithLayout;
+};
+
+const MyApp = (({ Component, pageProps }: AppPropsWithLayout) => {
+ const getLayout =
+ Component.getLayout ?? ((page) => {page});
+
+ return getLayout();
+}) as AppType;
+
+export default trpc.withTRPC(MyApp);
diff --git a/src/pages/api/trpc/[trpc].ts b/src/pages/api/trpc/[trpc].ts
new file mode 100644
index 0000000..deebf35
--- /dev/null
+++ b/src/pages/api/trpc/[trpc].ts
@@ -0,0 +1,35 @@
+/**
+ * This file contains tRPC's HTTP response handler
+ */
+import * as trpcNext from '@trpc/server/adapters/next';
+import { createContext } from '~/server/context';
+import { appRouter } from '~/server/routers/_app';
+
+export default trpcNext.createNextApiHandler({
+ router: appRouter,
+ /**
+ * @link https://trpc.io/docs/context
+ */
+ createContext,
+ /**
+ * @link https://trpc.io/docs/error-handling
+ */
+ onError({ error }) {
+ if (error.code === 'INTERNAL_SERVER_ERROR') {
+ // send to bug reporting
+ console.error('Something went wrong', error);
+ }
+ },
+ /**
+ * Enable query batching
+ */
+ batching: {
+ enabled: true,
+ },
+ /**
+ * @link https://trpc.io/docs/caching#api-response-caching
+ */
+ // responseMeta() {
+ // // ...
+ // },
+});
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
new file mode 100644
index 0000000..8ea35a4
--- /dev/null
+++ b/src/pages/index.tsx
@@ -0,0 +1,157 @@
+import { trpc } from '../utils/trpc';
+import { NextPageWithLayout } from './_app';
+import { inferProcedureInput } from '@trpc/server';
+import Link from 'next/link';
+import { Fragment } from 'react';
+import type { AppRouter } from '~/server/routers/_app';
+
+const IndexPage: NextPageWithLayout = () => {
+ const utils = trpc.useContext();
+ const postsQuery = trpc.post.list.useInfiniteQuery(
+ {
+ limit: 5,
+ },
+ {
+ getPreviousPageParam(lastPage) {
+ return lastPage.nextCursor;
+ },
+ },
+ );
+
+ const addPost = trpc.post.add.useMutation({
+ async onSuccess() {
+ // refetches posts after a post is added
+ await utils.post.list.invalidate();
+ },
+ });
+
+ // prefetch all posts for instant navigation
+ // useEffect(() => {
+ // const allPosts = postsQuery.data?.pages.flatMap((page) => page.items) ?? [];
+ // for (const { id } of allPosts) {
+ // void utils.post.byId.prefetch({ id });
+ // }
+ // }, [postsQuery.data, utils]);
+
+ return (
+ <>
+ Welcome to your tRPC starter!
+
+ If you get stuck, check the docs, write a
+ message in our Discord-channel, or
+ write a message in{' '}
+
+ GitHub Discussions
+
+ .
+
+
+
+ Latest Posts
+ {postsQuery.status === 'loading' && '(loading)'}
+
+
+
+
+ {postsQuery.data?.pages.map((page, index) => (
+
+ {page.items.map((item) => (
+
+ {item.title}
+ View more
+
+ ))}
+
+ ))}
+
+
+
+ Add a Post
+
+
+
+ );
+};
+
+export default IndexPage;
+
+/**
+ * If you want to statically render this page
+ * - Export `appRouter` & `createContext` from [trpc].ts
+ * - Make the `opts` object optional on `createContext()`
+ *
+ * @link https://trpc.io/docs/ssg
+ */
+// export const getStaticProps = async (
+// context: GetStaticPropsContext<{ filter: string }>,
+// ) => {
+// const ssg = createServerSideHelpers({
+// router: appRouter,
+// ctx: await createContext(),
+// });
+//
+// await ssg.post.all.fetch();
+//
+// return {
+// props: {
+// trpcState: ssg.dehydrate(),
+// filter: context.params?.filter ?? 'all',
+// },
+// revalidate: 1,
+// };
+// };
diff --git a/src/pages/post/[id].tsx b/src/pages/post/[id].tsx
new file mode 100644
index 0000000..2f216eb
--- /dev/null
+++ b/src/pages/post/[id].tsx
@@ -0,0 +1,43 @@
+import NextError from 'next/error';
+import { useRouter } from 'next/router';
+import { NextPageWithLayout } from '~/pages/_app';
+import { RouterOutput, trpc } from '~/utils/trpc';
+
+type PostByIdOutput = RouterOutput['post']['byId'];
+
+function PostItem(props: { post: PostByIdOutput }) {
+ const { post } = props;
+ return (
+ <>
+ {post.title}
+ Created {post.createdAt.toLocaleDateString('en-us')}
+
+ {post.text}
+
+ Raw data:
+ {JSON.stringify(post, null, 4)}
+
+ );
+}
+
+const PostViewPage: NextPageWithLayout = () => {
+ const id = useRouter().query.id as string;
+ const postQuery = trpc.post.byId.useQuery({ id });
+
+ if (postQuery.error) {
+ return (
+
+ );
+ }
+
+ if (postQuery.status !== 'success') {
+ return <>Loading...;
+ }
+ const { data } = postQuery;
+ return ;
+};
+
+export default PostViewPage;
diff --git a/src/server/context.ts b/src/server/context.ts
new file mode 100644
index 0000000..e2a3dfb
--- /dev/null
+++ b/src/server/context.ts
@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import * as trpc from '@trpc/server';
+import * as trpcNext from '@trpc/server/adapters/next';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+interface CreateContextOptions {
+ // session: Session | null
+}
+
+/**
+ * Inner function for `createContext` where we create the context.
+ * This is useful for testing when we don't want to mock Next.js' request/response
+ */
+export async function createContextInner(_opts: CreateContextOptions) {
+ return {};
+}
+
+export type Context = trpc.inferAsyncReturnType;
+
+/**
+ * Creates context for an incoming request
+ * @link https://trpc.io/docs/context
+ */
+export async function createContext(
+ opts: trpcNext.CreateNextContextOptions,
+): Promise {
+ // for API-response caching see https://trpc.io/docs/caching
+
+ return await createContextInner({});
+}
diff --git a/src/server/env.js b/src/server/env.js
new file mode 100644
index 0000000..4d2c88c
--- /dev/null
+++ b/src/server/env.js
@@ -0,0 +1,24 @@
+// @ts-check
+/**
+ * This file is included in `/next.config.js` which ensures the app isn't built with invalid env vars.
+ * It has to be a `.js`-file to be imported there.
+ */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { z } = require('zod');
+
+/*eslint sort-keys: "error"*/
+const envSchema = z.object({
+ DATABASE_URL: z.string().url(),
+ NODE_ENV: z.enum(['development', 'test', 'production']),
+});
+
+const env = envSchema.safeParse(process.env);
+
+if (!env.success) {
+ console.error(
+ 'â Invalid environment variables:',
+ JSON.stringify(env.error.format(), null, 4),
+ );
+ process.exit(1);
+}
+module.exports.env = env.data;
diff --git a/src/server/prisma.ts b/src/server/prisma.ts
new file mode 100644
index 0000000..4fce612
--- /dev/null
+++ b/src/server/prisma.ts
@@ -0,0 +1,21 @@
+/**
+ * Instantiates a single instance PrismaClient and save it on the global object.
+ * @link https://www.prisma.io/docs/support/help-articles/nextjs-prisma-client-dev-practices
+ */
+import { env } from './env';
+import { PrismaClient } from '@prisma/client';
+
+const prismaGlobal = global as typeof global & {
+ prisma?: PrismaClient;
+};
+
+export const prisma: PrismaClient =
+ prismaGlobal.prisma ||
+ new PrismaClient({
+ log:
+ env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
+ });
+
+if (env.NODE_ENV !== 'production') {
+ prismaGlobal.prisma = prisma;
+}
diff --git a/src/server/routers/_app.ts b/src/server/routers/_app.ts
new file mode 100644
index 0000000..b1510d6
--- /dev/null
+++ b/src/server/routers/_app.ts
@@ -0,0 +1,13 @@
+/**
+ * This file contains the root router of your tRPC-backend
+ */
+import { publicProcedure, router } from '../trpc';
+import { postRouter } from './post';
+
+export const appRouter = router({
+ healthcheck: publicProcedure.query(() => 'yay!'),
+
+ post: postRouter,
+});
+
+export type AppRouter = typeof appRouter;
diff --git a/src/server/routers/post.test.ts b/src/server/routers/post.test.ts
new file mode 100644
index 0000000..0ba3279
--- /dev/null
+++ b/src/server/routers/post.test.ts
@@ -0,0 +1,21 @@
+/**
+ * Integration test example for the `post` router
+ */
+import { createContextInner } from '../context';
+import { AppRouter, appRouter } from './_app';
+import { inferProcedureInput } from '@trpc/server';
+
+test('add and get post', async () => {
+ const ctx = await createContextInner({});
+ const caller = appRouter.createCaller(ctx);
+
+ const input: inferProcedureInput = {
+ text: 'hello test',
+ title: 'hello test',
+ };
+
+ const post = await caller.post.add(input);
+ const byId = await caller.post.byId({ id: post.id });
+
+ expect(byId).toMatchObject(input);
+});
diff --git a/src/server/routers/post.ts b/src/server/routers/post.ts
new file mode 100644
index 0000000..9a519b7
--- /dev/null
+++ b/src/server/routers/post.ts
@@ -0,0 +1,105 @@
+/**
+ *
+ * This is an example router, you can delete this file and then update `../pages/api/trpc/[trpc].tsx`
+ */
+import { router, publicProcedure } from '../trpc';
+import { Prisma } from '@prisma/client';
+import { TRPCError } from '@trpc/server';
+import { z } from 'zod';
+import { prisma } from '~/server/prisma';
+
+/**
+ * Default selector for Post.
+ * It's important to always explicitly say which fields you want to return in order to not leak extra information
+ * @see https://github.com/prisma/prisma/issues/9353
+ */
+const defaultPostSelect = Prisma.validator()({
+ id: true,
+ title: true,
+ text: true,
+ createdAt: true,
+ updatedAt: true,
+});
+
+export const postRouter = router({
+ list: publicProcedure
+ .input(
+ z.object({
+ limit: z.number().min(1).max(100).nullish(),
+ cursor: z.string().nullish(),
+ }),
+ )
+ .query(async ({ input }) => {
+ /**
+ * For pagination docs you can have a look here
+ * @see https://trpc.io/docs/useInfiniteQuery
+ * @see https://www.prisma.io/docs/concepts/components/prisma-client/pagination
+ */
+
+ const limit = input.limit ?? 50;
+ const { cursor } = input;
+
+ const items = await prisma.post.findMany({
+ select: defaultPostSelect,
+ // get an extra item at the end which we'll use as next cursor
+ take: limit + 1,
+ where: {},
+ cursor: cursor
+ ? {
+ id: cursor,
+ }
+ : undefined,
+ orderBy: {
+ createdAt: 'desc',
+ },
+ });
+ let nextCursor: typeof cursor | undefined = undefined;
+ if (items.length > limit) {
+ // Remove the last item and use it as next cursor
+
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+ const nextItem = items.pop()!;
+ nextCursor = nextItem.id;
+ }
+
+ return {
+ items: items.reverse(),
+ nextCursor,
+ };
+ }),
+ byId: publicProcedure
+ .input(
+ z.object({
+ id: z.string(),
+ }),
+ )
+ .query(async ({ input }) => {
+ const { id } = input;
+ const post = await prisma.post.findUnique({
+ where: { id },
+ select: defaultPostSelect,
+ });
+ if (!post) {
+ throw new TRPCError({
+ code: 'NOT_FOUND',
+ message: `No post with id '${id}'`,
+ });
+ }
+ return post;
+ }),
+ add: publicProcedure
+ .input(
+ z.object({
+ id: z.string().uuid().optional(),
+ title: z.string().min(1).max(32),
+ text: z.string().min(1),
+ }),
+ )
+ .mutation(async ({ input }) => {
+ const post = await prisma.post.create({
+ data: input,
+ select: defaultPostSelect,
+ });
+ return post;
+ }),
+});
diff --git a/src/server/trpc.ts b/src/server/trpc.ts
new file mode 100644
index 0000000..993a8f8
--- /dev/null
+++ b/src/server/trpc.ts
@@ -0,0 +1,48 @@
+/**
+ * This is your entry point to setup the root configuration for tRPC on the server.
+ * - `initTRPC` should only be used once per app.
+ * - We export only the functionality that we use so we can enforce which base procedures should be used
+ *
+ * Learn how to create protected base procedures and other things below:
+ * @see https://trpc.io/docs/v10/router
+ * @see https://trpc.io/docs/v10/procedures
+ */
+
+import { initTRPC } from '@trpc/server';
+import { transformer } from '~/utils/transformer';
+import { Context } from './context';
+
+const t = initTRPC.context().create({
+ /**
+ * @see https://trpc.io/docs/v10/data-transformers
+ */
+ transformer,
+ /**
+ * @see https://trpc.io/docs/v10/error-formatting
+ */
+ errorFormatter({ shape }) {
+ return shape;
+ },
+});
+
+/**
+ * Create a router
+ * @see https://trpc.io/docs/v10/router
+ */
+export const router = t.router;
+
+/**
+ * Create an unprotected procedure
+ * @see https://trpc.io/docs/v10/procedures
+ **/
+export const publicProcedure = t.procedure;
+
+/**
+ * @see https://trpc.io/docs/v10/middlewares
+ */
+export const middleware = t.middleware;
+
+/**
+ * @see https://trpc.io/docs/v10/merging-routers
+ */
+export const mergeRouters = t.mergeRouters;
diff --git a/src/utils/publicRuntimeConfig.ts b/src/utils/publicRuntimeConfig.ts
new file mode 100644
index 0000000..e81dca6
--- /dev/null
+++ b/src/utils/publicRuntimeConfig.ts
@@ -0,0 +1,17 @@
+/**
+ * Dynamic configuration available for the browser and server populated from your `next.config.js`.
+ * Note: requires `ssr: true` or a `getInitialProps` in `_app.tsx`
+ * @link https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration
+ */
+import type * as config from '../../next.config';
+import getConfig from 'next/config';
+
+/**
+ * Inferred type from `publicRuntime` in `next.config.js`
+ */
+type PublicRuntimeConfig = typeof config.publicRuntimeConfig;
+
+const nextConfig = getConfig();
+
+export const publicRuntimeConfig =
+ nextConfig.publicRuntimeConfig as PublicRuntimeConfig;
diff --git a/src/utils/transformer.ts b/src/utils/transformer.ts
new file mode 100644
index 0000000..2383c48
--- /dev/null
+++ b/src/utils/transformer.ts
@@ -0,0 +1,8 @@
+/**
+ * If you need to add transformers for special data types like `Temporal.Instant` or `Temporal.Date`, `Decimal.js`, etc you can do so here.
+ * Make sure to import this file rather than `superjson` directly.
+ * @see https://github.com/blitz-js/superjson#recipes
+ */
+import superjson from 'superjson';
+
+export const transformer = superjson;
diff --git a/src/utils/trpc.ts b/src/utils/trpc.ts
new file mode 100644
index 0000000..767b575
--- /dev/null
+++ b/src/utils/trpc.ts
@@ -0,0 +1,128 @@
+import { httpBatchLink, loggerLink } from '@trpc/client';
+import { createTRPCNext } from '@trpc/next';
+import { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
+import { NextPageContext } from 'next';
+// âšī¸ Type-only import:
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
+import type { AppRouter } from '~/server/routers/_app';
+import { transformer } from './transformer';
+
+function getBaseUrl() {
+ if (typeof window !== 'undefined') {
+ return '';
+ }
+ // reference for vercel.com
+ if (process.env.VERCEL_URL) {
+ return `https://${process.env.VERCEL_URL}`;
+ }
+
+ // // reference for render.com
+ if (process.env.RENDER_INTERNAL_HOSTNAME) {
+ return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
+ }
+
+ // assume localhost
+ return `http://127.0.0.1:${process.env.PORT ?? 3000}`;
+}
+
+/**
+ * Extend `NextPageContext` with meta data that can be picked up by `responseMeta()` when server-side rendering
+ */
+export interface SSRContext extends NextPageContext {
+ /**
+ * Set HTTP Status code
+ * @example
+ * const utils = trpc.useContext();
+ * if (utils.ssrContext) {
+ * utils.ssrContext.status = 404;
+ * }
+ */
+ status?: number;
+}
+
+/**
+ * A set of strongly-typed React hooks from your `AppRouter` type signature with `createReactQueryHooks`.
+ * @link https://trpc.io/docs/react#3-create-trpc-hooks
+ */
+export const trpc = createTRPCNext({
+ config({ ctx }) {
+ /**
+ * If you want to use SSR, you need to use the server's full URL
+ * @link https://trpc.io/docs/ssr
+ */
+ return {
+ /**
+ * @link https://trpc.io/docs/data-transformers
+ */
+ transformer,
+ /**
+ * @link https://trpc.io/docs/links
+ */
+ links: [
+ // adds pretty logs to your console in development and logs errors in production
+ loggerLink({
+ enabled: (opts) =>
+ process.env.NODE_ENV === 'development' ||
+ (opts.direction === 'down' && opts.result instanceof Error),
+ }),
+ httpBatchLink({
+ url: `${getBaseUrl()}/api/trpc`,
+ /**
+ * Set custom request headers on every request from tRPC
+ * @link https://trpc.io/docs/ssr
+ */
+ headers() {
+ if (!ctx?.req?.headers) {
+ return {};
+ }
+ // To use SSR properly, you need to forward the client's headers to the server
+ // This is so you can pass through things like cookies when we're server-side rendering
+
+ const {
+ // If you're using Node 18 before 18.15.0, omit the "connection" header
+ connection: _connection,
+ ...headers
+ } = ctx.req.headers;
+ return headers;
+ },
+ }),
+ ],
+ /**
+ * @link https://tanstack.com/query/v4/docs/react/reference/QueryClient
+ */
+ // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
+ };
+ },
+ /**
+ * @link https://trpc.io/docs/ssr
+ */
+ ssr: true,
+ /**
+ * Set headers or status code when doing SSR
+ */
+ responseMeta(opts) {
+ const ctx = opts.ctx as SSRContext;
+
+ if (ctx.status) {
+ // If HTTP status set, propagate that
+ return {
+ status: ctx.status,
+ };
+ }
+
+ const error = opts.clientErrors[0];
+ if (error) {
+ // Propagate http first error from API calls
+ return {
+ status: error.data?.httpStatus ?? 500,
+ };
+ }
+
+ // for app caching with SSR see https://trpc.io/docs/caching
+
+ return {};
+ },
+});
+
+export type RouterInput = inferRouterInputs;
+export type RouterOutput = inferRouterOutputs;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..51b41ee
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,33 @@
+{
+ "compilerOptions": {
+ "target": "es6",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "strictNullChecks": true,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "noUncheckedIndexedAccess": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "baseUrl": ".",
+ "types": ["vitest/globals"],
+ "paths": {
+ "~/*": ["src/*"]
+ }
+ },
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ "./*.js",
+ "./src/**/*.js"
+ ],
+ "exclude": ["node_modules"]
+}
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..7eaed57
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'url';
+import { configDefaults, defineConfig } from 'vitest/config';
+
+export default defineConfig({
+ test: {
+ globals: true,
+ exclude: [...configDefaults.exclude, '**/playwright/**'],
+ alias: {
+ '~/': fileURLToPath(new URL('./src/', import.meta.url)),
+ },
+ },
+});