Quick Fix: In Next.js 13, the app directory needs to be structured as app/api/get-testcase/route.ts. Also, the API handler functions should be exported for the required HTTP methods. For example, export { handler as GET, handler as POST } or individual exports like export async function GET(request: Request) {...} and export async function POST(request: Request) {...}
The Problem:
A user is encountering a 404 error when trying to access API routes in NextJS 13, specifically routes that interact with a PostgreSQL database provided by Vercel. Despite confirming the project directory and trying different methods to access the route, the issue persists.
The Solutions:
Solution 1: Directory Structure and Exporting Handlers
In Next.js 13 with an app directory, API routes must follow the following directory structure:
app/api/get-testcase/route.ts
Additionally, to make API routes accessible, you need to export the request handler for the corresponding HTTP method.
For multiple HTTP methods, use the following:
export { handler as GET, handler as POST };
Alternatively, export each HTTP method individually:
export async function GET(request: Request) {
// Your code here
}
export async function POST(request: Request) {
// Your code here
}
Solution 2: Revise API Route Conventions
Next.js documentation states that route handlers should reside in a `route.js|ts` file inside the `app` directory. In the provided code snippet, the handler is saved as `app/api/get-testcase.ts`, which seems correct. However, the export signature follows the old “pages router” convention, using `NextApiRequest` and `NextApiResponse`. To resolve this conflict, you have two options:
Use the new “app router” convention: Save the handler as `app/api/get-testcase/route.js|ts` and change the export signature to:
“`
export async function GET(request: Request) {}
“`
Use the old “pages router” convention: Keep the handler file as `src/api/get-testscase.js|ts` and retain the original export signature:
Why should I use new "app router" over the old "pages router"?
—
The new "app router" provides better performance, code organization and API support.
What’s wrong with the project directory in the current code?
—
The directory ‘app/api/get-testcase.ts’ is incorrect. It should be ‘app/api/get-testcase/route.ts’
What’s wrong with the export signature of the handler in the code?
—
The export signature ‘export default async function handler’ is incorrect. It should be ‘export async function GET’
Video Explanation:
The following video, titled "Next.js 14 Full Course 2024 | Build and Deploy a Full Stack App ...", provides additional insights and in-depth exploration related to the topics discussed in this post.
... page 01:50:17 Create page 02:14:41 Feed page 02:32:28 Profile page 02:48:17 Next.js API Routes 03:06:39 Special Assignment! 03:12:17 ...
