DEV Community 👩‍💻👨‍💻

Cover image for ExpressJS like API in NextJS
Jannis
Jannis

Posted on

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

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!)
  }
}

Enter fullscreen mode Exit fullscreen mode

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!)
});
Enter fullscreen mode Exit fullscreen mode

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
  }
}

Enter fullscreen mode Exit fullscreen mode

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!)
});
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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,
    });
  },
});
Enter fullscreen mode Exit fullscreen mode

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.

Support me

Top comments (0)

We want your help! Become a Tag Moderator.
Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.