DEV Community: Alexis Aguilar

Create a Next.js App Router app with Clerk, Prisma, tRPC, Tanstack Query, Zod, Tailwind

Alexis Aguilar — Fri, 28 Feb 2025 23:37:12 +0000

In this tutorial, you'll build a Next.js App Router app with Clerk, Prisma, tRPC, and many other modern and popular technologies. The app will be a simple blog app that allows you to create and display posts.

The tech stack you'll use:

Next.js App Router
Clerk (Authentication)
Prisma (Database ORM)
Vercel (Deploying your app and creating your database)
Neon (Postgres database)
tRPC (Type-safe API endpoint wrapper)
Tanstack Query (Data fetching and caching)
Zod (Schema validation)
Tailwind (Styling your app)

First, you'll create a Next.js App Router app with Clerk. Then, you'll get your app up and running using Prisma. To do this, you'll create a Neon database in Vercel, deploy your app to Vercel, and build functionality in your app to use Prisma to create and display posts. You can stop here, or you can continue on to add tRPC and zod to your app for enhanced type-safety. You'll set up your tRPC server and create endpoints/procedures for your queries and mutations. Then you'll set up your tRPC client and replace the Prisma queries and mutations with the tRPC procedures using Tanstack Query. Lastly, you'll learn how to create protected procedures using Clerk's authentication context.

Check out the finished product in Clerk's demo repository:
https://github.com/clerk/clerk-nextjs-trpc-prisma

Create a Next.js + Clerk app

To create a Next.js app with Clerk, follow the quickstart in the Clerk Docs.

Or, you can clone the Clerk repository, which is the result of following the quickstart:

gh repo clone clerk/clerk-nextjs-app-quickstart

Create a Clerk application

The Clerk quickstart gets you started with Clerk in keyless mode, which allows you to try Clerk's authentication features in your app without having to create a Clerk account. You will want to create a Clerk account and an application in the Clerk Dashboard. The Clerk Dashboard is where you, as the application owner, can manage your application's settings, users, and organizations. For example, if you want to enable phone number authentication, multi-factor authentication, social providers like Google, delete users, or create organizations, you can do all of this and more in the Clerk Dashboard.

Set your Clerk API keys

You need to set your Clerk API keys in your app so that your app can use the configuration settings that you set in the Clerk Dashboard.

In the Clerk Dashboard, navigate to the API keys page.
In the Quick Copy section, copy your Clerk Publishable and Secret Keys.
In your .env file, set the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY environment variables to the values you copied from the Clerk Dashboard.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}}
CLERK_SECRET_KEY={{secret_key}}

Install dependencies and test your app

While developing, it's best practice to keep your project running so that you can test your changes as you work. So, let's make sure the app is working as expected.

Run the following commands to install the dependencies and start the development server:
```
npm install
npm run dev
```
Visit your app at http://localhost:3000. It should render a new Next.js app, but with a "Sign in" and "Sign up" button in the top right corner.
Select the "Sign in" button. You should be redirected to your Clerk Account Portal sign-in page, which renders Clerk's <SignIn /> component. The <SignIn /> component will look different depending on the configuration of your Clerk instance.
Sign in to your Clerk application.
You should be redirected back to your app, where you should see Clerk's <UserButton /> component in the top right corner.

Install Prisma ORM

Run the following commands to install Prisma and the necessary dependencies:

npm install prisma --save-dev
npm install tsx --save-dev
npm install @prisma/extension-accelerate

Then run npx prisma init to initialize Prisma in your project.

npx prisma init

This will create a new prisma directory in your project, with a schema.prisma file inside of it. The schema.prisma file is where you will define your database models.

The prisma init command will also update your .env file include a DATABASE_URL environment variable. This environment variable is used to store your database connection string. If you have a database already, great! If not, let's spin one up using Vercel.

Deploy to Vercel

Before you can create a database using Vercel, you first need to deploy your app to Vercel.

Create a repository on GitHub for your app. If you're not sure how to do this, follow the GitHub docs.
Go to Vercel and add a new project. While going through the process, select the Environment Variables dropdown, and add your Clerk Publishable and Secret Keys.
Select Deploy to deploy your app to Vercel.
Select the Settings tab.
In the left sidenav, select Functions.
Under Function Region, there should be a tag next to one of the continents. Select the continent where the tag is, and the dropdown will reveal what regions on Vercel's network that your Vercel Functions will execute in. Take note of the region. Keep the Vercel dashboard open.

