Next.js GET API routes

Below is a collection of snippets for using API routes with Next.js app router.

Table Of Contents
  1. Basic GET route in Next.js API
  2. GET route with parameters
  3. GET route with search query params
  4. GET request with both url params and query params

Basic GET route in Next.js API

URL: domain.com/api/myroute
File path: src > app > api > my route > route.ts

/*
domain.com/api/myroute
src/app/api/myroute/route.ts
*/

import { NextResponse, NextRequest } from "next/server";

export async function GET() {
    // your logic here

    // your logic here

    return NextResponse.json(
        {
            message: "Connected to endpoint",
            data: [],
            // you can return any data here
        },
        {
            status: 200,
            headers: {
                "Content-Type": "application/json",
            },
        }
    );
}

GET route with parameters

With a single parameter

In order to create a param in the api route you create a folder inside your route folder with the name of your param inside square brackets and then include a route.ts or route.js file inside the folder. I you want to send a param called id you will create a folder called [id].

URL: domain.com/api/myroute/1234
File path: src > app > api > myroute > [id] > route.ts

/*
domain.com/api/myroute/1234
src/app/api/myroute/[id]/route.ts
*/

import { NextResponse, NextRequest } from "next/server";

export async function GET(
    request: NextRequest,
    context: { params: { id: string } } // define the name and type of the context parameter
) {
    // get the value of the id parameter
    const { id } = context.params;

    // your logic here

    // your logic here

    return NextResponse.json(
        {
            message: "Connected to endpoint",
            idSent: id,
            // you can return any data here
        },
        {
            status: 200,
            headers: {
                "Content-Type": "application/json",
            },
        }
    );
}

With multiple url params

Sending multiple params in the url uses the same concept as sending a single param, the only changes is that instead of specifying the param names you only create the folder with the name […params].

URL: domain.com/api/myroute/ladies/shoes/3
File path: src > app > api > myroute > […params] > route.ts

Warning: you can’t have a single param folder and multiple params folder in the same parent folder. 

/*
domain.com/api/myroute/ladies/shoes/3
src/app/api/myroute/[...params]/route.ts
*/

import { NextResponse, NextRequest } from "next/server";

export async function GET(
    request: NextRequest,
    context: { params: { [key: string]: string } } // next passed the data in as an array of values only
) {
    // get the param values
    const { params } = context.params;
    console.log(params);
    const gender = params[0];
    const category = params[1];
    const page = Number(params[2]);
    // your logic here

    // your logic here

    return NextResponse.json(
        {
            message: "Connected to endpoint",
            gender,
            category,
            page,
            // you can return any data here
        },
        {
            status: 200,
            headers: {
                "Content-Type": "application/json",
            },
        }
    );
}

GET route with search query params

URL: domain.com/api/myroute?gender=male&category=jackets
File path: src > app > api > my route > route.ts

You can send search params with any of the above methods [id] of […params].

/*
domain.com/api/myroute?gender=male&category=jackets
src/app/api/myroute/route.ts
*/

import { NextResponse, NextRequest } from "next/server";

export async function GET(request: NextRequest) {
    // get the query values
    const gender = request.nextUrl.searchParams.get("gender");
    const category = request.nextUrl.searchParams.get("category");
    // your logic here

    // your logic here

    return NextResponse.json(
        {
            message: "Connected to endpoint",
            gender,
            category,
            // you can return any data here
        },
        {
            status: 200,
            headers: {
                "Content-Type": "application/json",
            },
        }
    );
}

GET request with both url params and query params

URL: domain.com/api/myroute/ladies/shoes?page=1&sort=price
File path: src > app > api > myroute > […params] > route.ts

/*
domain.com/api/myroute/ladies/shoes?page=1&sort=price
src/app/api/myroute/[...params]/route.ts
*/

import { NextResponse, NextRequest } from "next/server";

export async function GET(
    request: NextRequest,
    context: { params: { [key: string]: string } } // next passed the data in as an array of values only
) {
    // get the param values
    const { params } = context.params;
    const gender = params[0];
    const category = params[1];

    // get the query values
    const page = request.nextUrl.searchParams.get("page");
    const sort = request.nextUrl.searchParams.get("sort");
    // your logic here

    // your logic here

    return NextResponse.json(
        {
            message: "Connected to endpoint",
            gender,
            category,
            page,
            sort,
            // you can return any data here
        },
        {
            status: 200,
            headers: {
                "Content-Type": "application/json",
            },
        }
    );
}
Scroll to Top