Introduction to Our Next.js Demo Application
Learn how to build a website with Next.js
We'll cover the following...
We'll cover the following...
At the start of the course, we encountered the hypothetical scenario of building a tech meetup website. Now, let’s turn it into a reality. Here is a ready-made Next.js website that we can run. Feel free to try out all the features of the application.
import * as trpcNext from "@trpc/server/adapters/next";
import { publicProcedure, router } from "@/server";
import { CreateEventSchema } from "@/createEventSchema";
import { prisma } from "@/prisma";
import slugify from "slugify";
import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
import { TRPCError } from "@trpc/server";
const appRouter = router({
create: publicProcedure
.input(CreateEventSchema)
.mutation(async ({ input }) => {
try {
const event = await prisma.event.create({
data: {
name: input.name,
slug: slugify(input.name, { lower: true }),
description: input.description,
location: input.location,
dateTime: new Date(input.dateTime),
},
});
return event;
} catch (error) {
if (
error instanceof PrismaClientKnownRequestError &&
error.code === "P2002"
) {
throw new TRPCError({
code: "INTERNAL_SERVER_ERROR",
message: "A meetup with this name already exists.",
cause: error,
});
}
throw new TRPCError({
code: "BAD_REQUEST",
message: "An unexpected error occurred, please try again later.",
cause: error,
});
}
}),
});
export type AppRouter = typeof appRouter;
export default trpcNext.createNextApiHandler({
router: appRouter,
});
Next.js demo application
Let’s take a look at the files at pages/index.tsx, pages/create.tsx, and pages/[slug].tsx to see the most ...