Spin up a database

While still in Vercel's dashboard, select the Storage tab.
Select Create Database.
Select Neon as the database provider and select Continue.
Select the Region dropdown and select the region you noted earlier. You want your database's region to match your Vercel Functions region for optimal performance.
Select Continue.
When connecting to the database, select Advanced options and under Environment Variables Prefix, enter “DATABASE” so that the environment variable is “DATABASE_URL”. Then select Connect.
Copy the environment variables and add them to your .env file. They should look something like this:

# Recommended for most uses
DATABASE_URL=***

# For uses requiring a connection without pgbouncer
DATABASE_URL_UNPOOLED=***

# Parameters for constructing your own connection string
PGHOST=***
PGHOST_UNPOOLED=***
PGUSER=***
PGDATABASE=***
PGPASSWORD=***

# Parameters for Vercel Postgres Templates
POSTGRES_URL=***
POSTGRES_URL_NON_POOLING=***
POSTGRES_USER=***
POSTGRES_HOST=***
POSTGRES_PASSWORD=***
POSTGRES_DATABASE=***
POSTGRES_URL_NO_SSL=***
POSTGRES_PRISMA_URL=***

Update your Vercel environment variables

When you add new environment variables to your .env file, don't forget to update your Vercel environment variables.

In Vercel's dashboard, select the Settings tab.
In the left sidenav, select Environment Variables.
Add the new environment variables to your Vercel environment variables. You don't have to copy and paste them one by one; you can copy the entire block of code and paste it into Vercel.
Select Save.

Create a database model

Now that you're database is created and connected to your app, it's time to create a database model. Your app is based on posts, so add the following Post model to your schema.prisma file:

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  authorId  String
}

Update your database schema

Run the following command to apply your schema to your database:

npx prisma migrate dev --name init

This creates an initial migration creating the Post table and applies that migration to your database.

Set up Prisma Client

Now it's time to set up the Prisma Client and connect it to your database.

Run the following command to create a new lib directory and add a prisma.ts file to it.

mkdir -p lib && touch lib/prisma.ts

Now, add the following code to your lib/prisma.ts file:

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

const globalForPrisma = global as unknown as { prisma: typeof prisma }

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

export default prisma

This file creates a Prisma Client and attaches it to the global object so that only one instance of the client is created in your application. This helps resolve issues with hot reloading that can occur when using Prisma ORM with Next.js in development mode.

Query your database

Now that all of the set up is complete, it's time to start building out your app!

Let's start with your homepage. Add the following code to your app/page.tsx file:

import prisma from '@/lib/prisma' // Import the Prisma Client
import Link from 'next/link'

