How to import GIF in NextJS

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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.