How to blur the image on load in Next.js
The heaviest parts of a webpage are images. Images slow down a website’s speed and make it load more slowly. The user experience might suffer as a result. As a result, I’ll show you in this post how to add hazy pictures as the page loads in Next in the simplest and quickest method possible. js.
I’m referring to the <Image />
component, one of Next.js’ impressive and potent technical offerings. It provides all the necessary SEO tools and automated image optimization, improving website performance and user experience.
Let’s get started!
Basic requirements
We’ll be using Tailwind CSS in this article. There will be a need for some basic Tailwind CSS knowledge.
Step 1: Install Tailwind CSS with Next.js
Initialize tailwind inside the Next.js application,
> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p
Check out the complete guide for installing Tailwind CSS with Next.js on the official website.
Install the Aspect Ratio plugin for Tailwind
- Install the plugin using npm,
npm install -D @tailwindcss/aspect-ratio
Then add the plugin to your tailwind.config.js
,
// tailwind.config.js
module.exports = {
theme: {
// ...
},
corePlugins: {
aspectRatio: false,
},
plugins: [
require('@tailwindcss/aspect-ratio'),
// ...
],
}
Step 2: Creating Blur Image Component
Create a new file
components/BlurImage.js
Inside
componets/BlurImage.js
, add the following code,
export default function BlurImage({ image }) {
const [isLoading, setLoading] = useState(true);
return (
<a href={image.href} className="group">
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-w-7 xl:aspect-h-8">
<Image
alt=""
src={image}
layout="fill"
objectFit="cover"
className={`
duration-700 ease-in-out group-hover:opacity-75
${
isLoading
? "scale-110 blur-2xl grayscale"
: "scale-100 blur-0 grayscale-0"
})`}
onLoadingComplete={() => setLoading(false)}
/>
</div>
</a>
);
}
The picture will be blurred until it loads entirely.
Step 3: Importing Blur Image Component
Import the component,
import BlurImage from '../components/BlurImage'
Add the component to the page,
<BlurImage image={"https://domain.com/image.png"} />
This will blur the image on page load until the image loads completely.
How to Blur Images in Next.js Using Markdown
The remainder of Nikolov’s utilities makes it much easier to blur pictures within Markdown or MDX. All we have to do now is feed the plugin to our serialize method.
import imageMetaData from 'utils/imageMetadata'
import { serialize } from 'next-mdx-remote/serialize'
const components = {
img: (props: any): React.ReactNode => (
<Image {...props} layout="responsive" loading="lazy" />
),
}
function Post({ mdx }) {
return (
<>
<MDXRemote
{...mdx}
components={components}
/>
</>
}
export const getStaticProps = async context => {
// Get your data from a database or any other source
const markdown = getPostsFromDatabase();
// convert your markdown to html with unified, rehype or remark
const mdx = await serialize(markdown, {
mdxOptions: {
rehypePlugins: [imageMetaData],
},
})
return {
props: {
mdx,
},
};
}
How to Blur Images in a Static Next.js Website
plaiceholder
can also be used in a statically created Next.js webpage
export const getStaticProps = async context => {
// Get your data from a database or any other source
const data = getPostsFromDatabase();
// Pass the image to plaiceholder
const imageProps = await returnProps(data.thumbnailSrc);
// Or maybe you have a gallery
data.gallery = await Promise.all(
data.gallery.map(async item => {
const imageProps = await returnProps(item.imageSrc);
// This will return the image a well as the needed plaiceholder
// info in the same object within the array 🤯
return { ...item, imageProps };
})
);
return {
props: {
data,
// This data will then be used by <Image> in our frontEnd
thumbnail: imageProps
},
};
}
That’s all! Try loading your page. Before they lazy-load to view, your images should have a wonderful blur.