export default async function Page() {
  const posts = await prisma.post.findMany() // Query the `Post` model for all posts

  // Display the posts on the homepage
  return (
    <div className="min-h-screen flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8">Posts</h1>
      <ul className="max-w-2xl space-y-4 mb-8">
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/posts/${post.id}`} className="hover:underline">
              <span className="font-semibold">{post.title}</span>
              <span className="text-sm ml-2">by {post.authorId}</span>
            </Link>
          </li>
        ))}
      </ul>
      <Link
        href="/posts/create"
        className="inline-block border-2 border-current text-current px-4 py-2 rounded-lg hover:scale-[0.98] transition-all"
      >
        Create New Post
      </Link>
    </div>
  )
}

This code fetches all posts from your database and displays them on the homepage, showing the title and author ID for each post. It uses the prisma.post.findMany() method, which is a Prisma Client method that retrieves all records from the database.

That shows how to query for all records, but how do you query for a single record?

Query a single record

Let's add a page that displays a single post.

In app/, create a new posts directory.
In posts/, create an [id] directory.
In posts/[id], add a page.tsx file.

Add the following code to your app/posts/[id]/page.tsx file:

import prisma from '@/lib/prisma'

export default async function Post({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const post = await prisma.post.findUnique({
    where: { id: parseInt(id) },
  })

  if (!post) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center -mt-16">
        <div>No post found.</div>
      </div>
    )
  }

  return (
    <div className="min-h-screen flex flex-col items-center justify-center -mt-16">
      {post && (
        <article className="w-full max-w-2xl">
          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-2 ">{post.title}</h1>
          <p className="text-sm sm:text-base">by {post.authorId}</p>
          <div className="prose prose-gray prose-sm sm:prose-base lg:prose-lg mt-4 sm:mt-8">
            {post.content || 'No content available.'}
          </div>
        </article>
      )}
    </div>
  )
}

This code uses the URL parameters to get the post's ID, and then fetches it from your database and displays it on the page, showing the title, author ID, and content. It uses the prisma.post.findUnique() method, which is a Prisma Client method that retrieves a single record from the database.

Test the page by navigating to a post's URL. For example, http://localhost:3000/posts/1. For now, it should show a "No post found" message because you haven't created any posts yet. Let's add a way to create posts.

Create a new post

In app/posts/, create a new create directory.
In posts/create, add a page.tsx file.

Add the following code to your app/posts/create/page.tsx file:

import Form from 'next/form'
import prisma from '@/lib/prisma'
import { redirect } from 'next/navigation'
import { SignInButton, useAuth } from '@clerk/nextjs'
import { revalidatePath } from 'next/cache'
import { auth } from '@clerk/nextjs/server'

export default async function NewPost() {
  const { userId } = await auth()

  // Protect this page from unauthenticated users
  if (!userId) {
    return (
      <div className="flex flex-col items-center justify-center h-[calc(100vh-4rem)] space-y-4">
        <p>You must be signed in to create a post.</p>
        <SignInButton>
          <button
            type="submit"
            className="inline-block border-2 border-current text-current px-4 py-2 rounded-lg hover:scale-[0.98] transition-all cursor-pointer"
          >
            Sign in
          </button>
        </SignInButton>
      </div>
    )
  }

  async function createPost(formData: FormData) {
    'use server'

    // Type check
    if (!userId) return

    const title = formData.get('title') as string
    const content = formData.get('content') as string

    await prisma.post.create({
      data: {
        title,
        content,
        authorId: userId,
      },
    })

    revalidatePath('/')
    redirect('/')
  }

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-6">Create New Post</h1>
      <Form action={createPost} className="space-y-6">
        <div>
          <label htmlFor="title" className="block text-lg mb-2">
            Title
          </label>
          <input
            type="text"
            id="title"
            name="title"
            placeholder="Enter your post title"
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label htmlFor="content" className="block text-lg mb-2">
            Content
          </label>
          <textarea
            id="content"
            name="content"
            placeholder="Write your post content here..."
            rows={6}
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <button
          type="submit"
          className="inline-block border-2 border-current text-current px-4 py-2 rounded-lg hover:scale-[0.98] transition-all w-full"
        >
          Create Post
        </button>
      </Form>
    </div>
  )
}

This code uses Clerk's auth() helper to get the user's ID. It is a helper that is specific to Next.js App Router, and it provides authentication information on the server side.

If there is no user ID, the user is not signed in, so a sign in button is displayed.
If the user is signed in, the "Create New Post" form is displayed. When the form is submitted, the createPost() function is called. This function creates a new post in the database using the prisma.post.create() method, which is a Prisma Client method that creates a new record in the database.

Test the page by navigating to the /posts/create page. For example, http://localhost:3000/posts/create. Then create a new post. You should be redirected to the homepage, where you should see the new post.

Now, you've got a Next.js, Clerk, and Prisma app that can create and display posts. You could stop here and have a perfectly functional app. But let's take it a step further and add tRPC to your app for type-safe API endpoints.

Install tRPC, `@tanstack/react-query`, and `zod`

tRPC is a wrapper around your API endpoints to make them type-safe and easier to use.

zod is a schema validation library, also used to enhance your app's type safety.

@tanstack/react-query is a library for data fetching and caching.

Run the following command to install tRPC, @tanstack/react-query, and zod:

npm i @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod

At the time of writing, clerk-next-app includes React 19 as a peer dependency, but @tanstack/react-query does not. So, you'll need to use the --force flag when running the command above.
npm i @trpc/server @trpc/client @trpc/react-query @tanstack/react-query --force

Create a tRPC server

Now, you'll configure tRPC for your app.

In app/, create a server directory.
In app/server/, create a new trpc.ts file.
In trpc.ts, add the following code:

import { initTRPC } from '@trpc/server'

const t = initTRPC.create()

export const router = t.router
export const publicProcedure = t.procedure

This initializes a tRPC server and creates a router and publicProcedure that you can use to create your API endpoints.

Create a tRPC endpoint

Now, you'll create a router that's going to have your procedures on it.

In app/server/, create a routers directory.
In routers/, create a new post.ts file.
In post.ts, add the following code:

import { publicProcedure, router } from '../trpc'
import prisma from '@/lib/prisma'

export const postRouter = router({
  getPosts: publicProcedure.query(async () => {
    return await prisma.post.findMany()
  }),
})

export type PostRouter = typeof postRouter

This code creates a router with a getPosts procedure that uses the tRPC publicProcedure you created in the previous step to make a query using tRPC's query method. The query then uses Prisma to query the Post model in your database. That part should look familiar, because you've used prisma.post.findMany() in your app earlier!

This is the file where you'll add all of your queries and mutations, so you'll probably update this file frequently as you build out your app.

Connect the tRPC router to your App Router

Now you need to connect the tRPC router to your App Router.

In app/, create an api directory.
In app/api/, create a trpc directory.
In app/api/trpc/, create a [trpc] directory. This will capture whatever the user requests from the tRPC router, such as getPosts, and set it as one of the route parameters.
In app/api/trpc/[trpc], create a route.ts file, which will be the route handler for your tRPC routers.
In route.ts, add the following code:

import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
import { postRouter } from '@/app/server/routers/posts'

const handler = (req: Request) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    req,
    router: postRouter,
    createContext: () => ({}),
  })

export { handler as GET, handler as POST }

This uses tRPC's fetch adapter to handle Next.js's request handling.

At this point, your API endpoint should be working. You can test it by navigating to http://localhost:3000/api/trpc/getPosts. You should see a JSON response with the posts from your database.

So far, your app is entirely server-side and static. You need a way to mutate data, which is where @tanstack/react-query comes in. But to use tRPC with @tanstack/react-query, you need to create a tRPC client.

Create a tRPC client

In app/, create a _trpc directory. The underscore convention is used to indicate that this should not be used as a route.
In _trpc/, create a client.ts file.
In client.ts, add the following code:

'use client'

import { createTRPCReact } from '@trpc/react-query'

import type { PostRouter } from '@/app/server/routers/posts'

export const trpc = createTRPCReact<PostRouter>({})

Create a Tanstack Query + tRPC provider

To use Tanstack Query and tRPC together, you need to create a provider that provides both the Tanstack Query client and the tRPC client to your app.

In app/_trpc/, create a Provider.tsx file.
In Provider.tsx, add the following code:

'use client'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { httpBatchLink } from '@trpc/client'
import React, { useState } from 'react'

import { trpc } from './client'

export default function Provider({ children }: { children: React.ReactNode }) {
  // Create a Tanstack Query client
  const [queryClient] = useState(() => new QueryClient({}))
  // Create a tRPC client
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
    })
  )
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  )
}

This creates a Tanstack Query client and a tRPC client, and then provides them to your app using the trpc.Provider and QueryClientProvider components.

Now, wrap your app in the provider. In app/layout.tsx, add the following code:

import type { Metadata } from 'next'
import { ClerkProvider, SignInButton, SignUpButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import { Geist, Geist_Mono } from 'next/font/google'
import './globals.css'
import TRPCProvider from '@/app/_trpc/Provider'

const geistSans = Geist({
  variable: '--font-geist-sans',
  subsets: ['latin'],
})

const geistMono = Geist_Mono({
  variable: '--font-geist-mono',
  subsets: ['latin'],
})

export const metadata: Metadata = {
  title: 'Clerk Next.js Quickstart',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <ClerkProvider>
      <TRPCProvider>
        <html lang="en">
          <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
            <header className="flex justify-end items-center p-4 gap-4 h-16">
              <SignedOut>
                <SignInButton />
                <SignUpButton />
              </SignedOut>
              <SignedIn>
                <UserButton />
              </SignedIn>
            </header>
            {children}
          </body>
        </html>
      </TRPCProvider>
    </ClerkProvider>
  )
}

This imports the provider as TRPCProvider, and then wraps your app in it. It's very important that <ClerkProvider> is wrapped around <TRPCProvider>, and not the other way around, because the <TRPCProvider> needs to have access to the Clerk authentication context.

Use the tRPC client to fetch and mutate data

Now, you can use the trpc client to fetch and mutate data in your app! Let's update the functionality of your app to use the trpc client.

In app/, create a components directory.
In components/, create a new Posts.tsx file.
In Posts.tsx, add the following code:

'use client'

import Link from 'next/link'
import { trpc } from '../_trpc/client'

export default function Posts() {
  // Use the `getPosts` query from the TRPC client
  const getPosts = trpc.getPosts.useQuery()
  const { isLoading, data } = getPosts

  return (
    <ul className="max-w-2xl space-y-4 mb-8">
      {isLoading && <div>Loading...</div>}
      {data?.map((post) => (
        <li key={post.id}>
          <Link href={`/posts/${post.id}`} className="hover:underline">
            <span className="font-semibold">{post.title}</span>
            <span className="text-sm ml-2">by {post.authorId}</span>
          </Link>
        </li>
      ))}
    </ul>
  )
}

Then, update the homepage to use the <Posts /> component:

import Link from 'next/link'
import Posts from './components/Posts'

export default async function Page() {
  return (
    <div className="min-h-screen flex flex-col items-center justify-center -mt-16">
      <h1 className="text-4xl font-bold mb-8">Posts</h1>
      <Posts />
      <Link
        href="/posts/create"
        className="inline-block border-2 border-current text-current px-4 py-2 rounded-lg hover:scale-[0.98] transition-all"
      >
        Create New Post
      </Link>
    </div>
  )
}

Notice that the prisma.post.findMany() function is no longer used. Instead, your app is using trpc.getPosts.useQuery() in the <Posts /> component to fetch the posts, because remember, you created a tRPC postRouter with a getPosts procedure that uses prisma.post.findMany(). So now, you don't need to use Prisma directly, you can use tRPC in order to have type safety and a better developer experience. Let's update the rest of your app to use tRPC.

Of course, let's test and make sure the new logic is working. Navigate to the homepage and make sure you can see the posts.

Once you've verified everything's working, let's go back to your postRouter and create more procedures to handle your other queries.

Use tRPC to fetch a single post

In app/server/routers/posts.ts, add the following code:

import { publicProcedure, router } from '../trpc'
import prisma from '@/lib/prisma'

export const postRouter = router({
  getPost: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input }) => {
    return await prisma.post.findUnique({
      where: { id: parseInt(input.id) },
    })
  }),
  getPosts: publicProcedure.query(async () => {
    return await prisma.post.findMany()
  }),
})

export type PostRouter = typeof postRouter

This adds a getPost procedure to fetch a single post by ID.

In app/posts/[id]/page.tsx, add the following code:

'use client'

import { trpc } from '@/app/_trpc/client'
import { use } from 'react'

export default function Post({ params }: { params: Promise<{ id: string }> }) {
  // Params are wrapped in a promise, so we need to unwrap them using React's `use()` hook
  const unwrappedParams = use(params)
  const { id } = unwrappedParams
  // Use the `getPost` query from the TRPC client
  const post = trpc.getPost.useQuery({ id })

  if (!post.data) {
    return (
      <div className="min-h-screen flex flex-col items-center justify-center -mt-16">
        <div>No post found.</div>
      </div>
    )
  }

  const { title, authorId, content } = post.data

  return (
    <div className="min-h-screen flex flex-col items-center justify-center -mt-16">
      {post && (
        <article className="w-full max-w-2xl">
          <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-2 ">{title}</h1>
          <p className="text-sm sm:text-base">by {authorId}</p>
          <div className="prose prose-gray prose-sm sm:prose-base lg:prose-lg mt-4 sm:mt-8">
            {content || 'No content available.'}
          </div>
        </article>
      )}
    </div>
  )
}

This replaces prisma.post.findUnique() with trpc.getPost.useQuery(). Because tRPC is using Tanstack Query to fetch the data, the query result includes the data and other states, such as loading and error. You can learn more about in the Tanstack Query docs.

And before you go any further, test to make sure the new logic is working. Navigate to a post's URL, such as http://localhost:3000/posts/1, and make sure you can see the post.

If that's working, let's go back to your postRouter and add the last procedure you need to handle your create post functionality.

Use tRPC to create a new post

In app/server/routers/posts.ts, add the following code:

import { publicProcedure, router } from '../trpc'
import prisma from '@/lib/prisma'
import { z } from 'zod'

const postSchema = z.object({
  title: z.string(),
  content: z.string(),
  authorId: z.string(),
})

export const postRouter = router({
  getPost: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input }) => {
    return await prisma.post.findUnique({
      where: { id: parseInt(input.id) },
    })
  }),
  getPosts: publicProcedure.query(async () => {
    return await prisma.post.findMany()
  }),
  // Protected procedure that requires a user to be signed in
  createPosts: publicProcedure.input(postSchema).mutation(async ({ input }) => {
    return await prisma.post.create({
      data: {
        title: input.title,
        content: input.content,
        authorId: input.authorId,
      },
    })
  }),
})

export type PostRouter = typeof postRouter

This adds a createPosts procedure that creates a new post.

In app/posts/create/page.tsx, add the following code:

'use client'

import { redirect } from 'next/navigation'
import { SignInButton, useAuth } from '@clerk/nextjs'
import { trpc } from '@/app/_trpc/client'
import { useState } from 'react'

export default function NewPost() {
  const [title, setTitle] = useState('')
  const [content, setContent] = useState('')
  // Use Clerk's `useAuth()` hook to get the user's ID
  const { userId, isLoaded } = useAuth()
  // Use the `createPosts` mutation from the TRPC client
  const createPostMutation = trpc.createPosts.useMutation()

  // Check if Clerk is loaded
  if (!isLoaded) {
    return (
      <div className="flex flex-col items-center justify-center h-[calc(100vh-4rem)] space-y-4">
        <div>Loading...</div>
      </div>
    )
  }

  // Protect this page from unauthenticated users
  if (!userId) {
    return (
      <div className="flex flex-col items-center justify-center h-[calc(100vh-4rem)] space-y-4">
        <p>You must be signed in to create a post.</p>
        <SignInButton>
          <button
            type="submit"
            className="inline-block border-2 border-current text-current px-4 py-2 rounded-lg hover:scale-[0.98] transition-all cursor-pointer"
          >
            Sign in
          </button>
        </SignInButton>
      </div>
    )
  }

  // Handle form submission
  async function createPost(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()

    createPostMutation.mutate({
      title,
      content,
      authorId: userId as string,
    })

    redirect('/')
  }

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-6">Create New Post</h1>
      <form onSubmit={createPost} className="space-y-6">
        <div>
          <label htmlFor="title" className="block text-lg mb-2">
            Title
          </label>
          <input
            type="text"
            id="title"
            name="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            placeholder="Enter your post title"
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <div>
          <label htmlFor="content" className="block text-lg mb-2">
            Content
          </label>
          <textarea
            id="content"
            name="content"
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder="Write your post content here..."
            rows={6}
            className="w-full px-4 py-2 border rounded-lg"
          />
        </div>
        <button
          type="submit"
          className="inline-block border-2 border-current text-current px-4 py-2 rounded-lg hover:scale-[0.98] transition-all w-full"
        >
          Create Post
        </button>
      </form>
    </div>
  )
}

This updates a few things. First, it turns this page into a client component, because Tanstack Query and the tRPC client are client-side. So now, the Server Action that you created before can no longer be used. Instead, the form data is handled using state. When the form is submitted, the createPost() function no longer uses prisma.post.create(), but instead uses trpc.createPosts.useMutation() from the tRPC client. Also, because the page is now a client component, Clerk's auth() helper no longer works, so it's replaced with Clerk's useAuth() hook. This introduces the benefit of having access to Clerk's loading state, so a loading UI is added.

And don't forget, test your changes. Navigate to the create post page, such as http://localhost:3000/posts/create, and make sure you can create a new post.

Once you've confirmed everything's working, you're almost done...

Create protected procedures (optional)

In many applications, it's essential to restrict access to certain routes based on user authentication status. This ensures that sensitive data and functionality are only accessible to authorized users.

The benefit of using Clerk with tRPC is that you can create protected procedures using Clerk's authentication context. Clerk's Auth object includes important authentication information like the current user's session ID, user ID, and organization ID. It also contains methods to check for the current user's permissions and to retrieve their session token. You can use the Auth object to access the user's authentication information in your tRPC queries.

For part of the tutorial, see the Clerk docs to learn how to create protected procedures.

Finished!

At this point, you've got a fully functional app for creating and displaying posts. You can now add more features to your app, such as updating and deleting posts, adding comments, storing more author information from the Clerk User object, and more.

I attended my first tech conference... before even getting my first tech job 😳

Alexis Aguilar — Mon, 24 Apr 2023 21:11:11 +0000

*Scratch record*
Yup... that's me.
You're probably wondering how an unemployed, recent boot camp graduate got to attend a tech conference.
Let's rewind a bit.

I'm Alexis Aguilar and I transitioned from wildlife biology and veterinary medicine to full stack web development. I wasn't always a programmer, but I have always been a nerd. So when I first saw my console.log("Hello world!") appear on the DOM, a fire was ignited in me that I had never felt before.

Recently, I was blessed with the opportunity to attend React Miami Conference 2023 for free. As a career changer and recent boot camp graduate, and as a Woman in tech who also has Autism, I believe sharing my unique perspective could give insight to someone who shares any one of those aspects. Especially if they're about to attend their first conference as well!

Getting sponsored

It all started back in 2022 when I was learning full stack web development through the 100Devs apprenticeship. I have always embraced vulnerability, because it is through authenticity and sharing our experiences that we may form genuine connections with each other. And what else is the purpose of the human experience if it's not connection?

My favourite medium for expressing that vulnerability has always been writing. Journals, tumblr posts, journaling and notes apps, social media; I have always found it easy to express myself through writing. My 100Devs journey was no different as I began sharing my experiences on Twitter and through blogs. I talked about mental health, I vented my frustrations and challenges, and I developed and built in public.

Through creating content, I began to get noticed.

Michael Liendo, Senior Developer Advocate for AWS AppSync, reached out to me on Twitter, praised my courage for building in public, and offered his support anytime I needed it. Later, in January of 2023, I noticed one of Michael's tweets where he mentioned he was getting to speak at React Miami conference! I visit Miami quite frequently - like, more than once a month - so I reached out about chatting in person. But, I let him know about my unemployment situation and how our meetup wouldn't be able to be at the conference. (Conferences are expensive!!!) It was then that Michael revealed he wanted to give back to his community and sponsor someone for the conference. We decided a fair trade would be this: I could be the candidate for React Miami if I could show him the spot for the best tacos in Miami.
It was an easy deal 🌮

Getting involved before the conference

As we all know, networking is powerful. Showing people who you are outside of your professional skills is vital to making a connection. That's why most times, there are multiple interviews for a position; before bringing you onto a team, they want to gauge the big picture that is You.

Conferences are not just a way to get exposed to new information, they are also used a means for networking! But networking doesn't come to easy to most people; especially those challenged by mental health diagnoses or other disabilities. Personally, I have BPD and Autism, which means communication and socializing requires a lot of work on my end.

As the conference began looming closer, Michael sent me my ticket. And the nerves set in.

I had never been to a conference before. I'm a recent boot camp graduate and unemployed. What value could I provide? What would I even talk about with professionals? How would I even approach them? I became flooded with anxiety and fear.

But I knew this conference could be a turning point for me in finding a job, so I just kept reminding myself: change requires being uncomfortable, and if I want to change my life, I have to put in the dedication and #WERK 💅

So, I began getting involved.

I figured, if I started making connections before the conference, it'd be easier to initiate meeting them in person. I joined the first Twitter space for React Miami conference, hosted by one of their sponsors, JavaScript Jam. The co-organizer, Michelle Bakels, as well as conference speakers and conference attendees were in the space.

Listening wasn't enough though; I wanted to be noticed. So, I listened carefully, thought about how I could provide value to the space, and I mustered the courage to speak! I talked about my sponsorship and about how, as a newer dev, I was nervous about joining conversations because they may be too advanced for me or that I wouldn't have value to provide for anyone there. I also asked for advice on how to initiate conversations and advice for first time conference attendees.

I'm so glad I spoke in that first Twitter space. Everyone that spoke to me was energetic, kind, welcoming, and gave great advice. I gained new followers and I began building on these new connections.

I continued joining and speaking in Twitter spaces held by folx in the React/JavaScript community, such as Dan Jutan, Theo Browne, and Jacob MG Evans. I started joining Twitch streams as well, hosted by folx in tech such as Dev Agrawal, Jenn Junod, and Scott Steinlage. Through these communities, I met more and more people in tech, and a lot of them were attending React Miami!

One of the last ideas that I had for getting involved was to do something memorable. This could have been a stream or a Twitter space, but for me, I am a community manager and my skills involve event organizing; I love bringing people together. Michael wanted me to show him the best spot for taco's in Miami, so why not share that spot with others?

I began reaching out to my new connections and organized a lunch group for enjoying the ~yummiest tacos~ in Miami.

The biggest takeaway was that I began forming connections before the conference. I wanted to become recognizable in the developer community, and I knew I could start with Twitter. I showed my personality through speaking in different spaces. I supported my new friends by attending their spaces and streams. I organized a group event. I got involved.

Attending the conference

April 20th had finally arrived. It was 8:00 AM. I was shaking in my little boots.

It took me until 11:15 AM to swallow my nerves and finally head to the conference. But I did it.

When I arrived, it was exactly right when lunch was starting. So I gathered my lunch group, and we headed to Bodega Taqueria y Tequila in South Beach, Miami. Delicious tacos, margaritas, and casual lunch conversations was the perfect way for someone like me to start my conference experience. Most of the nerves washed away by the time we headed back to the conference, and I had a solid group of friends to now have as a "home base".

During the two days of React Miami, all of the talks were recorded and I kept losing track of time as I enjoyed meeting so many new people. So, I spent most of my time networking instead of watching the talks 🙈

I had been so nervous wondering "How do I initiate conversations?" but it really wasn't as big of a deal as I thought it would be. If I knew one person in a group, I'd walk up next to them and smile at them, and then start listening to the convo. Usually, I'd either get introduced by the person I knew, or someone I didn't know would initiate the group introductions by introducing themselves to me.

"How do I provide value?" was just imposter syndrome talking. When people asked me what I do for work, I'd tell them that I'm unemployed, and that usually would lead into my "pitch" where I'd tell them my background, my experience, and what I'm looking for. Surprisingly, some were quick to offer their advice or offer opportunities!
Most conversations were about people's work or were pretty casual, chatting about people's home lives or about Miami. If a conversation involved more advanced topics, I'd listen and jot down a few things in my phone notes for future me to take a look at. Not once did I feel uncomfortable or unwelcome.

My biggest takeaways/tips

Put yourself out there!

People are at a conference to network. It seems scary, but it's really not a big deal to just walk up to a group and start listening. Either someone will initiate the introductions, or you can wait until they're done speaking to say something like, "Hey guys, hope I didn't interrupt! I'm [Name] and I'm [give your spiel]." Everyone is there is learn and to make new connections.

In my case, where I felt like I couldn't provide value, it didn't matter. People understood that I was newer to the tech scene, and they had been there before. Everyone was very supportive and welcoming, and I even got offered some cool opportunities!

Swap social media's and send follow ups

I definitely forgot to do this with some people I met, so I'm saying this as a reminder: when you have a conversation with someone, grab their Twitter and LinkedIn! And for me, if it was someone I haven't spoken to before, I wrote down their name, company, and what we talked about in my notes so that I could send a follow up after the conference. I like expressing gratitude, so I make sure I let my new friends know that I'm grateful for our chats 😊

Take pictures

I didn't get to take pics with as many people as I wanted to, but I definitely got quite a few! See some of mine here on the twittersphere. 🥰

Pictures are a great way for strengthening your connections and sharing that experience with everyone else. Plus, they're great memories that you can bring up at the conference next year 😉

Bring water

I'm not sure if I missed it, but the lounge fridges only had soda's and I couldn't find any water bottles. I definitely regret not bringing my yeti!

Bring a fidget

As a person with Autism, it's helpful for me to have tangible objects in different situations. When I'm sad, I like to stroke something such as my hair or a stuffed animal or my cat. When I'm stressed, I like to have a fidget that I can either squeeze or toy with.

I believe even those who are neurotypical can benefit from something similar. I remember when I used to go to parties in college, I always needed a cup in my hand to feel comfortable. Even if it's your water or a coffee or a stress ball, having something to hold onto is grounding.

Go to the after parties

When the two conference days were over, I was physically and socially exhausted. I also had a lot of events happening in the evenings and nights, so I just felt like I did not have time to attend the events outside of the conference.

But I wanted to end the conference on a high note, and leave with warm goodbyes. So I cancelled my Friday evening event, and was late to my Friday night event, and went to the React Miami after party. And it was totally worth it.

I got to meet people I didn't even see at the conference. The drinks were flowing (mine was a sprite LOL), people were dancing, and most conversations were super casual. I got to talk about music that I like, anime that I watch, and video games that I play. It was a great way to talk to everyone in a non-professional environment, and it was actually super fun. I didn't leave until 11:00 PM!

See some of the after party pictures here.

Home at last

Overall, I can only attempt at expressing my gratitude for being able to attend React Miami Conference. Special thanks to Michael Liendo for blessing me with the opportunity and introducing me to amazing folx in tech. Every single person that I talked to was kind and supportive. I made so many new connections, learned new things, and gained some new opportunities.

To those out there who may not be able to afford a tech conference, we live in a society. No seriously, social media is free, use it to your advantage. Share your thoughts and experiences, grow your brand, connect, network, build.

I'm happy to say that I'm proud of myself for stepping up and putting myself out there. I have now grown my brand and am excited to see where my career goes. Maybe another conference is in the near future... 🔮