404 for edge dynamic routes

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`);
  }
}

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

Vercel Alum

Hi, !

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?

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.

reply to #4

Vercel Alum

Hi, !

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

Vercel Community

Debugging 404 Errors

Sometimes things don’t go as expected when deploying a website. If you see a 404 on your site, that means the page or resource couldn’t be found. There are...

https://community.vercel.com/t/debugging-404-errors/437

This topic is closed. It no longer accepts new replies.

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`); } }

// 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' }); }

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', }, } ); } };