404 for edge dynamic routes

Help
1

Hi,
My api functions returns 404 on vercel. Locally in dev or build mode these are working fine.

“next”: “14.0.4”

next config:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
};

module.exports = nextConfig;

For example:
GET /api/accounts/me

/pages/api/accounts/[…params].ts

import type { NextApiRequest, NextApiResponse } from 'next';

import Accounts from 'api/accounts';
import { getTokenFromBearer } from 'lib/auth';
import { Account } from 'types/accounts';

type RouteHandler<T> = (this: Accounts) => Promise<T>;

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { method, query } = req;
  const params = Array.isArray(query.params) ? query.params : [];
  const routeKey = `${method}${params.length > 0 ? '/' + params[0] : ''}`;

  const token = getTokenFromBearer(req.headers['authorization'] as string);
  const accountsInstance = new Accounts(token);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const routeToMethod: { [key: string]: RouteHandler<any> } = {
    'GET/me': accountsInstance.getMe as RouteHandler<Account>,
  };

  if (routeToMethod[routeKey]) {
    try {
      const result = await routeToMethod[routeKey].call(accountsInstance);
      res.status(200).json(result);
    } catch (error) {
      //TODO: Handle errors, e.g., unauthorized, not found, etc.
      res.status(500).json({ error: 'Internal Server Error' });
    }
  } else {
    res.setHeader(
      'Allow',
      Object.keys(routeToMethod).map((r) => r.split('/')[0])
    );
    res.status(405).end(`Method ${method} Not Allowed`);
  }
}
2

Even simple /pages/api/hello.ts

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next';

type Data = {
  name: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: 'John Doe' });
}

returns 404

3

Hi, @jsikora!

Some points to look at:

  • What does your next.config.js file look like?
  • Are your dynamic routes are set up correctly in the pages/api directory?
  • Have you got any useful build logs with any errors or warnings related to route handling?
4

Next config

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
};

module.exports = nextConfig;

My routes
Screenshot 2024-08-05 at 12.45.49

Nothing in the logs unfortunately.

I’m also using next middleware.ts

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

import { checkAuth } from 'api/authHandler';

export const config = {
  matcher: '/api/:function*',
};

const excludePaths: string[] = [];

export const middleware = async (request: NextRequest) => {
  const { pathname } = request.nextUrl;

  if (excludePaths.includes(pathname)) {
    return NextResponse.next();
  }

  const isAuthenticated = await checkAuth(request);

  if (!isAuthenticated) {
    return new Response(
      JSON.stringify({ success: false, message: 'Authentication Failed' }),
      {
        status: 401,
        headers: {
          'Content-Type': 'application/json',
        },
      }
    );
  }
};

but I tried without that file as well, without luck.

7

Hi, @jsikora!

We just published this post that may be helpful for you to debug your 404 issue.

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.