Next 13.4 where is the api Folder?

Question

I have a question regarding Next 13.4. Since today I can only use Next 13.4. I wonder where the api folder has gone. It is no longer created in this version. It still worked in 13.3. How can I now make a POST or GET request and the result with NextResponse return?

Squander

Answer 1

Short answer: There isn't. With 13.4 the Next Team released the app directory as stable. So probably you used this feature while setting up your project. Here a link to the NextJS Blog related to the release.

While reading through the official Docs I stumbled uppon this Information.
In short: That's the equivalent to the API Routes in the pages directory.

Tristan

Answer 2

If there isn't any /api folder, you can make one inside /app folder.

In Next 13.4, the api endpoints are treated as route.js, just like page.js.

e.g /app/api/home/route.js

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ name: 'Anuj Singh' });
}

so from browser if you navigate to /api/home you will see the result.\

More info on this from official doc : https://nextjs.org/docs/app/building-your-application/routing/router-handlers

Rhizomorphous

Answer 3

You can still use API routes with pages/api directory, they will continue to work without any changes. If you have an ongoing project you don't have to migrate it right now, you can still stick to an old way for a while, for example. If you have used some sort of CLI which does not create this folder, you can do it yourself manually.

However there is a new Next.js v13.4 feature called Route Handlers. It is only available inside the app directory. It is the equivalent of API Routes meaning you do not need to use API Routes and Route Handlers together. If you are starting a new project you might want to start with Route Handlers right away.

Dade

Yes, it works quite differently. I have not tried it yet, but if you have concrete question you can probably post it as a separate question, maybe someone knows! – Dade

Answer 4

To build off of Anuj's answer.

NextJS 13.4 changed from a "default" pages/api folder to one you have to create yourself. You will very likely want to create a similar folder yourself app/api.

ANALOGY TO UNDERSTAND API ROUTES :: By the time that you're looking into this question, you've already figured out that pages in the new app router structure are rendered via a specific folder and file naming system -- ie. you set up the following folder + files app/myPage/page.js and the contents of the file page.js are what is rendered upon browsing to http://localhost:3000/myPage

API ROUTES WORK IN A SIMILAR WAY :: routing works in an analogous way with a specific folder + file naming system but using route.js is used instead of page.js

So two very simple examples.

Example 1: You can create the folder + file like this. app/api/route.js and in the file route.js put the following. NOTE: These are not fully formed functions per HTTP VERB but illustrations to show how the new routing system works:

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello - GET' });
}

export async function POST() {
  return NextResponse.json({ message: 'Hello - POST' });
}

export async function PUT() {
  return NextResponse.json({ message: 'Hello - PUT' });
}

export async function DELETE() {
  return NextResponse.json({ message: 'Hello - DELETE' });
}

Test this by navigating to http:localhost:3000/api and you should see {"message": "Hello - GET"}. Also, you can test the rest of the verbs in Postman using the url http:localhost:3000/api and toggling through the verbs GET/POST/PUT/DELETE on your request.

! NOTE - One thing that is great about this new system, is that you no longer have to do the multiple if statements on incoming request, each VERB gets its own function which I find to be cleaner.

// previous way
export default async function handler(req, res) {
 if (req.method === 'GET') { ... }
 if (req.method === 'POST') { ... }
 if (req.method === 'PUT') { ... }
 if (req.method === 'DELETE') { ... }

Example 2: To complete the example, you can create various routes as needed using the folder + file system. Create a NEW folder and file: app/api/myNewRoute/route.js and in the file route.js put the following: (NOTE: These are not fully formed functions per HTTP VERB but illustrations to show how the new routing system works.)

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello - GET' });
}

export async function POST() {
  return NextResponse.json({ message: 'Hello - POST' });
}

export async function PUT() {
  return NextResponse.json({ message: 'Hello - PUT' });
}

export async function DELETE() {
  return NextResponse.json({ message: 'Hello - DELETE' });
}


export async function DELETE() {
  return NextResponse.json({ name: 'Hello - DELETE' });
}

Test this by navigating to http:localhost:3000/api/myNewRoute and you should see {"message": "Hello - GET"}. Also, you can test the other HTTP verbs in Postman using the url http:localhost:3000/api/myNewRoute and toggling through the verbs GET/POST/PUT/DELETE.

Hope it helps, and if you want to read more here is NextJS's doc on the subject.

Inextricable

Answer 5

Yeah looks like Next just expects us to create route handlers in the designated components themselves where the data is required. So just create route handlers in-component in server components.

Stereoscopy