Next JS File Conventions: route.js

extJS is a React framework that is used to build full–stack web applications. It is used both for front-end as well and back–end. It comes with a powerful set of features to simplify the development of React applications.

One of its features is Route Handler. In this article, we will learn about Route Handler with its syntax and examples.

Route Handler:

Route Handler is a feature that allows you to create custom request handlers for specific routes to handle different types of requests. route.js file is used to create a custom route handler within the app directory. By using this file you can create a API to handle web requests and responses.

You can create a custom route handler for different HTTP methods such as GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS. You can handle HTTP requests and responses by using NextRequest and NextResponse.

Syntax for Different HTTP methods:

import { NextResponse } from "next/server";

//Handling GET request
export async function GET(req, res) {
   return NextResponse.json({ message: "GET Request" }, { status: 200 })
}

//Handling POST request
export async function POST(req, res) {
   return NextResponse.json({ message: "POST Request" }, { status: 200 })
}

//Handling PUT request
export async function PUT(req, res) {
   return NextResponse.json({ message: "PUT Request" }, { status: 200 })
}

//Handling HEAD request
export async function HEAD(req, res) {
   return NextResponse.json({ message: "HEAD Request" }, { status: 200 })
}

//Handling DELETE request
export async function DELETE(req, res) {
   return NextResponse.json({ message: "DELETE Request" }, { status: 200 })
}

//Handling PATCH request
export async function PATCH(req, res) {
   return NextResponse.json({ message: "PATCH Request" }, { status: 200 })
}

//Handling OPTIONS request
export async function OPTIONS(req, res) {
   return NextResponse.json({ message: "OPTIONS Request" }, { status: 200 })
}

Steps to Create NextJS Application:

Step 1: Create a NextJS application using the following command.

npx create-next-app@latest gfg

Step 2: It will ask you some questions, so choose as the following.

√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... No
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... Yes

Step 3: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Folder Structure:

Example: The below example demonstrates the use of route.js (Route Handler).

Note: Remove the included css file from layout.js file.

Javascript

//File path: src/app/page.js

export default function Home() {

    return (
        <>
            <h1 style={{ 'color': 'green' }}>
                GeeksForGeeks | route.js Example
            </h1>

            <form method="GET" action="/api">
                <input type="text"
                    placeholder="Enter Course Name"
                    name="course" />
                <button type="submit">Submit</button>
            </form>
        </>
    );
}

Javascript

//File path: src/app/[api]/route.js
import { NextResponse } from "next/server";

//Handling GET request
export async function GET(req, res) {
    //Get the course name
    const course = await req.nextUrl.searchParams;
    const courseName = course.get('course')

    //Response course name 
    return new NextResponse(`
  <h1>Course Name: ${courseName}</h1>`,
        {
            status: 200,
            headers: { 'content-type': 'text/html' }
        }
    );
}

Start your application using the command.

npm run dev

Output: