next-connect VS next-optimized-images

Try next-connect

Same. I found this example [1] particularly helpful, although I don't know how good this [2] library it uses is. Overall, I've seen multiple OSS projects [3] that try to support a missing functionality in Next.js seem to just give up trying to keep up with their breaking changes.

[1] https://stackblitz.com/edit/github-mwzv1t?file=README.md

[2] https://github.com/hoangvvo/next-connect

[3] https://github.com/cyrilwanner/next-optimized-images

import { getMongoClient } from 'lib/mongodb'; async function createHandler(req, res) { const { text } = req.body; const createdAt = new Date(); if (!text) { res.status(400).json({ message: 'Validation errors', errors: { text: ['Please add a text value'], }, }); return; } const goals = (await getMongoClient()).db.collection('goals'); const { insertedId: _id } = await goals.insertOne({ text, createdAt, }); res .status(201) .json({ _id, text, createdAt }); } async function listHandler(req, res) { const goals = (await getMongoClient()).db.collection('goals'); const list = []; const cursor = goals.find({}, { sort: { createdAt: 1 }, }); if ((await goals.estimatedDocumentCount()) === 0) { res.status(204).send(undefined); return; } while (await cursor.hasNext()) { const goal = await cursor.next(); list.push(goal); } res.json(list); } // Instead of this you should use https://github.com/hoangvvo/next-connect export default function handler(req, res) { if (req.method === 'POST') { createHandler(req, res); } else { listHandler(req, res); } }

Interesting approach. I am personally not a fan of how it plays out. I think next-connect provides a cleaner approach to this problem. https://github.com/hoangvvo/next-connect

Hey, thanks for the feedback! The genesis of this library is that I used next-connect in one of my apps but I personally didn't like combining routing with middleware layer and I had some issue related to matching although I wasn't matching multiple routes in one file. I didn't find workaround to this and honestly I didn't had motivation to search more. Instead I thought making utility for middleware that would fit to my needs would be really cool thing, and extracting it from my app source to separate public library would be even cooler since I'm beginner open sourcerer but i plan to go further into this direction so I guess its a good start 😄

I think what you're looking for is a way to access your DB via middleware, if so take a look at: https://github.com/hoangvvo/next-connect.

I use next-connect to use connect-like middlewares. A traditional API route handler in Next.js is like:

Are you trying to run some middleware before the api functions? If so, this may help next-connect

Same. I found this example [1] particularly helpful, although I don't know how good this [2] library it uses is. Overall, I've seen multiple OSS projects [3] that try to support a missing functionality in Next.js seem to just give up trying to keep up with their breaking changes.

[1] https://stackblitz.com/edit/github-mwzv1t?file=README.md

[2] https://github.com/hoangvvo/next-connect

[3] https://github.com/cyrilwanner/next-optimized-images

But yes, it felt more finnicky if that makes sense. I'd suggest building your own image thing using next-optimised-images to suit your exact preferences. You can generate a blurred low res image, a higher res version and overlap them together to essentially re-create a lite version of Image component : https://github.com/cyrilwanner/next-optimized-images

Next.js component is not supported (see Next.js Image loader). Use img instead. The sample project is already set up to use next-optimized-images which can instead be used to serve images.

next-optimized-images

next.js actually does images even better in my experience, There's no magical Gatsby Image plugin but you can use next-optimized-images which will give you all the raw materials such as traced SVGs, etc and you can build your own image component around that very easily which you have full style control over.

We aren't using anything at the moment but you can use for example https://github.com/cyrilwanner/next-optimized-images

That's why I removed next/image and ended up using https://github.com/cyrilwanner/next-optimized-images

That lets you export the images pre-optimized for different sizes/etc. You can then do a normal next export.

You can still use `next/image` when outputting a static site, as long as you use `next start`. Using `next export` removes the server entirely, meaning you can't optimize images on demand.

There's an open issue to explore optimizing images at build time, but for now, you can use https://github.com/cyrilwanner/next-optimized-images

TheVECentre.com is predominately built using Next.js and Tailwind CSS. Two Next.js plugins, next-seo and next-optimized-images, to handle the SEO orientated properties and optimise images for different device sizes respectively. Additionally, React Icons supplies any social icons, EmailJS powers the contact form and Framer Motion adds animations to the site.

I like your style 😎 Im using next.js for incremental static regeneration . I've been going down rabbit hole after rabbit hole regarding image optization. I found this, https://github.com/cyrilwanner/next-optimized-images .