Introduction to Our Next.js Demo Application
Learn how to build a website with Next.js
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 ...