-
The next idea was to use normal markdown images and to place the images in the public folder. This eliminates the need for static import and treats our image like a remote image. But in order to make this work, we have to tell next/image the dimensions of the image. If we would use a static import for the image, the import magic would provide the dimensions for us. To pass the width and height to the image component we use a rehype plugin called rehype-img-size.
-
SurveyJS
JavaScript Form Builder with No-Code UI & Built-In JSON Schema Editor. Add the SurveyJS white-label form builder to your JavaScript app (React/Angular/Vue3). Build complex JSON forms without coding. Fully customizable, works with any backend, perfect for data-heavy apps. Learn more.
-
The next idea was to use normal markdown images and to place the images in the public folder. This eliminates the need for static import and treats our image like a remote image. But in order to make this work, we have to tell next/image the dimensions of the image. If we would use a static import for the image, the import magic would provide the dimensions for us. To pass the width and height to the image component we use a rehype plugin called rehype-img-size.
-
contentlayer uses remark to parse the markdown in an mdast. We can now use remark plugins to modify the mdast. Then rehype comes into play and converts the mdast into a hast. rehype plugins can now modify the hast. Finally the hast is converted into react components.
-
contentlayer uses remark to parse the markdown in an mdast. We can now use remark plugins to modify the mdast. Then rehype comes into play and converts the mdast into a hast. rehype plugins can now modify the hast. Finally the hast is converted into react components.
-
contentlayer uses remark to parse the markdown in an mdast. We can now use remark plugins to modify the mdast. Then rehype comes into play and converts the mdast into a hast. rehype plugins can now modify the hast. Finally the hast is converted into react components.
-
For a more complete example have a look at the source of this blog.
-
contentlayer
Contentlayer turns your content into data - making it super easy to import MD(X) and CMS content in your app
My first reaction was to use MDX and use next/image just as in the example. But that means that we can't use normal markdown images and it turns out that this won't work with contentlayer. This wont work, because Next.js does some magic on the import of the static image. The object which gets returned by the import, contains not only a path to the image, it contains also the width and height, plus a very small version of the image for the blurred placeholder. This magic does not work if the MDX file is loaded with contentlayer, because contentlayer uses its own bundler, which does not know about the import magic for images.
-
InfluxDB
InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.
-
sharp
High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
Now that we have the path, we can use sharp to read the width and height of the image.
-
contentlayer uses remark to parse the markdown in an mdast. We can now use remark plugins to modify the mdast. Then rehype comes into play and converts the mdast into a hast. rehype plugins can now modify the hast. Finally the hast is converted into react components.
-
My first reaction was to use MDX and use next/image just as in the example. But that means that we can't use normal markdown images and it turns out that this won't work with contentlayer. This wont work, because Next.js does some magic on the import of the static image. The object which gets returned by the import, contains not only a path to the image, it contains also the width and height, plus a very small version of the image for the blurred placeholder. This magic does not work if the MDX file is loaded with contentlayer, because contentlayer uses its own bundler, which does not know about the import magic for images.
-
My first reaction was to use MDX and use next/image just as in the example. But that means that we can't use normal markdown images and it turns out that this won't work with contentlayer. This wont work, because Next.js does some magic on the import of the static image. The object which gets returned by the import, contains not only a path to the image, it contains also the width and height, plus a very small version of the image for the blurred placeholder. This magic does not work if the MDX file is loaded with contentlayer, because contentlayer uses its own bundler, which does not know about the import magic for images.
