This content originally appeared on DEV Community 👩💻👨💻 and was authored by Simplified Dev
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
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>
);
}
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"} />
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,
},
};
}
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Simplified Dev
Simplified Dev | Sciencx (2023-01-12T12:38:16+00:00) How To Blur The Image On Load In Next.js. Retrieved from https://www.scien.cx/2023/01/12/how-to-blur-the-image-on-load-in-next-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.