[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live)

[Help](/c/help/9)

# 404 for edge dynamic routes

228 views · 1 like · 5 posts


Jakub Sikora (@jsikora) · 2024-08-04

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


Jakub Sikora (@jsikora) · 2024-08-04

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


Pauline P. Narvas (@pawlean) · 2024-08-05

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?


Jakub Sikora (@jsikora) · 2024-08-05

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

module.exports = nextConfig;
```

My routes
![Screenshot 2024-08-05 at 12.45.49|442x390](upload://laNj7Jf1w8g6R6QRwm37TtfG9zf.png)

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.


Pauline P. Narvas (@pawlean) · 2024-08-06 · ♥ 1

Hi, @jsikora!

We just published this [post](https://community.vercel.com/t/debugging-404-errors/437) that may be helpful for you to debug your 404 issue.

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