{isLoading ? (
{showOrgSwitcher && (
Loading articles...
) : (
articles.map((article) => (
{article.title || 'Untitled'}
{new Date(article.updated_at).toLocaleDateString()}
))
)}
Loading...
: children}
Posts
{posts.map((post) => (
{post.title}
by {post.authorId}
))}
Create New Post
No post found.
{post && (
)}
)
}
```
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
Next you'll create a page that allows users to create new posts. This page uses Clerk's [`auth()`](https://clerk.com/docs/references/nextjs/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()`](https://www.prisma.io/docs/orm/reference/prisma-client-reference?utm_source=docs#create) method, which is a Prisma Client method that creates a new record in the database.
Create the `app/posts/create/page.tsx` file and paste in the following code:
```tsx {{ filename: 'app/posts/create/page.tsx' }}
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 (
{post.title}
by {post.authorId}
{post.content || 'No content available.'}
You must be signed in to create a post.
Create New Post
{isLoading &&
)
}
```
Then, update the homepage to use the `Loading...
}
{data?.map((post) => (
{post.title}
by {post.authorId}
))}
Posts
{posts.map((post) => (
{post.title}
by {post.authorId}
))}
No post found.
{post && (
)}
)
}
'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 { id } = use(params)
// Use the `getPost` query from the TRPC client
const { data: post, isLoading } = trpc.getPost.useQuery({ id })
return (
{post.title}
by {post.authorId}
{post.content || 'No content available.'}
{isLoading &&
)}
)
}
```
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](https://tanstack.com/query/v4/docs/framework/react/guides/queries#:~:text=throughout%20your%20application.-,The%20query%20result,-returned%20by%20useQuery).
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:
```ts {{ filename: 'app/server/routers/posts.ts', ins: [[5, 9], [20, 29]] }}
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`, replace the existing code with the following:
```tsx {{ filename: 'app/posts/create/page.tsx', ins: [1, 10, 11, 12, 16, [17, 31], [72, 82], 88, 97, 98, 110, 111, 123], del: [[3, 5], 7, 8, 14, 15, [50, 69], 87, 124], prettier: false }}
'use client'
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'
import { redirect } from 'next/navigation'
import { trpc } from '@/app/_trpc/client'
import { useState } from 'react'
export default async function NewPost() {
const { userId } = await auth()
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 (
Loading...
} {!isLoading && !post &&No post found.
} {!isLoading && post && ({post.title}
by {post.authorId}
{post.content || 'No content available.'}
Loading...
You must be signed in to create a post.