Next.js Discord

Discord Forum

Trying to refactor Bonnies API Handler using "next-connect" from pages to app version

Unanswered
Asiatic Lion posted this in #help-forum
Open in Discord
Asiatic LionOP
Her code is:
import type { NextApiRequest, NextApiResponse } from "next";

import { createHandler } from "@/lib/api/handler";
import { generateData } from "@/lib/db/data/generateData";
import { addShow, getShows } from "@/lib/features/shows/queries";

const handler = createHandler();
handler.get(async (req: NextApiRequest, res: NextApiResponse) => {
  let shows = await getShows();

  // generate shows if there aren't any
  if (shows.length === 0) {
    await generateData();
    shows = await getShows();
  }

  return res.status(200).json({ shows });
});


Then createHandler is
import type { NextApiRequest, NextApiResponse } from "next";
import nextConnect from "next-connect";

import { validateToken } from "@/lib/auth/utils";

import { processApiError } from "./utils";

// base handler for centralized error and method handling
export const createHandler = ({
  authRequired,
}: { authRequired?: boolean } = {}) => {
  const handler = nextConnect({
    onError(error, req: NextApiRequest, res: NextApiResponse) {
      const { status, message } = processApiError(error);
      res.status(status).json({ message });
    },
    onNoMatch(req: NextApiRequest, res: NextApiResponse) {
      res.status(405).end(`Method ${req.method} Not Allowed`);
    },
  });
  if (authRequired) {
    handler.use(async (req, res, next) => {
      const tokenIsValid = await validateToken(req);
      if (!tokenIsValid) return res.status(401).end();
      return next();
    });
  }
  return handler;
};

7 Replies

Asiatic LionOP
My version so-far is
// api/shows/route.ts
import { createHandler } from "@/lib/api/handler";
import { generateData } from "@/lib/db/data/generateData";
import { getShows } from "@/lib/features/shows/queries";
import { NextResponse } from "next/server";

const handler = createHandler();

handler.get(async (req) => {
  let shows = await getShows();

  // generate shows if there aren't any
  if (shows.length === 0) {
    await generateData();
    shows = await getShows();
  }

  return NextResponse.json({ shows });
});


import type { NextApiRequest, NextApiResponse } from "next";
import nextConnect, { createEdgeRouter } from "next-connect";

import { validateToken } from "@/lib/auth/utils";

import { processApiError } from "./utils";
import { NextFetchEvent, NextRequest, NextResponse } from "next/server";

const router = createEdgeRouter<NextRequest, NextFetchEvent>();

// base handler for centralized error and method handling
export const createHandler = ({
  authRequired,
}: { authRequired?: boolean } = {}) => {
  router.handler({
    onError(error, req, res) {
      const { status, message } = processApiError(error);
      NextResponse.json(
        { message },
        {
          status: status,
        }
      );
    },
    onNoMatch(req, res) {
      NextResponse.json(`Method ${req.method} Not Allowed`);
    },
  });
  if (authRequired) {
    router.use(async (req: NextRequest, res, next) => {
      const userId = req.nextUrl.searchParams.get("userId"); // To read query params
      const tokenIsValid = await validateToken(req, userId);
      if (!tokenIsValid)
        return NextResponse.json({
          status: 401,
        });
      return next();
    });
  }
  return router;
};
But i get an
- error No HTTP methods exported in 'D:\base-concert-venue-app\src\app\api\shows\route.ts'. Export a named export for each HTTP method.
Any advice? 🙂
should i wrap the handler.get in export function GET() { .. } ?