What does the following code mean "export { handler as GET, handler as POST }" in NEXT AUTH for NEXT JS 13

[kemaltf]

Summary

Hi, i just want to migrate to next JS 14, when i want to built an authentication i saw the documentation in Next Auth doc and found this

https://next-auth.js.org/configuration/initialization#route-handlers-app

import NextAuth from "next-auth"

const handler = NextAuth({
  ...
})

export { handler as GET, handler as POST }

I don't understand the meaning of the export syntax like this export { handler as GET, handler as POST } it's uncommon.

Can help to explain or provide documentation for me to read?

Additional information

No response

Example

No response

[icyJoseph]

Hi,

The new Route Handlers in App Router, use their function name to match a particular HTTP Request Method.

Typically, you'd do:

export const GET = () => {/* function body */}
export const POST = () => {/* function body */}

And that'll setup to handlers, one for GET requests, and one for POST requests.

However, some people, for whichever reason, might be able to use the same function body logic to serve both kinds of requests.

So you can create a function named, whatever, for example, handler and export it as GET and POST.

const handler = () => {/* function body */}

export { handler as GET, handler as POST }

People who consume this module, and mainly the Next.js server compiler, would be able to import { GET, POST } from './your-router-handler';

So, it is a syntax shorthand for:

const handler = () => {/* function body */}
export const GET = handler;
export const POST = handler;

You can also rename things as you import them, import { someFunction as MyFunction } from '/some-library';, but importing like that often leads to tricky situations in codebases.

[kemaltf]

Thanks! you made my day!

[kemaltf]

btw i didn't find this explanation in Next JS documentation. where did you get to know about this? Thanks :)

[dimaboychev]

I have the src/app/api/auth/[...nextauth]/route.ts file with the export { handler as GET, handler as POST } as well and it was kind of confusing. Thanks for info.

I want to disallow POST methods only if the API/pathname is "/api/auth/session". It took me a lot of time to figure out how to write it but eventually I ended up with this:

// src/app/api/auth/[...nextauth]/route.ts
import { authOptions } from "@/lib/auth";
import NextAuth from "next-auth";
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

// Don't allow POST requests to /api/auth/session.
function customHandler(req: NextRequest, res: any) {
  if (req.method === 'POST' && req.nextUrl.pathname === '/api/auth/session') {
    return NextResponse.json(
      { message: "Method not allowed." },
      { status: 405 }
    );
  }

  return NextAuth(authOptions)(req, res);
}

export { customHandler as GET, customHandler as POST }

Originally it looked like this:

// src/app/api/auth/[...nextauth]/route.ts
import { authOptions } from "@/lib/auth";
import NextAuth from "next-auth";

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };