ExpressJS like API in NextJS

Have you ever wanted an ExpressJS like API structure in your NextJS app? A good structure and easy to extend.

Let me give you three examples with having an easier API with the NPM package called next-connect.

FYI: This is not the whole code, it's just the core of the functionality I wanted to present you.

✅ Advantages
🚏 Route
🚪 Middleware
🛑 Error handling

✅ Advantages

Here are quickly five advantages of using next-connect.

Clean and nice structure
Fast and scalable
Easy to implement
TypeScript support
Lightweight

🚏 Route

Create a POST endpoint for /user.

NextJS:

// api/user.ts
export default function handler(req: NextRequest, res: NextResponse) {
  if (req.method === 'POST') {
    res.status(200).send('Worked!)
  }
}

Next-Connect:

// api/user.ts
const handler = createRouter<NextApiRequest, NextApiResponse>();

// Process a POST request
handler.post(middleware, async (req: NextRequest, res: NextResponse) => {
  return res.status(200).send('Worked!)
});

Now let's imagine you have an endpoint for GET, POST, PATCH, PUT and DELETE method. Your handler will be full of if else statements and not very clean.

🚪 Middleware

Let's create a middleware for two routes.

NextJS:

// middleware.ts
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    console.log('Middleware fro /about');
  }

  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    console.log('Middleware fro /dashboard')
  }
}

// api/about.ts
export default function handler(req: NextRequest, res: NextResponse) {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

Next-Connect:

// middleware.ts
const middleware = () =>
  router.use(async function (req: NextApiRequest, res: NextApiResponse, next: NextHandler) {
    console.log('Middleware ran! 🚀');

    next();
  }


// api/index.ts
const handler = createRouter<NextApiRequest, NextApiResponse>();

// Process a POST request
handler.post(middleware, async (req: NextRequest, res: NextResponse) => {
  return res.status(200).send('Worked!)
});

It doesn't look that next-connect would be better, smaller or easier BUT think about having an API with dozens of endpoints and multiple middlewares. With next-connect it's much more clear and structured.

🛑 Error handling

The error handling of both parties is very interesting, let's look into it.

NextJS

export default async function handler(req: NextRequest, res: NextResponse) {
    try {
        // Do some API request or something
        res.status(200).json(response.data);
    } catch (error) {
        // Send error to the client side
    }
}

Next-Connect:

export default router.handler({
  onNoMatch(req, res) {
    return res.status(404).send('404 Not found');
  },
  onError(err, req, res) {
    return res.status(500).json({
      error: (err as Error).message,
    });
  },
});

Next-Connect has a way easier and secure way of handling errors in your application. It's even pretty customizable and nice to use.

Thanks for reading!
It was a quick and very superficial overview about next-connect for NextJS. I absolutely like it and I hope I could give you a good overview about it.

Blog

ExpressJS like API in NextJS

Jannis

✅ Advantages

🚏 Route

🚪 Middleware

🛑 Error handling

Join Our Newsletter. No Spam, Only the good stuff.

Related