CODEWITHSUNDEEP
javascriptreactjsnext.js
Yunus
Yunus

Reputation: 163

How to import GIF in NextJS

I'm trying to prepare my portfolio website with Nextjs. I want to use gif in the site. You can find my code below. I could not find how to do it.

enter image description here

Upvotes: 4

Views: 33437

Answers (4)

John Jesurum
John Jesurum

Reputation: 1

You can also use the prop unoptimized to serve the image as it is:

make sure you white list your domain in the next.config.js

module.exports = {
 images: {
     domains: ['SOURCE_IMAGE_DOMAIN']
 }
};

then in your image component:

import Image from 'next/image';

<Image unoptimized={true} src={GIF} alt="the gif" height={500} width={500} />

Next documentation: https://nextjs.org/docs/api-reference/next/image#animated-images

Upvotes: 0

yankeedoodle
yankeedoodle

Reputation: 473

Next/Image now supports gifs.

You should be able to import the gif and then toss it into the src like this

import Image from 'next/image';
import myGif from 'url'

...

<Image src={myGif} alt="my gif" height={500} width={500} />

If the url doesn't work here, it should work if you download the gif and toss it into assets.

Upvotes: 6

Lucas Bodin
Lucas Bodin

Reputation: 336

At first I entered your code: Your code and nextjs gave me this as an error:

Screenshot erreur

So I added the domain 'media.giphy.com' in the configuration 'next.config.js' This file must be added to the root of the project, at the same level as the 'pages' or 'lib' folder for example and must be called 'next.config.js':

File place screenshot

And in it you have to put this:

module.exports = {
    images: {
        domains: ['media.giphy.com']
    }
};

Then you have to restart your next js server. And normally you get this:

Image Screenshot

Here is some documentation to read to better understand:

https://nextjs.org/docs/basic-features/image-optimization

Upvotes: 0

Andrew Ross
Andrew Ross

Reputation: 1158

Next/Image does support GIF files...my first thought would be to ask if you have explicitly whitelisted a set of external domains in your next.config.js file? For the Next/Image Loader to handle external domains they must be individually whitelisted. Here are the contents of my next.config.js file.

const path = require('path');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: !!process.env.ANALYZE
});

module.exports = withBundleAnalyzer({
    webpack(
        config,
        {
            dev = process.env.NODE_ENV === 'development',
            isServer = typeof window === 'undefined'
        }
    ) {
        if (isServer) {
            require('./scripts/generate-sitemap');
        }
        /**
         * !dev ? preact/compat : react, react-dom on build
         * reduce page weight in production by ~10%
         */
        if (!dev && !isServer) {
            Object.assign(
                (config.resolve.alias['@/'] = path.resolve('./')),
                {
                    react: 'preact/compat',
                    'react-dom': 'preact/compat'
                }
            );
        }
        return config;
    },
    sourceMaps: {
        productionBrowserSourceMaps: true
    },
    images: {
        domains: [
            'avatars.githubusercontent.com',
            'faderoom-headless.us',
            'www.faderoom-headless.us',
            'dtmqnbkq3btfh.cloudfront.net',
            'secure.gravatar.com',
            'automattic.com',
            'serve.onegraph.com',
            'onegraph.com',
            'maps.google.com',
            'lh3.googleusercontent.com',
            'maps.gstatic.com',
            'thefaderoom146.booksy.com',
            'dev-3cqt2bq0.auth0.com',
            'scontent-sea1-1.xx.fbcdn.net',
            'd2zdpiztbgorvt.cloudfront.net',
            'platform-lookaside.fbsbx.com',
            'square-postoffice-production.s3.amazonaws.com'
        ]
    },
    future: {
        webpack5: true,
        strictPostcssConfiguration: true
    },
    i18n: {
        locales: ['en-US'],
        defaultLocale: 'en-US'
    }
});

console.log(
    'next.config.js',
    JSON.stringify(module.exports, null, 2)
);

So you would have to whitelist media.giphy.com and it should work just fine. I also do recommend setting the quality prop for the Image component. Quality defaults to 75 out of 100 but I'd suggest making that closer to 100 for better UX.

Upvotes: 6

Related Questions