Solving the Infamous “Module not found: Can’t resolve ‘../../public/img/cats.png'” in Next.js

If you’re reading this, chances are you’ve encountered the frustrating “Module not found: Can’t resolve ‘../../public/img/cats.png'” error in your Next.js project. Don’t worry, you’re not alone! This error has plagued many a developer, but fear not, for we’re about to embark on a journey to vanquish this pesky issue once and for all.

The Problem: A Deeper Dive

Before we dive into the solution, let’s understand what’s happening behind the scenes. When you try to import an image in your Next.js project using a relative path, Webpack (Next.js’s bundler) gets confused. It can’t seem to find the image, even though it’s right there in your `public` folder.

This is because Webpack uses a concept called “modules” to resolve imports. When you import an image, Webpack treats it as a module and tries to resolve it relative to the current file. In our case, the image is in the `public` folder, which is outside the module scope.

The Solution: Using the `public` Folder Correctly

The easiest way to solve this issue is to use the `public` folder as intended. Instead of importing the image using a relative path, you can use an absolute URL.

import img from '../public/img/cats.png'; // Don't do this!

// Do this instead:
const img = '/img/cats.png';

By using an absolute URL, you’re telling Next.js to serve the image from the `public` folder. This way, Webpack won’t try to resolve the image as a module, and the error will disappear.

But What About Dynamic Imports?

Sometimes, you need to import images dynamically, based on certain conditions. In such cases, using an absolute URL won’t work. Fear not, dear developer, for we have a solution for that too!

You can use the `next/Image` component from `next/future/image` to import images dynamically. This component provides a way to import images without using Webpack’s module resolution.

import Image from 'next/image';

const img = '/img/cats.png';

// Use the Image component
<Image src={img} alt="Cats!" />

By using the `next/Image` component, you can import images dynamically without running into the “Module not found” error.

Another Gotcha: Using `require` or `import` with Expressions

Another common pitfall is using `require` or `import` with expressions. This can lead to Webpack resolving the expression as a module, resulting in the “Module not found” error.

// Don't do this!
const img = require(`../public/img/${dynamicImagePath}.png`);

// Or this!
import img from `../public/img/${dynamicImagePath}.png`;

import dynamic from 'next/dynamic';

const img = dynamic(() => import(`../public/img/${dynamicImagePath}.png`));

By using `next/dynamic`, you can import modules dynamically without tripping up Webpack.

The Final Solution: Creating a Custom Image Component

To make your life easier, let’s create a custom image component that handles image imports correctly.

import Image from 'next/image';

const CustomImage = ({ src, alt, ...props }) => {
  const imageUrl = src.startsWith('/') ? src : `/img/${src}`;

  return <Image src={imageUrl} alt={alt} {...props} />;
};

export default CustomImage;

With this custom component, you can import images easily, without worrying about the “Module not found” error.

Conclusion

In conclusion, the “Module not found: Can’t resolve ‘../../public/img/cats.png'” error in Next.js can be solved by using the `public` folder correctly, leveraging the `next/Image` component, and creating a custom image component. By following these guidelines, you’ll be importing images like a pro in no time!

Solution	Description
Using absolute URLs	Use an absolute URL to import images from the `public` folder.
next/Image component	Use the `next/Image` component to import images dynamically.
next/dynamic API	Use the `next/dynamic` API to import modules dynamically.
Custom Image Component	Create a custom image component to handle image imports correctly.

Remember, with great power comes great responsibility. Use these solutions wisely and may the coding force be with you!

• Next.js Image API Documentation
• Webpack Modules Documentation
• Next.js Dynamic API Documentation

Happy coding, and may you never encounter the “Module not found” error again!

Here are 5 Questions and Answers about “Module not found: Can’t resolve ‘../../public/img/cats.png’ in Next.js” in a creative voice and tone:

Frequently Asked Question

Got stuck with the pesky “Module not found” error in Next.js? Worry not, friend! We’ve got the answers to your most burning questions.