Migrate to NextJs App Router

pages/index.tsx → app/ClientPage.tsx

@@ -1,36 +1,25 @@
-import type {
-  GetServerSidePropsContext,
-  InferGetServerSidePropsType,
-} from "next"
+"use client"
+
+import type { InferGetServerSidePropsType } from "next"
 import { useEffect } from "react"
-import { z } from "zod"
 
 import Template from "@/components/Template"
 import AvailabilityPicker from "@/components/availability/AvailabilityPicker"
-import {
-  ALLOWED_DURATIONS,
-  DEFAULT_DURATION,
-  OWNER_AVAILABILITY,
-} from "@/config"
+import { OWNER_AVAILABILITY } from "@/config"
 import { useProvider, withProvider } from "@/context/AvailabilityContext"
 import getAvailability from "@/lib/availability/getAvailability"
-import getBusyTimes from "@/lib/availability/getBusyTimes"
 import getPotentialTimes from "@/lib/availability/getPotentialTimes"
-import {
-  getDateRangeInterval,
-  mapDatesToStrings,
-  mapStringsToDates,
-} from "@/lib/availability/helpers"
+import { mapStringsToDates } from "@/lib/availability/helpers"
 import Day from "@/lib/day"
 import localeDayString from "@/lib/locale"
 
-export type PageProps = InferGetServerSidePropsType<typeof getServerSideProps>
+import PageProps from "./page"
 
 function Page({
   start,
   end,
   busy,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+}: InferGetServerSidePropsType<typeof PageProps>) {
   const {
     state: { duration, selectedDate },
     dispatch,
@@ -62,7 +51,7 @@ function Page({
   // with some availability.
   useEffect(() => {
     if (!selectedDate && slots.length > 0) {
-      const date: Date = slots[0].start;
+      const date: Date = slots[0].start
       const dateString: string = localeDayString(date)
 
       dispatch({
@@ -82,44 +71,4 @@ function Page({
   )
 }
 
-export async function getServerSideProps({ query }: GetServerSidePropsContext) {
-  const schema = z.object({
-    duration: z
-      .enum([...(ALLOWED_DURATIONS.map(String) as [string, ...string[]])])
-      .optional()
-      .default(String(DEFAULT_DURATION))
-      .transform(Number),
-    timeZone: z.string().optional(),
-    selectedDate: z
-      .string()
-      .regex(/^\d{4}-\d{2}-\d{2}$/u)
-      .optional(),
-  })
-
-  const { duration, timeZone, selectedDate } = schema.parse(query)
-
-  // Offer two weeks of availability.
-  const start = Day.todayWithOffset(0)
-  const end = Day.todayWithOffset(14)
-
-  const busy = await getBusyTimes(
-    getDateRangeInterval({
-      start,
-      end,
-      timeZone,
-    })
-  )
-
-  return {
-    props: {
-      start: start.toString(),
-      end: end.toString(),
-      busy: mapDatesToStrings(busy),
-      duration,
-      ...(timeZone && { timeZone }),
-      ...(selectedDate && { selectedDate }),
-    },
-  }
-}
-
 export default withProvider(Page)

pages/api/confirm.ts → app/api/confirm/route.ts

@@ -1,4 +1,6 @@
-import type { NextApiRequest, NextApiResponse } from "next"
+import { NextResponse } from "next/server"
+import { type NextRequest } from "next/server"
+import { redirect } from "next/navigation"
 import { z } from "zod"
 
 import createCalendarAppointment from "@/lib/availability/createAppointment"
@@ -18,27 +20,24 @@ const AppointmentPropsSchema = z.object({
     }),
 })
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
+export async function GET(req: NextRequest) {
   if (req.method !== "GET") {
-    res.status(405).json({ error: "Method not allowed" })
-    return
+    return NextResponse.json({ error: "Method not allowed" }, { status: 405 })
   }
 
-  const { data, key } = req.query
+  const searchParams = req.nextUrl.searchParams
 
+  const data = searchParams.get("data")
+  const key = searchParams.get("key")
+
   if (!data) {
-    res.status(400).json({ error: "Data is missing" })
-    return
+    return NextResponse.json({ error: "Data is missing" }, { status: 400 })
   }
   // Make sure the hash matches before doing anything
   const hash = getHash(decodeURIComponent(data as string))
 
   if (hash !== key) {
-    res.status(403).json({ error: "Invalid key" })
-    return
+    return NextResponse.json({ error: "Invalid key" }, { status: 403 })
   }
 
   const object = JSON.parse(decodeURIComponent(data as string))
@@ -47,8 +46,10 @@ export default async function handler(
   const validationResult = AppointmentPropsSchema.safeParse(object)
 
   if (!validationResult.success) {
-    res.status(400).json({ error: "Malformed request" })
-    return
+    return NextResponse.json(
+      { error: "Malformed request in data validation" },
+      { status: 400 }
+    )
   }
 
   const validObject = validationResult.data
@@ -58,8 +59,10 @@ export default async function handler(
     Number.isNaN(Date.parse(validObject.start)) ||
     Number.isNaN(Date.parse(validObject.end))
   ) {
-    res.status(400).json({ error: "Malformed request" })
-    return
+    return NextResponse.json(
+      { error: "Malformed request in date parsing" },
+      { status: 400 }
+    )
   }
 
   // Create the confirmed appointment
@@ -77,11 +80,13 @@ export default async function handler(
 
   // If we have a link to the event, take us there.
   if (match && match[1]) {
-    res.redirect(`/booked?url=${encodeURIComponent(match[1])}`)
-
+    redirect(`/booked?url=${encodeURIComponent(match[1])}`)
     return
   }
 
   // Otherwise, something's wrong.
-  res.status(500).json({ error: "Error trying to create an appointment" })
+  return NextResponse.json(
+    { error: "Error trying to create an appointment" },
+    { status: 500 }
+  )
 }

pages/api/request.ts → app/api/request/route.ts

@@ -1,5 +1,8 @@
+import { NextRequest, NextResponse } from "next/server"
+import { headers as nextHeaders } from "next/headers"
+import { IncomingMessage } from "http"
+
 import LRUCache from "lru-cache"
-import type { NextApiRequest, NextApiResponse } from "next"
 import { z } from "zod"
 
 import { OWNER_TIMEZONE } from "@/config"
@@ -36,38 +39,35 @@ const AppointmentRequestSchema = z.object({
     }),
 })
 
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-): Promise<void> {
+export async function POST(
+  req: NextRequest & IncomingMessage
+): Promise<NextResponse> {
+  const headers = nextHeaders()
+  const jsonData = await req.json()
   if (req.method !== "POST") {
-    res.status(405).json({ error: "Method not allowed" })
-    return
+    return NextResponse.json({ error: "Method not allowed" }, { status: 405 })
   }
 
   // Apply rate limiting using the client's IP address
-
   const limitReached = checkRateLimit()
 
   if (limitReached) {
-    res.status(429).json({ error: "Rate limit exceeded" })
-    return
+    return NextResponse.json({ error: "Rate limit exceeded" }, { status: 429 })
   }
 
   // Validate and parse the request body using Zod
-  const validationResult = AppointmentRequestSchema.safeParse(req.body)
+  const validationResult = AppointmentRequestSchema.safeParse(jsonData)
 
   if (!validationResult.success) {
-    res.status(400).json({ error: validationResult.error.message })
-    return
+    return NextResponse.json(validationResult.error.message, { status: 400 })
   }
   const { data } = validationResult
 
   const start = new Date(data.start)
   const end = new Date(data.end)
 
   const approveUrl = `${
-    req.headers.origin ?? "?"
+    headers.get("origin") ?? "?"
   }/api/confirm/?data=${encodeURIComponent(JSON.stringify(data))}&key=${getHash(
     JSON.stringify(data)
   )}`
@@ -102,15 +102,15 @@ export default async function handler(
     body: confirmationEmail.body,
   })
 
-  res.status(200).json({ success: true })
+  return NextResponse.json({ success: true }, { status: 200 })
 
   /**
    * Checks the rate limit for the current IP address.
    *
    * @return {boolean} Whether the rate limit has been reached.
    */
   function checkRateLimit(): boolean {
-    const forwarded = req.headers["x-forwarded-for"]
+    const forwarded = headers.get("x-forwarded-for")
     const ip =
       (Array.isArray(forwarded) ? forwarded[0] : forwarded) ??
       req.socket.remoteAddress ??

pages/booked.tsx → app/booked/ClientPage.tsx

@@ -1,10 +1,20 @@
-import { useRouter } from "next/router"
+"use client"
+
+import { useSearchParams } from "next/navigation"
 
 export default function Booked() {
-  const { query } = useRouter()
+  const searchParams = useSearchParams()
+
+  const url = searchParams.get("url")
 
-  if (!query || typeof query.url !== "string") {
-    return
+  if (!url || typeof url !== "string") {
+    return (
+      <div className="py-8 sm:py-16 mx-auto max-w-xl">
+        <h1 className="text-3xl font-bold tracking-tight text-secondary-700">
+          There was an error with the url parameter.
+        </h1>
+      </div>
+    )
   }
   return (
     <div className="py-8 sm:py-16 mx-auto max-w-xl">
@@ -14,7 +24,7 @@ export default function Booked() {
       <p className="mt-6 text-xl text-gray-800 font-medium">
         It’s now on your calendar and an invite has been sent to them.{" "}
         <a
-          href={"https://www.google.com/calendar/event?eid=" + query.url}
+          href={"https://www.google.com/calendar/event?eid=" + url}
           target="_blank"
           rel="noreferrer"
           className="text-blue-700 underline">

app/booked/page.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+import ClientPage from "./ClientPage"
+
+export default async function Page() {
+  return <ClientPage />
+}

pages/confirmation.tsx → app/confirmation/ClientPage.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 export default function Confirmation() {
   return (
     <div className="py-8 sm:py-16 mx-auto max-w-2xl">

app/confirmation/page.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+
+import ClientPage from "./ClientPage"
+
+export default async function Page() {
+  return <ClientPage />
+}

app/layout.tsx

@@ -0,0 +1,39 @@
+import React from "react"
+import { Public_Sans } from "next/font/google"
+import { Metadata } from "next"
+
+import "../styles/global.css"
+
+const public_sans = Public_Sans({
+  subsets: ["latin"],
+  weight: "variable",
+  display: "swap",
+})
+
+export const metadata: Metadata = {
+  title: `Meet with ${process.env.NEXT_PUBLIC_OWNER_NAME ?? "me"}`,
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={public_sans.className} suppressHydrationWarning>
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="32x32"
+        href="/favicon-32x32.png"
+      />
+      <link
+        rel="icon"
+        type="image/png"
+        sizes="16x16"
+        href="/favicon-16x16.png"
+      />
+      <body className="h-full">{children}</body>
+    </html>
+  )
+}