Support fort App Router

[mrzmyr]

Do you support Next.js App Router? :)

[jellydn]

Hi @mrzmyr I have some thoughts about how it could be useful. Actually, this plugin is quite simple so I write an ADR for explain what it could be done to support App Router without breaking change for old version.

---

Support for Next.js 13 App Router

Date: 2023-07-15

Status

Accepted

Context

With the introduction of Next.js 13, a new feature known as App Router was introduced. This allows for the creation of custom request handlers within the app directory of a Next.js project. These custom request handlers allow for more advanced use cases, including the ability to handle various HTTP methods, streaming responses, and more.

In our current codebase, we have a validation framework that works with the traditional API routes (pages/api/) in Next.js. However, with the introduction of the App Router in Next.js 13, we need to adjust our validation framework to support the new App Router API.

Decision

To support the Next.js 13 App Router, we decided to modify our validation Higher Order Function (withValidations) to check if the validation is for the App Router or a traditional API route.

If the validation is for the App Router, we will use the NextResponse object from Next.js to send responses. This includes sending 404 responses when a handler is not found, and sending 400 responses when an error occurs during validation.

If the validation is for a traditional API route, we will use the existing Express-style responses (res.status().send()).

To achieve this, we introduced a new apiType field in our ValidationHoF type. This field can either be 'appRoute' or 'pageRoute', which represents an App Router and a traditional API route respectively. Developers will have to specify the appropriate apiType when defining the validation rules.

type ApiType = 'appRoute' | 'pageRoute';

type ValidationHoF = {
  type: SCHEMA_TYPE;
  mode?: "body" | "query" | "headers";
  schema: unknown;
  apiType?: ApiType;
};

Here's a snippet of the updated withValidations function:

export function withValidations(validations: ValidationHoF[]) {
  // ...
  const isAppRouter = validations.some((validation) => validation.apiType === 'appRoute');
  if (isAppRouter) {
    // TODO: handle 404
  } else {
    res.status(404).end();
  }
  // ...
  if (isAppRouter) {
   // TODO: handle error
  }
  res.status(400).send(error);
  // ...
}

Consequences

This decision allows us to support both the new App Router feature in Next.js 13 and the traditional API routes in our validation framework.

However, developers now need to be aware of the apiType field when using the withValidation and withValidations functions. They must correctly set this field based on whether they are defining validations for an App Router or a traditional API route.

The introduction of apiType does add a bit more complexity to our validation framework. However, we believe that the benefits of supporting the new App Router feature outweigh the added complexity. Furthermore, the failure to use the appropriate apiType could lead to incorrect behavior of the validation function, as the response handling differs for app routes and page routes. This requires developers to be careful and conscious about the apiType they use.

[jellydn]

FYI - Possible solution for reference https://github.com/KolbySisk/next-route-handler-pipe