...

/

Introduction to Our Next.js Demo Application

Introduction to Our Next.js Demo Application

Learn how to build a website with Next.js

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 ...