Loading images in Next.js framework

Here at twopluszero, we’re happy with using Next.js as our front-end application framework. Next solved our largest problem in developing SPAs easily: Server Side Rendering!

But as we go further, we should solve other problems to make our applications work fast and smooth. One problem is requiring images in JavaScript files. This is a most have feature specially in static pages like landing pages.

Here are some of our expectations when requiring images in js files:

1. Add link to the image automatically when requiring the image. Consider the following example:

<img src={require("./test.png")} />

It should replace the require statement with the link to the image.

2. Embed small images as Base64 encoded string to lower HTTP requests.

3. Add a content hash to the file name to force browsers to replace old cached images.

Thus we created next-images library to solve all these problems in the simplest way possible. We would be happy if it helps you too! 🙂