microsite VS next-optimized-images

None are ready for the public yet, but all in the hopper or under serious consideration:

- Personal site/blog with a bunch of algorithmically generated art and other fun stuff, built on Node/Preact but progressively enhanced/almost completely JS-free at runtime. Motivation for the build approach is that I’m on the low/no client JS static site bandwagon but I quite like the DX of JSX components and CSS-in-JS.

- I’m using a few excellent existing tools[1][2] for said site which unfortunately aren’t designed to work well together, so I have a variety of wrapper tooling that makes them live peacefully together. I’m also developing a bunch of other build-stage tools for my use cases. I plan to open source (or hopefully contribute back) all of that as soon as I’m satisfied with their quality.

- A set libraries for building declarative, type safe, automatically validated/documented service API boundaries (HTTP/REST to start, but I also plan to support other transport protocols) — think io-ts[3] type interfaces but you get swagger docs for free in a transport-agnostic interface. I’ve built this kind of thing before, it was wildly successful in real world use, but it’s proprietary to a previous employer and I’m starting over with all the stuff I learned in hindsight.

- A “nag me” app that’s basically “reading list” plus “reminders” with minimal config, eg “nag me soon” or “nag me after a while”. My personal use case is I frequently screenshot/text myself/etc stuff I want to look at later (usually on phone but need a computer to dive in), then it just goes down the memory hole. I’ve tried setting reminders but it’s often too much fuss, and I’m far too ADHD to use a passive list.

- Exploring building yet another FE build tool/bundler that’s explicitly multi-stage/sequential with static input/output validation, per-step/time travel debugging. Motivation is that existing tools are just a big ball of config magic and totally inscrutable. I’d likely wrap existing build tools because their set of responsibilities isn’t my motivation and I don’t want to introduce that much more new API surface area to weary FE devs.

[1]: https://github.com/natemoo-re/microsite

Microsite es un generador de sitios estáticos (SSG) construido sobre Snowpack y que utiliza Preact como framework.

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 .