Search⌘ K
AI Features

Introduction to Our Next.js Demo Application

Explore the structure and functionality of the Next.js demo application. Learn how key pages like home, meetup detail, and create work, along with the Prisma database setup. Understand how users interact with the app through meetups, and prepare to test its features using Cypress.

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