feat: add nextjs serverless handler for trpc

apps/nextjs/README.md

@@ -0,0 +1 @@
+TODO

apps/nextjs/next.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+  /** Enables hot reloading for local packages without a build step */
+  transpilePackages: ['@canvas-challenge/api'],
+  /** We already do linting and typechecking as separate tasks in CI */
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
+};
+
+export default config;

apps/nextjs/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@canvas-challenge/nextjs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "pnpm with-env next build",
+    "clean": "git clean -xdf .next .turbo node_modules",
+    "dev": "pnpm with-env next dev",
+    "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "start": "pnpm with-env next start",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env --"
+  },
+  "dependencies": {
+    "@canvas-challenge/api": "workspace:*",
+    "@tanstack/react-query": "^5.8.7",
+    "@tanstack/react-query-devtools": "^5.8.7",
+    "@tanstack/react-query-next-experimental": "5.8.7",
+    "@trpc/client": "next",
+    "@trpc/next": "next",
+    "@trpc/react-query": "next",
+    "@trpc/server": "next",
+    "next": "^14.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "superjson": "2.2.1",
+    "zod": "^3.22.2"
+  },
+  "devDependencies": {
+    "@canvas-challenge/eslint-config": "workspace:*",
+    "@canvas-challenge/prettier-config": "workspace:*",
+    "@canvas-challenge/tailwind-config": "workspace:*",
+    "@canvas-challenge/tsconfig": "workspace:*",
+    "@types/node": "^18.18.13",
+    "@types/react": "^18.2.42",
+    "@types/react-dom": "^18.2.17",
+    "dotenv-cli": "^7.3.0",
+    "eslint": "^8.53.0",
+    "prettier": "^3.1.0",
+    "tailwindcss": "3.3.5",
+    "typescript": "^5.3.3"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@canvas-challenge/eslint-config/base",
+      "@canvas-challenge/eslint-config/nextjs",
+      "@canvas-challenge/eslint-config/react"
+    ]
+  },
+  "prettier": "@canvas-challenge/prettier-config"
+}

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

@@ -0,0 +1,39 @@
+import { type NextRequest } from 'next/server';
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+
+import { appRouter, createTRPCContext } from '@canvas-challenge/api';
+
+export const runtime = 'edge';
+
+function setCorsHeaders(res: Response) {
+  res.headers.set('Access-Control-Allow-Origin', '*');
+  res.headers.set('Access-Control-Request-Method', '*');
+  res.headers.set('Access-Control-Allow-Methods', 'OPTIONS, GET, POST');
+  res.headers.set('Access-Control-Allow-Headers', '*');
+}
+
+export function OPTIONS() {
+  const response = new Response(null, {
+    status: 204,
+  });
+  setCorsHeaders(response);
+  return response;
+}
+
+const handler = async (req: NextRequest) => {
+  const response = await fetchRequestHandler({
+    endpoint: '/api/trpc',
+    // @ts-expect-error testing
+    router: appRouter,
+    req,
+    createContext: () => createTRPCContext(),
+    onError({ error, path }) {
+      console.error(`>>> tRPC Error on '${path}'`, error);
+    },
+  });
+
+  setCorsHeaders(response);
+  return response;
+};
+
+export { handler as GET, handler as POST };

apps/nextjs/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@canvas-challenge/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": [".", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}